功能：
1：使用hover实现，鼠标滑过box展现；
2：使用js来实现，点击块隐藏；
3：浮动和清除浮动
4：绝对定位和相对定位；
主图引用不知道怎么在作业上传；？？？？？？
* {margin: 0;padding: 0;}
li{list-style: none;}
a{text-decoration:none}
.gg{width: 100%;height: 70px;background: url(../../static/images/tb1q3agjllok1rjszfuxxxn0xxa-2116-140.png)center no-repeat;background-size: 1000px 70px;}
.header{width: 1202px;height: 400px;margin: 0 auto;background: #ccc;}
/*下拉框*/
.u-record .box1{display: none;width: 351px;height: 194px;background-color: white;position: absolute;right: 10px;}
.u-record .box1 .arrow{right: 165px;}
.u-record .box1 button{border-radius: 100px;font-family: PingFangSC-Semibold;
background: #148aff;border: 1px solid #3383da;width: 68px;height: 30px;color: #fff;margin-top: 20px}
.u-record:hover .box1{display: block;}
.no-record{text-align: center;
color: #909090;}
.no-record-bg{ display: inline-block;
width: 64px;
height: 68px;
background: url(../../static/images/TB17p_4qTtYBeNjy1XdXXXXyVXa-150-598.png) 0 -410px no-repeat;}
.no-record p{}
/*上传*/
.box2{width: 352px;height: 149px;background-color: white;position: absolute;right: 10px;
display: none;
}
.u-upload:hover .box2{display: block;}
.box2 .arrow{position: absolute;top:-21px;right: 110px;}
.u-list{
border-bottom: 1px solid #ebebeb;
width: 320px;
height: 60px;
padding: 20px 0 20px;
margin: 0 auto;}
.u-list li{float: left;
width: 80px;
height: 80px;}
.u-list a{display: inline-block;
width: 68px;
height: 40px;
font-size: 13px;
padding-top: 14px;
text-align: center;
background: url(../../static/images/TB1sMxIqHSYBuNjSspiXXXNzpXa-300-1200.png) -180px -40px no-repeat;}
.u-list em{
width: 20px;
height: 18px;
display: block;
margin: 0 auto 20px;
background: url(../../static/images/TB1sMxIqHSYBuNjSspiXXXNzpXa-300-1200.png) no-repeat;
}
.upload-vido em{background-position: -71px -75px;}
.u-creat em{background-position: -123px -79px;}
.u-pd em{background-position: -124px -53px;}
.u-sj em{background-position: -96px -79px;}
a{color:#333;}
/*客户端*/
.u-app:hover .box-u{display: block;}
.box-u span{right: 60px;}
.box-u{display: none;width: 302px;height: 206px;background-color: white;position: absolute;right: 10px;}
.box-u h3{ font-size: 14px;
color: #333;
letter-spacing: 0;
line-height: 15px;}
.box-u span{font-size: 12px;
color: #999;
letter-spacing: 0;
line-height: 14px;}
.g-yk,.g-app{
margin-top: 10px;
width: 150px;
height: 148px;
float: left;
display: inline-block;
}
.g-app img{width: 53%}
.g-yk img{ margin-top: 2px;
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;}
.g-tv{display: block;
margin-top: 156px;
position: relative;
height: 56px;
}
.g-tv h3{display: inline-block;}
.g-tv i{display: inline-block;width: 20px;
height: 20px;
position: relative;top:6px;
background:url(../../static/images/TB1sMxIqHSYBuNjSspiXXXNzpXa-300-1200.png) -141px -131px;}
/*剧集下面的块*/
/**/
.u-login .box1{width: 264px;height: 119px;background-color: white;
position: absolute;top:70px;right: -10px;display:none;
}
.u-login .box1 p{width: 200px;position: relative;top:30px;margin:0 auto;font-family: PingFangSC-Medium;
font-size: 15px;
color: #999;}
.u-login .box1 button{position: relative;top:40px;margin:0 auto;background: #148aff;
border-radius: 100px;
width: 224px;
height: 36px;
font-family: PingFangSC-Semibold;
font-size: 14px;
color: #fff;
line-height: 36px;
margin-bottom: 20px;
border: 1px solid #3383da;
}
.u-login:hover .box1{display: block;}
/*小箭头*/
.arrow{
width: 0px;height: 7px;border:8px solid;
border-color: transparent transparent #fff transparent;
position: absolute;top:-21px;right: 30px;
}
/*主体css*/
.content{width: 1202px;height: 384px;margin: 0 auto;/*background: #ccc;*/margin-top: 10px;margin-bottom: 28px;}
.h h1{display: inline-block;font-size: 26px;
font-weight: 200;}
.h h2{display: inline-block;font-weight: 26px;font-weight: 200;line-height: 26px;float: left;}
.h{width: 1202px;margin-bottom: 20px;line-height: 26px;}
.h span{float: right;font-size: 12px;color: #666;line-height: 26px}
.ultitle{display: inline-block;margin:0px 10px 0 10px ;}
.ultitle li{float: left;display: inline-block;line-height: 26px;}
.ultitle a{font-size: 16px;color: #666;margin: 0 10px ;line-height: 28px}
.pack{width:192px;height:338px;/*background-color: lightblue;*/float: left;margin-left: 10px}
.pack1{margin-left:0px;width:192px;height:288px;background-color: lightblue;float: left;}
.thumb{width:192px;height:288px;background-color: lightblue;}
.thumb img{width: 100%;}
.title span{font-size: 14px;color: #333;margin-top: 8px;}
.subtitle{font-size: 12px; color: #999;}
.left{width: 394px;height: 344px;/*background-color: #ccc;*/display: block;float: left;}
.right{width: 808px;height: 172px;float: left;background-color: #ccc;}
.quan a{font-size: 14px;color: #333;margin-top: 8px;}
.quan span{ font-size: 12px;color: #999;}
/*底部*/
.footer{width: 1202px;height: 400px;margin: 0 auto;background: #ccc;}
.close{background: url(../../static/images/TB1sMxIqHSYBuNjSspiXXXNzpXa-300-1200.png) no-repeat 0 -235px;float: right;display: inline-block;width: 25px;height: 25px;cursor: pointer;}
.close-center{width: 1202px;height: 60px;padding: 10px 0 0;margin: 0 auto;}
.g-header-container{ width: 100%;height: 70px; content: '';display: block; width: 100%;/*z-index: 999;*/top: 0;
/*height: 30%;*/background: linear-gradient(to top,rgba(0,0,0,0),rgba(0,0,0,0.2));}
.g-header { width: 100%;height: 420px;background: url(../../static/images/65f157e3fe6ef53e54ac1f8ed5459665.jpg) ;background-repeat: no-repeat;background-size: 100%;
/*position: absolute;*/z-index: 5px;}
/*.box{width: 100%;height: 70px;}*/
/*导航条*/
.g-header-container{margin: auto;height: 70px;width: 1202px;}
.box{width: 1202px;position: fixed; margin: auto;height: 70px;z-index: 1290;}
.yk-logo a { display: block;height: 24px;background: url(https://img.alicdn.com/tfs/TB1dw0vqHGYBuNjy0FoXXciBFXa-120-24.png) center no-repeat;}
.yk-logo{ float: left;height: 24px;width: 120px;margin: 23px 30px 23px 0;}
.g-head-center{visibility: hidden;width: 240px;float: left;height: 38px;margin: 16px 20px 0 0;}
.sreach{ width: 290px;float: left;height: 22px;padding: 8px 12px 8px 18px;outline: 0 none; color: #fff;font-size: 14px;line-height: 22px;background: rgba(255,255,255,0.3);border: 0 none;
border-top-left-radius: 19px;
border-bottom-left-radius: 19px;}
.bt{position: absolute;width: 80px;height: 38px;line-height: 38px;top: 0;right: -1px;padding: 0;color: #fff;
text-align: center;font-size: 13px;font-family: "\5FAE\8F6F\96C5\9ED1";background: #1f82fc;
outline: 0;cursor: pointer;border: 0 none;border-top-right-radius: 19px;border-bottom-right-radius: 19px;}
.g-so{float: left;width: 370px;height: 38px;margin: 16px auto;position: relative;}
.g-ucenter{float: right;height: 70px;}
.ico-vip{display: block;width: 28px;height: 20px;background: url(../../static/images/TB1sMxIqHSYBuNjSspiXXXNzpXa-300-1200.png) no-repeat;background-position: -32px -164px;margin: 0 auto 2px;}
.ico-sub{display: block;width: 20px;height: 20px;background: url(../../static/images/TB1sMxIqHSYBuNjSspiXXXNzpXa-300-1200.png) no-repeat;background-position: 0 -40px;margin: 0 auto 2px;}
.ico-urecord{display: block;width: 20px;height: 20px;background: url(../../static/images/TB1sMxIqHSYBuNjSspiXXXNzpXa-300-1200.png) no-repeat; background-position: 0 -60px;margin: 0 auto 2px;}
.ico-upload{display: block;width: 20px;height: 20px;background: url(../../static/images/TB1sMxIqHSYBuNjSspiXXXNzpXa-300-1200.png) no-repeat; background-position: 0 -100px;margin: 0 auto 2px;}
.ico-app{display: block;width: 20px;height: 20px;background: url(../../static/images/TB1sMxIqHSYBuNjSspiXXXNzpXa-300-1200.png) no-repeat;background-position: 0 -80px;margin: 0 auto 2px;}
.handle{margin: 15px 0;}
.handle a{color: #fff;font-size: 12px;}
.u-vip ,.u-sub,.u-record,.u-upload,.u-app,.u-login{float: left;width: 40px;height: 70px;text-align: center;margin-right: 10px;}
.u-login img{border-radius: 100%; width: 40px;height: 40px;}
.login-before { height: 50px;margin: 15px 0; }
.mod{}
.focus-nav{width: 220px;
border-radius: 10px;
position: relative;
right:120px;
top: 10px;
float: right;
text-align: center;
background: rgba(32,32,32,0.65);
}
.focus-nav span{position: relative;
z-index: 5;
display: block;
width: 100%;
color: #FFF;
letter-spacing: 0;
font-size: 14px;
line-height: 44px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
opacity: .6;
filter: alpha(opacity=60);
box-sizing: border-box;}
.focus-nav span{
border-bottom:#dfe2e6 1px solid;
width: 200px;
margin: 0 auto;
top:-2px;
}
.bg{width: 100%;
height: 420px;
background: url(../../static/images/tb1a4oaolth8kjjy0fixxcrsxxa-1664-520.png);
background-size: 100%;
position: absolute;
}
.mod{width: 1202px;height: 80px;margin: 0 auto;/*background: #ccc;*/margin-top: 20px}
.nav-guide .nav-group{
position: relative;
float: left;
margin-right: 23px;
border-right: 2px solid #f3f3f3;
height: 48px;
}
.nav-guide .channel{
display: inline-block;
position: relative;
width: 52px;
text-align: left;
margin-bottom: 9px;
}
.nav-group.nav-group-icon a,.nav-guide .channel a{font-size: 14px; color: #666;}
.nav-group.nav-group-icon{margin: 0; border-right:none;
}
a{}
.nav-group.nav-group-icon span{
display: inline-block;
margin-left: 8px;
width: 75px;
height: 69px;
text-align: center;
}
.i{background: url(../../static/images/TB1sMxIqHSYBuNjSspiXXXNzpXa-300-1200.png);background-position: -64px -129px;width: 22px;height: 22px;display: block;margin: 0 auto;margin-bottom: 7px;}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿优酷</title>
<style type="text/css">
</style>
<link rel="stylesheet" href="static/css/public.css">
</head>
<body>
<div style="background: RGB(179,7,2);">
<div>
<div>
<span id="festivalClose"></span>
</div>
</div>
</div>
<!-- 头部 -->
<div>
<div></div>
<div>
<div>
<div>
<a href="#" > </a>
</div>
<div></div>
<div style="">
<form action="">
<input type="text">
<button>搜全网</button>
</form>
</div>
<div>
<div>
<div>
<a href="#" target="_blank" style="color:#ffce07;"><i></i>VIP</a>
</div>
</div>
<div>
<div>
<a href="#" target="_blank" ><i></i>订阅</a>
</div>
</div>
<div>
<div>
<a href="#" target="_blank" ><i></i>记录</a>
</div>
<div>
<span></span>
<div style="border-bottom: 1px solid #ebebeb;height: 66px;width: 266px;margin: 0 auto;margin-bottom: 20px;">
<button>登录</button> 同步各端记录
</div>
<div>
<i></i>
<p >您暂时还没有观看记录呦～</p>
</div>
</div>
</div>
<div>
<div>
<a href="#" target="_blank" ><i></i>上传</a>
</div>
<div>
<span></span>
<div>
<ul>
<li> <a href="" target="_blank"> <em></em> 上传视频 </a> </li>
<li> <a href="" target="_blank"> <em></em> 视频管理 </a> </li>
<li> <a href="" target="_blank"> <em></em> 我的自频道 </a> </li>
<li> <a href="" target="_blank"> <em></em> 数据分析 </a> </li>
</ul>
</div>
<div>
<a href="" >立即下载</a> 优酷PC客户端,看片免广告！
</div>
</div>
</div>
<div>
<div>
<a href="#" target="_blank" ><i></i>客户端</a>
</div>
<div>
<span></span>
<div>
<a >
<img src="static/picture/16abefc63daf47ecb5e7a1389d89eaf5.gif" alt="">
<h3>优酷客户端</h3>
<span>快速·稳定的观看体验</span>
</a>
<a>
<img src="static/picture/ecc8534b65eb4adfac989ac9b1e3c0e7.gif" alt="">
<h3>优酷移动APP</h3>
<span>全网独播尽在手中</span>
</a>
</div>
<a>
<i ></i>
<h3>优酷TV版</h3>
<span>CIBN酷喵影视智能电视App</span>
</a>
</div>
</div>
<div>
<div class="login-before dropdown">
<img src="static/picture/TB1YjjBiQzoK1RjSZFlXXai4VXa-80-80.png" alt="">
</div>
<div>
<span></span>
<p>登录使用更多功能</p>
<button>登录/注册</button>
</div>
</div>
</div>
</div>
</div>
<div>
<ul>
<li> <a href=""><span>乡村爱情11:出事啦！宋晓峰遭暴打</span></a></li>
<li> <a href=""><span>乡村爱情11:出事啦！宋晓峰遭暴打</span></a></li>
<li> <a href=""><span>乡村爱情11:出事啦！宋晓峰遭暴打</span></a></li>
<li> <a href=""><span>乡村爱情11:出事啦！宋晓峰遭暴打</span></a></li>
<li> <a href=""><span>乡村爱情11:出事啦！宋晓峰遭暴打</span></a></li>
<li> <a href=""><span>乡村爱情11:出事啦！宋晓峰遭暴打</span></a></li>
</ul>
</div>
</div>
</div>
<div>
<div>
<ul class="nav-guide clearfix">
<li>
<span>
<a href="" >剧集</a>
</span>
<span>
<a href="" >电影</a>
</span>
<span>
<a href="" >综艺</a>
</span>
<br>
<span>
<a href="" >动漫</a>
</span>
<span>
<a href="" >娱乐</a>
</span>
<span>
<a href="" >生活</a>
</span>
</li>
<li>
<span>
<a href="//child.youku.com">少儿</a>
</span>
<span>
<a href="#" >来疯</a>
</span>
<span>
<a href="" >音乐</a>
</span>
<br>
<span>
<a href="#" >搞笑</a>
</span>
<span>
<a href="#" >直播</a>
</span>
<span>
<a href="#" >片库</a>
</span>
</li>
<li>
<span>
<a href="" >纪实</a>
</span>
<span>
<a href="" > 公益</a>
</span>
<span>
<a href="" > 体育</a>
</span>
<br>
<span>
<a href="" >汽车</a>
</span>
<span>
<a href="" > 财经</a>
</span>
<span>
<a href="" >游戏</a>
</span>
</li>
<li>
<span>
<a href="" >文化</a>
</span>
<span>
<a href="" >旅游</a>
</span>
<span>
<a href="" >时尚</a>
</span>
<br>
<span>
<a href="" >亲子</a>
</span>
<span>
<a href="" >教育</a>
</span>
<span>
<a href="" >游戏</a>
</span>
</li>
<li>
<span>
<a href="" >资讯</a>
</span>
<br>
<span>
<a href="" >VR</a>
</span>
</li>
<li class="nav-group nav-group-icon">
<span class="channel-icon channel-list">
<a class="" href=""><i style=""></i>优酷片库</a>
</span>
<span class="channel-icon colx channel-index">
<a class="" href="" ><i style="background-position: -38px -129px; "></i>指数排行</a>
</span>
<span class="channel-icon colx channel-dayu">
<a class="" href="" ><i style="background-position: -120px -129px;"></i>大鱼号精选</a>
</span>
<span class="channel-icon channel-download" style="width: 64px;height: 49px;">
<a class="" href="" ><i style="background-position: -90px -129px;"></i>下载应用</a>
</span>
</li>
</ul>
</div>
</div>
<!-- 主体 -->
<div>
<div>
<h1>正在热播</h1>
<a href=""><span>天下无诈</span></a>
</div>
<div>
<div>
<div>
<a href="#">
<img src="static/images/be231143e40d5592bc82e3230699265d.jpg" alt="" ></a>
</div>
<ul class="">
<li><a href=""><span>***的两会时间</span></a></li>
<li><span>与人民在一起</span></li>
</ul>
</div>
<div>
<div>
<a href=""><img src="static/images/72b02b0c9204d4e44b185291dda586f7.jpg" alt="">
</a></div>
<ul class="">
<li><a href=""><span>中国的人底气</span></a></li>
<li><span>是什么让他们能够成功脱贫</span></li>
</ul>
</div>
<div>
<div>
<a href=""><img src="static/images/050E00005BBD6765859B5D699901BE17.jpg" alt="">
</a></div>
<ul>
<li><a href=""><span >***的两会时间</span></a></li>
<li><span>与人民在一起</span></li>
</ul>
</div>
<div>
<div>
<a href=""><img src="static/images/050E00005C6E7419859B5E9DF902EBB8.jpg" alt="">
</a></div>
<ul class="">
<li><a href=""><span>***的两会时间</span></a></li>
<li><span>与人民在一起</span></li>
</ul>
</div>
<div>
<div>
<a href="#">
<img src="static/images/050E00005C7E2C5DADB185553A06D2F0.jpg" alt=""></a>
</div>
<ul class="">
<li><a href="#"><span>***的两会时间</span></a></li>
<li><span>与人民在一起</span></li>
</ul>
</div>
<div>
<div>
<a href=""><img src="static/images/050E00005B34049E08B80D567A0E23CE.jpg" alt="">
</a></div>
<ul class="">
<li><a href=""><span>***的两会时间</span></a></li>
<li><span>与人民在一起</span></li>
</ul>
</div>
</div>
</div>
<div style="height: 390px;margin-top: 0px;margin-bottom: 0px;">
<div>
<h2>剧集></h2>
<ul>
<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>
<div>
<a href=""><img src="static/images/c35a31b6616dcd7c4b26f2c63c979784.jpg" alt="" style="width: 100%" style="position: absolute;"><i style="float: right;position: relative;top:-30px;color: white;">24全集</i></a>
<ul>
<li><a href="">大帅哥</a></li>
<li><span>一代军阀的成长史</span></li>
</ul>
</div>
<div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
<div>
<div></div>
</div>
</div>
<div>
</div>
</div>
</div>
<div>
<div>
<h1>正在热播</h1>
<a href=""><span>天下无诈</span></a>
</div>
<div>
<div>
<div>
<a href="#">
<img src="static/images/be231143e40d5592bc82e3230699265d.jpg" alt="" ></a>
</div>
<ul class="">
<li><a href=""><span>***的两会时间</span></a></li>
<li><span>与人民在一起</span></li>
</ul>
</div>
<div>
<div>
<a href=""><img src="static/images/72b02b0c9204d4e44b185291dda586f7.jpg" alt="">
</a></div>
<ul class="">
<li><a href=""><span>中国的人底气</span></a></li>
<li><span>是什么让他们能够成功脱贫</span></li>
</ul>
</div>
<div>
<div>
<a href=""><img src="static/images/050E00005BBD6765859B5D699901BE17.jpg" alt="">
</a></div>
<ul>
<li><a href=""><span >***的两会时间</span></a></li>
<li><span>与人民在一起</span></li>
</ul>
</div>
<div>
<div>
<a href=""><img src="static/images/050E00005C6E7419859B5E9DF902EBB8.jpg" alt="">
</a></div>
<ul class="">
<li><a href=""><span>***的两会时间</span></a></li>
<li><span>与人民在一起</span></li>
</ul>
</div>
<div>
<div>
<a href="#">
<img src="static/images/050E00005C7E2C5DADB185553A06D2F0.jpg" alt=""></a>
</div>
<ul class="">
<li><a href="#"><span>***的两会时间</span></a></li>
<li><span>与人民在一起</span></li>
</ul>
</div>
<div>
<div>
<a href=""><img src="static/images/050E00005B34049E08B80D567A0E23CE.jpg" alt="">
</a></div>
<ul class="">
<li><a href=""><span>***的两会时间</span></a></li>
<li><span>与人民在一起</span></li>
</ul>
</div>
</div>
</div>
<!-- 底部 -->
<div>3</div>
</body>
<!-- 控制头部的x -->
<script>
var sp=document.getElementsByTagName('span')[0];
var div=document.getElementsByTagName('div')[1];
// console.log(sp);
// console.log(div);
sp.onclick=function() {
div.style.display='none';
}
</script>
</html>总结：
1：html里面主要的 盒模型的理解；定位的理解；
2：css写的时候要考虑复用性；
3：js 原生的js先获取标签再去操作它；