布局学习重点： 浮动，定位，精灵图，二级导航栏，下拉框
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>优酷案例</title> <link rel="shortcut icon" href="images/1.ico" type="image/x-icon"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="images\font-awesome\css\font-awesome.min.css"> </head> <body> <!-- header --> <div class="header"> <!-- 轮播模块 --> <div class="pic_show"> <div class="bg"></div> <div class="contents head_r"></div> </div> <!-- 顶部导航条 --> <div class="contents header_ul"> <div class="logo left mt"> <a href=""><img src="images/logo.png" alt=""></a> <form action=""> <input type="text"> <button>全网搜</button> </form> </div> <ul class="menu_li right mt"> <li><i class="fa fa-star" style="color:#c4a25A"></i><br><span href="" style="color:#c4a25A">VIP</span></li> <li><i class="fa fa-wifi"></i><br><span>订阅</span></li> <li><i class="fa fa-clock-o"></i><br><span>记录</span></li> <li><i class="fa fa-arrow-up"></i><br><span>上传</span></li> <div class="upadd"> <ul> <li> <a class="vi fa fa-star" href="#"></a> <em>上传视频</em> </li> <li> <a class="mg fa fa-star" href="#"></a> <em>视频管理</em> </li> <li> <a class="my fa fa-star" href="#"></a> <em>我的自频道</em> </li> <li style="margin:0;"> <a class="data fa fa-star" href="#"></a> <em>数据分析</em> </li> <div class="clear"></div> <div class="download"> <span class="arrow_dw"></span> <i class="line_dw"></i> <span>优酷PC客户端,看片免广告！</span> <a href="">立即下载</a> </div> </ul> </div> <li><i class="fa fa-desktop"></i><br><span>客户端</span></li> <div class="pc"> <span class="arrow_pc"></span> <div class="yk left mt"> <img src="images/1.ico" alt="" width="48px"> <p>优酷客户端</p> <span class="font_sp">快速·稳定的观看体验</span> </div> <i class="line"></i> <div class="qc left mt"> <img src="images/qc.jpg" alt="" width="48px"> <p>优酷移动APP</p> <span class="font_sp">全网独播仅在手中</span> </div> <div class="clear"></div> <div class="tvapp"> <img src="images/TVlogo.jpg" alt="" width="20px"> <h3>优酷TV版</h3><span class="font_sp"> CIBN酷喵影视智能电视App</span> </div> </div> <li><a href=""><img src="images/80.png" alt="" width="40px;" style="margin-top:-5px;"></a></li> <div class="box"> <span class="arrow"></span> <p class="font">登陆使用更多功能</p> <button>登陆/注册</button> </div> <div class="clear"></div> </ul> </div> </div> <!-- content TV --> <div class="contents"> <div class="content"> <div class="contentUL"> <h2>正在热播</h2> </div> <ul class="hot_tv"> <li class="mr"> <a href=""> <img src="images/a.jpg" alt=""><br> <span>瞰中国：宁夏</span> </a><br> <small>低调的宁夏 美了四季</small> </li> <li class=" mr"> <a href=""> <img src="images/b.jpg" alt=""><br> <span>摘金奇缘</span> </a><br> <small>摘金奇缘</small> </li> <li class="mr"> <a href=""> <img src="images/c.jpg" alt=""><br> <span>王牌对王牌</span> </a><br> <small>中国最红王牌大PK</small> </li> <li class="mr"> <a href=""> <img src="images/d.jpg" alt=""><br> <span>我们村里的人</span> </a><br> <small>回乡创业带动乡村发展</small> </li> <li class="mr"> <a href=""> <img src="images/e.jpg" alt=""><br> <span>黑色四叶草</span> </a><br> <small>黑色暴牛骑士团</small> </li> <li> <a href=""> <img src="images/f.jpg" alt=""><br> <span>大城晓聚</span> </a><br> <small>大城晓聚</small> </li> </ul> <div class="clear"></div> </div> <div class="content"> <div class="contentUL"> <h2 class="left">剧集></h2> <ul class="tab left"> <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 class="clear"></div> </div> <div class="tv_show"> <div class="big_show left mr"> <a href=""> <img src="images/tv.jpg" alt=""><br> <span>逆流而上的你·爆笑</span> </a><br> <small>新晋辣妈萌爸！潘粤明马丽咸鱼夫妻带娃逆袭！</small> </div> <ul class="tv_tab"> <li> <a href=""> <img src="images/tv1.jpg" alt=""><br> <span>都挺好</span> </a><br> <small>姚晨郭京飞陷亲情旋涡</small> </li> <li> <a href=""> <img src="images/tv2.jpg" alt=""><br> <span>乡村爱情11</span> </a><br> <small>刘能赵四争C位</small> </li> <li> <a href=""> <img src="images/tv3.jpg" alt=""><br> <span>小女花不弃</span> </a><br> <small>林依晨张彬彬苏甜来袭</small> </li> <li> <a href=""> <img src="images/tv4.jpg" alt=""><br> <span>春暖花又开</span> </a><br> <small>姚芊羽李建上演新农村创业</small> </li> <li> <a href=""> <img src="images/tv5.jpg" alt=""><br> <span>老中医</span> </a><br> <small>陈宝国冯远征许晴弘扬医道</small> </li> <li> <a href=""> <img src="images/tv6.jpg" alt=""><br> <span>重耳传奇</span> </a><br> <small>春秋版“王子历险记”</small> </li> <li> <a href=""> <img src="images/tv7.jpg" alt=""><br> <span>只为遇见你.甜蜜开播</span> </a><br> <small>霸气帅总撩动你的少女心</small> </li> <li> <a href=""> <img src="images/tv8.jpg" alt=""><br> <span>国宝奇旅</span> </a><br> <small>刘烨袁姗姗携手护国宝</small> </li> </ul> </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
*{margin: 0;padding: 0;}
a{color: #000;text-decoration: none;}
li{list-style: none; float: left;}
small{font-size: 12px;color: #999;}
.left{float: left;}
.right{float:right;}
.mr{margin-right: 9px;}
.mt{margin-top: 20px;}
.clear{clear: both;}
em{font-style:normal;}
.contents{
/* background: rgb(205, 88, 209); */
width: 1200px;
margin: 0 auto;
}
.content{
width: 100%;
margin-top: 20px;
}
.contentUL{line-height: 60px;}
.hot_tv img{
width: 192px;
height: 288px;
}
.big_show img{width: 394px;height: 280px;}
.tab li{margin-left: 25px;}
.tv_tab img{width: 193px;height: 118px;}
.tv_tab{width:1240px;}
.tv_tab li{margin:0 5px}
/* 轮播+导航 */
.header{
height: 520px;
width: 100%;
/* background: #1F82FC; */
}
/* 轮播 */
.pic_show{
width: 1519px;
height: 520px;
background: url(../images/y1.jpg);
margin: 0 auto;
position: relative;
}
.bg{
width: 100%;
height: 100%;
background: url(../images/y.png);
position: absolute;top: 0;left: 0;
z-index: 999;
}
/* 导航+logo */
.header_ul{
position: fixed;top: 0;left: 90px;
z-index: 1000;
}
.logo form{
width: 400px;
height: 40px;
position: relative;
margin-left: 300px;
display: inline-block;
}
.logo input{
width: 330px;
height: 40px;
border-radius: 100px;
border: none;
background: rgba(122,130,151, 0.5);
outline: none;/*去掉表单元素自动获取焦点效果 */
padding-left: 20px;
}
.logo button{
position: absolute;top: 0;right: 0;
width: 90px;
height: 40px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
background: #1F82FC;
color: #FFFFFF;
border:none;
outline: none;
}
/* 顶部图标 */
.menu_li span,i{color: rgba(234, 234, 234, 0.5);}
.menu_li li{
padding: 0 10px;
text-align: center;
font-size: 12px;
position: relative;
}
.menu_li i{font-size: 18px;}
.menu_li li:hover span{color: #48ADF2}
.menu_li li:hover i{color: #48ADF2}
/* logo图标下拉 */
.menu_li .box{
position: absolute;right: -10px;top:70px;
background: #FFFFFF;
padding: 20px;
display: none;
}
.menu_li p{
font-size: 16px;
text-align: center;
}
.menu_li .font{
color: #ccc;
}
.menu_li .font_sp{
color: #ccc;
font-size: 12px;
}
.menu_li button{
background: #2798ff;
color: #FFFFFF;
border: none;
height: 36px;
width: 200px;
border-radius: 30px;
margin-top: 15px;
outline: none;
}
.menu_li li:hover+.box{
display: block;
}
.menu_li .pc{
background-color: #fff;
position: absolute;
top: 70px;/* right: 10px; */
text-align: center;
padding:10px 20px;
display: none;
}
.yk{
float: left;
margin-right: 30px;
}
.yk:hover p{
color: #48ADF2;
}
.qc{
float: left;
}
.qc:hover p{
color: #48ADF2;
}
.tvapp{
position: absolute;
top:134px;
right: 0;
background: #F5F7F8;
width: 257px;
height: 60px;
line-height: 60px;
text-align: center;
padding: 0 10px;
}
.tvapp img{
vertical-align:middle;
}
.tvapp h3{
display: inline-block;
color: #333;
font-weight: normal;
font-size: 14px;
}
.tvapp:hover h3{
color: #48ADF2;
}
.arrow_pc{
width: 0;
height: 7px;
border: 7px solid;
border-color: transparent transparent #fff transparent;
position: absolute;
top: -21px;
right: 68px;
}
.menu_li li:hover +.pc{
display: block;
}
.upadd{
background-color:#fff;
padding: 15px 20px 0;
position: absolute;
top: 70px;right: 0;
display: none;
}
.upadd li{
/* background: #000; */
width: 70px;
height: 70px;
margin-right: 15px;
padding: 0;
margin-bottom: 10px;
}
.upadd .vi{
display: inline-block;
width: 68px;
height: 70px;
background: url(../images/TB.png)-181px -30px no-repeat;
}
.upadd .mg{
display: inline-block;
width: 68px;
height: 70px;
background: url(../images/TB.png)-181px -30px no-repeat;
}
.upadd .my{
display: inline-block;
width: 68px;
height: 70px;
background: url(../images/TB.png)-181px -30px no-repeat;
}
.upadd .data{
display: inline-block;
width: 68px;
height: 70px;
background: url(../images/TB.png)-181px -30px no-repeat;
}
.upadd a{
line-height: 70px;
text-align: center;
font-size: 20px;
color: #fff;
text-decoration:none;
}
.upadd a:hover{
color: #fff;
}
.download{
height: 60px;
margin: 10px 0 0;
padding:0 10px;
/* background: #333; */
}
.download span{
display: inline-block;
color: #000;
font-size: 13px;
float: left;
margin-top: 25px;
/* background: #1F82FC; */
}
.download a{
display: inline-block;
color:blue;
font-size: 12px;
float: right;
}
.download .line_dw{
height: 1px;
width: 100%;
background: #f3f3f3;
display: block;
position: absolute;
top: 115px;
left: 0;
}
.download a:hover{
color: #48ADF2;
}
.download .arrow_dw{
width: 0;
height: 7px;
border: 7px solid;
border-color:transparent transparent #fff transparent /*上右下左*/ ;
position: absolute;
top: -46px;
right: 128px;
}
.menu_li li:hover +.upadd{
display: block;
}
/* .upadd em{
display: inline-block;
} */
/* 小箭头*/
.arrow{
width: 0;
height: 7px;
border: 7px solid;
border-color:transparent transparent #fff transparent /*上右下左*/ ;
position: absolute;
top: -21px;
right: 32px;
}
/* 中间线 */
.menu_li .line{
height: 70px;
width: 1px;
background: #F3F3F3;
display: block;
position: absolute;
top: 40px;
right: 50%;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
