第四节课内容总结如下：
CSS中的定位(Position)属性允许你对元素进行定位：(fixed/relative/absolute)
fixed:元素的位置相对于浏览器窗口是固定位置; eg：position: fixed;top:20px ;left:40px;脱离文档流，固定在页面上不随页面滚动而滚动
relative:相对定位元素的定位是相对其正常位置,相对定位元素经常被用来作为绝对定位元素的容器块;
absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于出始包含块。特点：绝对定位使元素的位置与文档流无关，因此不占据空间。子绝父相：如果子元素使用了绝对定位，通常父元素需使用相对定位，使子元素的位置更灵活
z-index 属性设置元素的堆叠顺序 注意:Z-index 仅能在定位元素上奏效。数字越大层级越高
伪选择器:hover：当鼠标移上该元素时会显示的效果
以下为作业部分，仿优酷导航条
css代码如下：
实例
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a{
text-decoration: none;
color: #333333;
}
.l{
float: left;
}
.r{
float: right;
}
.mr{
margin-right: 10px;
}
.mt{
margin-top: 18px;
}
.clear {
clear: both;
}
.contents {
width: 1740px;
margin: 0 auto;
}
.contentTitle {
line-height: 70px;
}
.content {
width: 100%;
margin-top: 20px;
}
.hot_tv img {
width: 240px;
height: 360px;
}
small{
color: #999999;
}
.tab li{
margin-left: 25px;
font-size: 16px;
}
.tab_tv img{
width: 240px;
height: 135px;
}
.header{
width: 100%;
height: 520px;
background: #0D0181;
position: relative;
}
.pic_show{
width: 1740px;
height: 520px;
background: url("../images/bg.jpg") no-repeat;
background-size: 100%;
margin: 0px auto;
}
.bg{
width: 100%;
height: 520px;
background: url("../images/bg_1.png") no-repeat;
background-size: 100%;
position: absolute;top: 0px;left: 0px;z-index: 99;
}
.menu{
width: 100%;
height: 70px;
position: absolute;top: 0px;left: 0;z-index: 999;
}
.menu_contents{
width: 1740px;
height: 70px;
margin: 0 auto;
}
.menu_left{
width: 1120px;
height: 70px;
}
.menu_left img{
margin: 20px;
}
.menu_left form{
width: 500px;
height: 40px;
margin: 16px auto;
}
.input_text{
width: 390px;
height: 40px;
border: none;
outline: none;
padding-left: 20px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
background: rgba(234,234,234,0.5);
}
.input_button{
width: 90px;
height: 40px;
border: none;
background: #B30702;
color: #FFEABF;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
}
.icon{
width: 28px;
height: 22px;
margin: 0 auto;
background:url("../images/icon_sprite.png");
}
.icon_vip{
background-position: -32px -164px;
}
.icon_record{
background-position: -40px -60px;
}
.icon_upload{
background-position: -40px -100px;
}
.icon_pc{
background-position: -40px -80px;
}
.menu_right{
margin-top: 16px;
}
.menu_right li{
width: 40px;
margin-right: 10px;
text-align: center;
}
.menu_right span{
font-size: 12px;
color: #E8E9EC;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
html代码如下：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>优酷-这世界很酷</title> <link rel="icon" type="image/x-icon" href="static/images/1.ico"> <link type="text/css" rel="stylesheet" href="static/css/myStyle.css"> </head> <body> <div class="header"> <div class="pic_show"></div> <div class="bg"></div> <div class="menu"> <div class="menu_contents"> <div class="menu_left l" > <img src="static/images/logo.png"> <form method="" action="" class="r"> <input type="text" class="input_text"> <input type="button" class="input_button r" value="搜全网"> </form> <div class="clear"></div> </div> <div class="menu_right r"> <ul> <li class="l"> <a href=""> <div class="icon_vip icon"></div> <span style="color: #FF8500">VIP</span> </a> </li> <li class="l"> <a href=""> <div class="icon_record icon"></div> <span >记录</span> </a> </li> <li class="l"> <a href=""> <div class="icon_upload icon"></div> <span >上传</span> </a> </li> <li class="l"> <a href=""> <div class="icon_pc icon"></div> <span >客户端</span> </a> </li> </ul> </div> </div> </div> </div> <div class="contents"> <div class="content"> <div class="contentTitle"> <h2>正在热播</h2> </div> <ul class="hot_tv"> <li class="mr l"> <a href=""> <img src="static/images/a.jpg"><br> <span>瞰中国：宁夏</span> </a><br> <small>低调的宁夏 美了四季</small> </li> <li class="mr l"> <a href=""> <img src="static/images/b.jpg"><br> <span>瞰中国：宁夏</span> </a><br> <small>低调的宁夏 美了四季</small> </li> <li class="mr l"> <a href=""> <img src="static/images/c.jpg"><br> <span>瞰中国：宁夏</span> </a><br> <small>低调的宁夏 美了四季</small> </li> <li class="mr l"> <a href=""> <img src="static/images/d.jpg"><br> <span>瞰中国：宁夏</span> </a><br> <small>低调的宁夏 美了四季</small> </li> <li class="mr l"> <a href=""> <img src="static/images/e.jpg"><br> <span>瞰中国：宁夏</span> </a><br> <small>低调的宁夏 美了四季</small> </li> <li class="mr l"> <a href=""> <img src="static/images/f.jpg"><br> <span>瞰中国：宁夏</span> </a><br> <small>低调的宁夏 美了四季</small> </li> <li class="l"> <a href=""> <img src="static/images/g.jpg"><br> <span>瞰中国：宁夏</span> </a><br> <small>低调的宁夏 美了四季</small> </li> </ul> <div class="clear"></div> </div> <div class="content"> <div class="contentTitle"> <h2 class="l mr">剧集 ></h2> <ul class="tab l"> <li class="l"><a href=""> 最新</a></li> <li class="l"><a href="">大陆剧</a></li> <li class="l"><a href=""> 日剧</a></li> <li class="l"><a href=""> 韩剧</a></li> <li class="l"><a href=""> 美剧</a></li> </ul> <div class="clear"></div> </div> <div class="tv_show"> <div class="big_show l mr"> <a href=""> <img src="static/images/tv.jpg"><br> <span>逆流而上的你</span> </a><br> <small>低调的宁夏 美了四季</small> </div> <ul class="tab_tv l"> <li class="mr l"> <a href=""> <img src="static/images/tv1.jpg"><br> <span>都挺好</span> </a><br> <small>姚晨郭京飞陷亲情旋涡</small> </li> <li class="mr l"> <a href=""> <img src="static/images/tv1.jpg"><br> <span>都挺好</span> </a><br> <small>姚晨郭京飞陷亲情旋涡</small> </li> <li class="mr l"> <a href=""> <img src="static/images/tv1.jpg"><br> <span>都挺好</span> </a><br> <small>姚晨郭京飞陷亲情旋涡</small> </li> <li class="mr l"> <a href=""> <img src="static/images/tv1.jpg"><br> <span>都挺好</span> </a><br> <small>姚晨郭京飞陷亲情旋涡</small> </li> <li class="l"> <a href=""> <img src="static/images/tv1.jpg"><br> <span>都挺好</span> </a><br> <small>姚晨郭京飞陷亲情旋涡</small> </li> </ul> <ul class="tab_tv l mt"> <li class="mr l"> <a href=""> <img src="static/images/tv1.jpg"><br> <span>都挺好</span> </a><br> <small>姚晨郭京飞陷亲情旋涡</small> </li> <li class="mr l"> <a href=""> <img src="static/images/tv1.jpg"><br> <span>都挺好</span> </a><br> <small>姚晨郭京飞陷亲情旋涡</small> </li> <li class="mr l"> <a href=""> <img src="static/images/tv1.jpg"><br> <span>都挺好</span> </a><br> <small>姚晨郭京飞陷亲情旋涡</small> </li> <li class="mr l"> <a href=""> <img src="static/images/tv1.jpg"><br> <span>都挺好</span> </a><br> <small>姚晨郭京飞陷亲情旋涡</small> </li> <li class="l"> <a href=""> <img src="static/images/tv1.jpg"><br> <span>都挺好</span> </a><br> <small>姚晨郭京飞陷亲情旋涡</small> </li> </ul> <div class="clear"></div> </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
结果页面如下所示：
![895A1OY5D$]$E~63BCNUCB3.jpg](https://img.php.cn/upload/image/403/927/598/1552633618447608.jpg "1552633618447608.jpg")
总结：浮动、固定定位、绝对定位都脱离了文档流，在布局的时候 要注意当前元素时相对于那个元素的位置。还有父元素布局可能会影响子元素 ，如果不是该父元素下所以子元素都同一种效果，尽量分开写样式。
