摘要：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>優(yōu)酷-這世界很酷！</title> <style type="text/css" media="screen"> *{ margin:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>優(yōu)酷-這世界很酷！</title>
<style type="text/css" media="screen">
*{
margin: 0px;
padding: 0px;
}
a {color:#000;text-decoration: none;}
li {list-style: none; float: left;} /*取消li列表樣式 并且向左浮動(dòng) 浮動(dòng)后自帶區(qū)塊屬性*/
li img:hover {box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);} /*偽類鼠標(biāo)移到圖片的陰影效果 X y 模糊度 外延值 顏色*/
.hot_tv img:hover {box-shadow: 1px 2px 5px 1px rgba(0,0,0,0.2);}
small {color: #B5B5B5;} /*設(shè)置文字顏色*/
.hotMenu li a:hover {text-decoration: none;color:#2692FF;} /*設(shè)置鼠標(biāo)移上去的顏色，沒有下劃線*/
.hotMenu li a:hover:after {content: "";background:#2692FF;border-radius: 10px;display: block;width: 20px;height: 3px;margin: 0px auto; }
/* 這種并列寫法需要一個(gè):hover來(lái)激活， 單獨(dú)用E:after 時(shí)不需要激活 在……之后加上content內(nèi)容（content參數(shù)必須要的） 畫圓角 轉(zhuǎn)換成區(qū)塊 使他能用寬高參數(shù)，然后居中顯示*/
.mr {margin-right:10px;}
.mrt{margin-top: 10px;}
.clear {clear:both;} /*清楚兩邊的浮動(dòng)*/
.l {float: left;} /* 向左浮動(dòng)*/
.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;
}*/
</style>
</head>
<body>
<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>瞰中國(guó)：寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li>
<li class="mr"><a href=""><img src="images/b.jpg" alt="hot_tv"><br><span>瞰中國(guó)：寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li>
<li class="mr"><a href=""><img src="images/c.jpg" alt="hot_tv"><br><span>瞰中國(guó)：寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li>
<li class="mr"><a href=""><img src="images/d.jpg" alt="hot_tv"><br><span>瞰中國(guó)：寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li>
<li class="mr"><a href=""><img src="images/e.jpg" alt="hot_tv"><br><span>瞰中國(guó)：寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li>
<li class="mr"><a href=""><img src="images/f.jpg" alt="hot_tv"><br><span>瞰中國(guó)：寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li>
<li class=""><a href=""><img src="images/g.jpg" alt="hot_tv"><br><span>白蛇：緣起</span></a><br><small>白蛇前世愛情凄美動(dòng)人</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="">港臺(tái)劇</a></li>
</ul>
</div>
<div class="clear">
<div class="tv_show">
<div class="hot_tv l mr">
<a href=""><img src="images/tv.jpg" alt=""><br><span>瞰中國(guó)：寧夏</span><br><small>低調(diào)的寧夏 美了四季</small></a>
</div>
<div class="hot_tv_UL">
<ul>
<li class="mr"><a href=""><img src="images/tv1.jpg" alt=""><br><span>瞰中國(guó)：寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li>
<li class="mr"><a href=""><img src="images/tv2.jpg" alt=""><br><span>瞰中國(guó)：寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li>
<li class="mr"><a href=""><img src="images/tv3.jpg" alt=""><br><span>瞰中國(guó)：寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li>
<li class=""><a href=""><img src="images/tv4.jpg" alt=""><br><span>瞰中國(guó)：寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</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>瞰中國(guó)：寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li>
<li class="mr mrt"><a href=""><img src="images/tv1.jpg" alt=""><br><span>瞰中國(guó)：寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li>
<li class="mr mrt"><a href=""><img src="images/tv1.jpg" alt=""><br><span>瞰中國(guó)：寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li>
<li class=" mrt"><a href=""><img src="images/tv1.jpg" alt=""><br><span>瞰中國(guó)：寧夏</span></a><br><small>低調(diào)的寧夏 美了四季</small></li>
<!-- <li class="mr more"><a href=""><b>更多>></b></li> -->
</ul>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
批改老師：韋小寶批改時(shí)間：2019-03-14 17:05:32
老師總結(jié)：寫的很不錯(cuò) 基本上寫起來(lái)應(yīng)該沒有什么太大的難度吧 導(dǎo)航基本上都是會(huì)用li來(lái)做的 方便控制每塊的寬高