总结
通过这次课程，我学会了定位布局+浮动布局，学会了定位使用遮罩小技巧，以及3种导航方式，分别为下拉菜单，列表菜单，图标菜单。并且通过CSS做好排版。
通过li.class语法选择自身。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优酷-这世界很酷！</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<style type="text/css" media="screen">
*{
margin: 0px;
padding: 0px;
}
a {color:#000;text-decoration: none;}
li {list-style: none; float: left;} /*取消li列表样式 并且向左浮动 浮动后自带区块属性*/
li img:hover {box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);} /*伪类鼠标移到图片的阴影效果 X y 模糊度 外延值 颜色*/
.hot_tv img:hover {box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.2);}
small {color: #B5B5B5;} /*设置文字颜色*/
.hotMenu li a:hover {text-decoration: none;color:#2692FF;} /*设置鼠标移上去的颜色，没有下划线*/
.hotMenu li a:hover:after {content: "";background:#2692FF;border-radius: 10px;display: block;width: 20px;height: 3px;margin: 0px auto; }
/* 这种并列写法需要一个:hover来激活， 单独用E:after 时不需要激活 在……之后加上content内容（content参数必须要的） 画圆角 转换成区块 使他能用宽高参数，然后居中显示*/
.mr {margin-right:10px;}
.mrt{margin-top: 10px;}
.clear {clear:both;} /*清楚两边的浮动*/
.l {float: left;} /* 向左浮动*/
.r {float: right;}
.contents {
width: 1740px;
margin: 10px auto 0px; /*上下 左右 / 上下左右 / 上 左右 下/*/
}
.content {width: 100%;margin-top:10px;}
.content_hot img {width: 235px;height: 360px;}
.contenMenu h2 {
height: 70px;
line-height: 70px;
}
.hotMenu li {height: 20px;line-height: 20px;margin-left: 20px;margin-top:28px;}
/* .hotMenu {background: red; display: block;width: 400px;height: 70px;}*/
.tv_show {}
.hot_tv >a > img {width:583px;height: 334px; }
.hot_tv_UL img{ width: 270px;height: 139px; }
/* .more {
width: 82px;
height: 139px;
background: red;
line-height: 139px;
text-align: center;
}*/
/* 头背部背景部分*/
.headers {
background: #A1735C;
width: 100%;
position: relative;
}
/*导航部分*/
/* 定位 relative=相对定位 absolute=绝对定位 fixed=固定 不受浏览器滚动影响。 一般来说 子绝父相 absolute 以父级定位标签为参照点，
若没有找到就用浏览器做绝对定位 脱离文档流；z-index 表示层级，值越大越高；
relative 相对于自身位置的定位 没有脱离文档流；*/
/*轮播图和遮罩部分*/
.header_bg {background: url(images/herdimg.jpg) no-repeat;width: 1664px;height: 520px;margin: 0px auto;position: relative;}
.bg {background: url(images/bg.png) no-repeat;/*background-size:100% 100%*/;position: absolute;top: 0px;left: 0px;width: 1664px;height: 520px;}
.header_menu {position: fixed;top:20px;left: 120px;width:100%;}
/*logo部分*/
.logo img {border: none;width: 120;height: 24px;}
/*中间搜索部分*/
.head_bt {margin-left:500px;position: relative;width: 400px;display: inline-block; }
.head_bt input {border:0px none;width: 390px;height: 30px;border-radius: 100px;background: rgba(234,234,234,0.5);outline:0 none;padding-left: 10px;}
.head_bt button {color:#FBDEB5;border: none;width:80px;height: 30px;border-top-right-radius: 30px;border-bottom-right-radius: 30px;background: #B30702;position: absolute;top: 0px;right: 0px;outline:0 none;}
/*outline复合属性。设置或检索对象外的线条轮廓*/
/*右边图标部分*/
.beader_bt_r{margin-right: 300px;position: relative;}
.beader_bt_r ul li {height:50px;text-align: center;margin:0px 10px 0px;font-size: 18px;}
.beader_bt_r ul li a {color: #E5E5E5;}
.beader_bt_r ul li i{color: #E5E5E5;}
.beader_bt_r ul li:hover a {color: #35B5FF;}
.beader_bt_r ul li:hover i {color: #35B5FF;}
/*顶部左边列表导航*/
.head_bt_r_li {
/*定义宽度，高度未定义，根据内容变化*/
width: 260px;background:rgba(0,0,0,0.5);position: absolute;top: 100px;right:100px;border-radius: 30px; /*绝对定位 父级是轮播图*/
}
.head_bt_r_li ul li {width: 210px;margin-left: 20px;margin-top: 12px; /* 定义每个li标签的宽度 */
padding-left: 5px;font-size: 15px;border-bottom: 1px solid #ccc; /*下边框线*/
}
/* a是行内标签，所以要变为block 宽度继承li的宽度。 文本超出隐藏并切取为。。。*/
.head_bt_r_li ul li a {display:block;color: #aaa; padding-bottom: 15px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.head_bt_r_li ul li a:hover {font-size:18px; color:#fff;}
.head_bt_r_li ul li:hover span {display: block;text-align: left;} /*span是行内标签需要转为block独占一行。*/
/*下拉框*/
/*以父级定位标签为参照点，绝对定位。*/
.beader_bt_r_rss_sub { position: absolute;top: 50px;left: 10px;width: 210px;height:80px;z-index: 2; background: #fff;display: none;}
.beader_bt_r_rss_sub_sjx {border:7px solid;
/*上右下左*/ /*设置边框粗细 实线*//*第三个参数是颜色*/
border-color: transparent transparent #fff transparent;position: absolute;top:-14px;left:0px;
/*边框颜色 边框做三角形 transparent 是透明的意思 只流下边框线，就变为了三角形。*/
}
.beader_bt_r_rss_sub li {color: #000;margin-top: 10px;}
.beader_bt_r_run:hover .beader_bt_r_rss_sub {display: block; } /*鼠标移上去显示下拉框*/
.beader_bt_r_run {position: relative;} /*下拉框父级 相对定位*/
/* 顶部下面文字导航*/
.head_voltag li {width: 300px;float: left;}
.head_voltag a {width: 100px;display: inline-block;text-align: center;height: 40px;line-height: 40px;color: #7A7D82;}
.head_voltag span {display: inline-block;width: 2px;height: 70px;border-left: 1px solid #ccc;margin-top: 5px;float: left;}
/*文字导航图标设置区域!important 强制最高优先级*/
.head_voltag_i {text-align: center;margin-top: 10px; width: 90px !important;margin-left: 30px;}
.head_voltag_i a{text-align: center;margin-top: ;}
li.head_voltag_i i {font-size: 28px;color: #ccc;}
/*li标签自身head_voltag_i ，同时满足li标签+class的意思。*/
</style>
</head>
<body>
<div class="headers">
<div class="header_bg"><div class="bg"></div>
<div class="head_bt_r_li">
<ul>
<li><a href="" ><span>李全权在PHP中文网学习,linuxup.cn</span>加油学习哦！</a></li>
<li><a href="" ><span>李全权在PHP中文网学习,linuxup.cn</span>加油学习哦！</a></li>
<li><a href="" ><span>李全权在PHP中文网学习,linuxup.cn</span>加油学习哦！</a></li>
<li><a href="" ><span>李全权在PHP中文网学习,linuxup.cn</span>加油学习哦！</a></li>
<li><a href="" ><span>李全权在PHP中文网学习,linuxup.cn</span>加油学习哦！</a></li>
<li><a href="" ><span>李全权在PHP中文网学习,linuxup.cn</span>加油学习哦！</a></li>
<li style="border:none;"><a href="" ><span>李全权在PHP中文网学习,linuxup.cn</span>加油学习哦！</a></li>
</ul>
</div>
</div>
<div class="header_menu"><div class="logo l"><img src="images/logo.png" alt=""></div>
<div class="head_bt">
<form action="demo_submit" method="get" accept-charset="utf-8">
<input type="text" name="" value="">
<button>搜索</button>
</form>
</div>
<div class="beader_bt_r r">
<ul>
<li class="beader_bt_r_run"><i class="fa fa-cart-plus " ><br><a href="" class=""><span>VIP</span></a></i>
<div class="beader_bt_r_rss_sub">
<span class="beader_bt_r_rss_sub_sjx"></span>
<ul class="beader_bt_r_rss_sub_li">
<li style="height: 20px;margin-top: 10px;">菜单1</li>
<li style="height: 20px;margin-top: 10px;">菜单2</li>
<li style="height: 20px;margin-top: 10px;">菜单3</li>
<li style="height: 20px;margin-top: 10px;">菜单4</li>
<li style="height: 20px;margin-top: 10px;">菜单5</li>
<li style="height: 20px;margin-top: 10px;">菜单6</li>
</ul>
</div>
</li>
<li><a href="" class=""><i class="fa fa-rss "><br><span>订阅</span></i>
</a>
</li>
<li><a href=""><i class="fa fa-clock-o "><br><span>记录</span></i></a></li>
<li><a href=""><i class="fa fa-arrow-up "><br><span>上传</span></i></a></li>
<li><a href=""><i class="fa fa-tv " "><br><span>客户端</span></i></a></li>
<li class="beader_bt_r_run"><a href=""><i class="fa fa-user-circle-o " style="font-size: 40px;margin-top: -2px;"></i></a>
<div class="beader_bt_r_rss_sub">
<span class="beader_bt_r_rss_sub_sjx"></span>
<ul class="">
<li style="height: 20px;margin-top: 10px;">菜单1</li>
<li style="height: 20px;margin-top: 10px;">菜单2</li>
<li style="height: 20px;margin-top: 10px;">菜单3</li>
<li style="height: 20px;margin-top: 10px;">菜单4</li>
<li style="height: 20px;margin-top: 10px;">菜单5</li>
<li style="height: 20px;margin-top: 10px;">菜单6</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 头部文字导航 -->
<div class="contents">
<div class="content">
<div class="head_voltag">
<ul>
<li class=""><a href="">剧集</a><a href="">电影</a><a href="">综艺</a><a href="">动漫</a><a href="">娱乐</a><a href="">生活</a></li>
<span class="head_voltag_bd"></span>
<li class=""><a href="">剧集</a><a href="">电影</a><a href="">综艺</a><a href="">动漫</a><a href="">娱乐</a><a href="">生活</a></li>
<span class="head_voltag_bd"></span>
<li class=""><a href="">剧集</a><a href="">电影</a><a href="">综艺</a><a href="">动漫</a><a href="">娱乐</a><a href="">生活</a></li>
<span class="head_voltag_bd"></span>
<li class=""><a href="">剧集</a><a href="">电影</a><a href="">综艺</a><a href="">动漫</a><a href="">娱乐</a><a href="">生活</a></li>
<span class="head_voltag_bd"></span>
<li class="head_voltag_i" ><i class="fa fa-feed "></i><br><a href="">优酷片库</a></li>
<li class="head_voltag_i" "><i class="fa fa-bar-chart "></i><a href="">指数排行</a></li>
<li class="head_voltag_i" "><i class="fa fa-angellist "></i><a href="">大鱼号精选</a></li>
<li class="head_voltag_i" "><i class="fa fa-desktop "></i><a href="">下载应用</a></li>
</ul>
</div>
</div>
</div>
<div class="clear"></div>
<!-- 热播 -->
<div class="contents">
<div class="content">
<div class="contenMenu">
<h2>正在热播</h2>
</div>
<div class="content_hot">
<ul>
<li class="mr libox"><a href=""><img src="images/a.jpg" alt="hot_tv"><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
<li class="mr"><a href=""><img src="images/b.jpg" alt="hot_tv"><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
<li class="mr"><a href=""><img src="images/c.jpg" alt="hot_tv"><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
<li class="mr"><a href=""><img src="images/d.jpg" alt="hot_tv"><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
<li class="mr"><a href=""><img src="images/e.jpg" alt="hot_tv"><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
<li class="mr"><a href=""><img src="images/f.jpg" alt="hot_tv"><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
<li class=""><a href=""><img src="images/g.jpg" alt="hot_tv"><br><span>白蛇：缘起</span></a><br><small>白蛇前世爱情凄美动人</small></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div class="content">
<div class="contenMenu">
<h2 class="l mr">剧集 </h2>
<ul class="hotMenu l">
<li><a href="">最新</a></li>
<li><a href="">大陆剧</a></li>
<li><a href="">日韩剧</a></li>
<li><a href="">欧美剧</a></li>
<li><a href="">港台剧</a></li>
</ul>
</div>
<div class="clear"></div>
<div class="tv_show">
<div class="hot_tv l mr">
<a href=""><img src="images/tv.jpg" alt=""><br><span>瞰中国：宁夏</span><br><small>低调的宁夏 美了四季</small></a>
</div>
<div class="hot_tv_UL">
<ul>
<li class="mr"><a href=""><img src="images/tv1.jpg" alt=""><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
<li class="mr"><a href=""><img src="images/tv2.jpg" alt=""><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
<li class="mr"><a href=""><img src="images/tv3.jpg" alt=""><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
<li class=""><a href=""><img src="images/tv4.jpg" alt=""><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
<!-- <li class="mr more"><a href=""><b>更多>></b></li> -->
</ul>
</div>
<div class="hot_tv_UL">
<ul class="">
<li class="mr mrt"><a href=""><img src="images/tv5.jpg" alt=""><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
<li class="mr mrt"><a href=""><img src="images/tv1.jpg" alt=""><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
<li class="mr mrt"><a href=""><img src="images/tv1.jpg" alt=""><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
<li class=" mrt"><a href=""><img src="images/tv1.jpg" alt=""><br><span>瞰中国：宁夏</span></a><br><small>低调的宁夏 美了四季</small></li>
<!-- <li class="mr more"><a href=""><b>更多>></b></li> -->
</ul>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
