收藏
批改状态：未批改
老师批语：
本节课主要是练习编写优酷头部导航和分类，熟练浮动和定位的使用，在布局前考虑清楚每个块的划分，把相同的功能和模块提取出来，即方便使用又能使代码简介。如果在同一个层级同一个标签写了class样式，那么要区分class，写法为 标签.class名
以下为本次练习完后的代码：
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;
}
.ml{
margin-left: 20px;
}
.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;
position: relative;
}
.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;
outline: none;
background: #B30702;
color: #FFEABF;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
}
.header_icon{
width: 20px;
height: 20px;
margin: 0 auto;
background:url("../images/icon_sprite.png");
}
.icon_vip{
width: 28px;
height: 22px;
margin: 0 auto;
background:url("../images/icon_sprite.png") -32px -164px;
}
.icon_sub{
background-position: -0px -40px;
}
.icon_record{
background-position: -0px -60px;
}
.icon_upload{
background-position: -0px -100px;
}
.icon_pc{
background-position: -0px -80px;
}
.menu_right a{
position:relative;
}
.menu_right a:hover .header_icon_span{
color: #1F82FC;
}
.menu_right a:hover .icon_sub{
background-position: -40px -40px;
}
.menu_right a:hover .icon_record{
background-position: -40px -60px;
}
.menu_right a:hover .icon_upload{
background-position: -40px -100px;
}
.menu_right a:hover .icon_pc{
background-position: -40px -80px;
}
.user_icon_li:hover .user_under_pop{
display: block;
}
.user_icon{
width: 40px;
height: 40px;
}
.menu_right{
margin-top: 16px;
}
.menu_right li{
width: 40px;
margin-right: 10px;
text-align: center;
}
.menu_right span{
font-size: 12px;
color: #E8E9EC;
}
/*登录下拉框*/
.user_under_pop{
display: none;
width: 260px;
height: 120px;
background: white;
border-radius: 2px;
position: absolute;top:70px;right:70px;z-index: 1001;
}
.arrow{
width: 0px;
height: 7px;
border: 7px solid ;
border-color: transparent transparent #fff transparent ;/*上右下左*/
position: absolute;top: -20px;right: 33px;
}
.user_under_pop p{
line-height: 60px;
color: #929292;
font-size: 16px;
}
.user_under_pop button{
background: #2798ff;
color: #fff;
border: none;
height: 36px;width: 220px;
border-radius: 30px;
}
/*轮播下 网站分类 */
.head_r_menu{
width: 190px;
padding: 0px 15px;
background: rgba(0,0,0,0.5);
position: absolute;top: 100px;right: 10px;
z-index:999;
}
.head_r_menu a{
display: block;
line-height: 25px;
font-size: 14px;
color: rgba(254,254,254,0.6);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 10px 0;
border-bottom: 1px rgba(147,147,147,0.4) solid;
}
.head_r_menu a:hover span{
display: block;
color: #fff;
font-size: 20px;
}
.head_r_menu a:hover{
color: #fff;
}
.voltage li{
width: 230px;
font-size: 15px;
line-height: 30px;
float: left;
}
.voltage a{
padding-right: 40px;
color: #666666;
}
.b_r{
height: 45px;
border-right: 2px #F3F3F3 solid;
display: inline-block;
float: left;
margin-top: 7px;
margin-right: 45px;
}
li.hot{
width: 100px;
text-align: center;
padding: 0 10px;
}
.hot_icon{
display: inline-block;
width: 20px;
height: 20px;
background:url("../images/icon_sprite.png");
}
.hot_icon_1{
background-position: -64px -129px;
}
.hot_icon_2{
background-position: -38px -129px;
}
.hot_icon_3{
background-position: -120px -129px;
}
.hot_icon_4{
background-position: -92px -129px;
}
.hot a:hover span{
color: #1F82FC;
}点击 "运行实例" 按钮查看在线实例
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 class="head_r_menu r"> <a href=""><span>2019两会闭幕 :</span>全程回顾解读热点</a> <a href=""><span>以团之名 :</span>6进3公演神仙舞台</a> <a href="" ><span>都挺好:</span>明玉报复抄解气!</a> <a href=""><span>2019两会闭幕 :</span>全程回顾解读热点</a> <a href=""><span>2019两会闭幕 :</span>全程回顾解读热点</a> <a href="" style="color: white"><span style=" display: block;color: #fff;font-size: 20px;">这!就是原则 :</span>全程回顾解读热点</a> <a href="" style="border: none;"><span>重耳传奇 : :</span>王龙华王艳母子温馨团聚</a> </div> <div class="clear"></div> </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"></div> <span style="color: #FF8500">VIP</span> </a> </li> <li class="l "> <a href="" > <div class="icon_sub header_icon"></div> <span class="header_icon_span">订阅</span> </a> </li> <li class="l " > <a href=""> <div class="icon_record header_icon"></div> <span class="header_icon_span">记录</span> </a> </li> <li class="l "> <a href="" > <div class="icon_upload header_icon"></div> <span class="header_icon_span">上传</span> </a> </li> <li class="l "> <a href="" > <div class="icon_pc header_icon"></div> <span class="header_icon_span">客户端</span> </a> </li> <li class="l ml user_icon_li"> <a href=""> <img class="user_icon" src="static/images/user_icon.png"></a> <div class="user_under_pop"> <span class="arrow"></span> <p class="">登录使用更多功能</p> <button>登录/注册</button> </div> </li> <div class="clear"></div> </ul> </div> <div class="clear"></div> </div> </div> </div> <!-- 开始顶部搜索导航 --> <div class="contents"> <ul class="content voltage"> <li> <a href="">剧集</a> <a href="">电影</a> <a href="">综艺</a> <a href="">动漫</a> <a href="">娱乐</a> <a href="">生活</a> </li> <span class="b_r"></span> <li> <a href="">剧集</a> <a href="">电影</a> <a href="">综艺</a> <a href="">动漫</a> <a href="">娱乐</a> <a href="">生活</a> </li> <span class="b_r"></span> <li> <a href="">剧集</a> <a href="">电影</a> <a href="">综艺</a> <a href="">动漫</a> <a href="">娱乐</a> <a href="">生活</a> </li> <span class="b_r"></span> <li> <a href="">剧集</a> <a href="">电影</a> <a href="">综艺</a> <a href="">动漫</a> <a href="">娱乐</a> <a href="">生活</a> </li> <span class="b_r"></span> <li style="width:80px;"> <a href="">资讯</a> <a href="">VR</a> </li> <span class="b_r"></span> <li class="hot"> <a href=""> <div class="hot_icon hot_icon_1"></div><br> <span>优酷片库</span> </a> </li> <li class="hot"> <a href=""> <div class="hot_icon hot_icon_2"></div><br> <span>指数排行</span> </a> </li> <li class="hot"> <a href=""> <div class="hot_icon hot_icon_3"></div><br> <span>大鱼号精选</span> </a> </li> <li class="hot"> <a href=""> <div class="hot_icon hot_icon_4"></div><br> <span>下载应用</span> </a> </li> </ul> <div class="clear"></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>
点击 "运行实例" 按钮查看在线实例
结果截图如下：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
