6.1.2 网站首页 - 头部及海报区域的搭建(下)
本节简介:海报区域轮播图的框架搭建,左右和下方切换按钮制作,以及定位方式的优化等
本节课同学们做的笔记 点击播放按钮可自动定位到对应时间进行播放
图像居中:left:50%;margin-left:页面宽度/2px;
定位后居中:left:50%;margin-left:-720px;
想要居中显示,首先需要定位元素位置为绝对值,即position:absolute,然后将其top和left设置为50%,随后将其margin-top和margin-left值设置为其高度的一半负数
给元素添加旋转属性:transform:rotate(45deg);给元素添加鼠标属性:cursor:pointer;
给三张banner轮播图添加位置属性;因为要将三张图重合在一起,所以给三张图添加“absolute”属性,给父级banner添加“relative”属性
deg程度;transform:改变形式;transform:rotate(45deg):旋转45度
display:inline-block行级块元素
position:absolute;top:0;left:0才能出现改图像的现象
行级块元素只要给父级添加TextAlignCenter就会居中显示。
轮播图的小圆点用ol li实现;行级块元素的居中用text-align:center;块元素的居中用margin:0 auto;