通用样式：*{ }
text-decoration: none;/*去掉下划线*/
cursor: pointer;/*鼠标移动变形状*/
效果图
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./css/style.css" />
<title></title>
</head>
<body>
<div class="header">
<div class="top">
<div class="wz">
<div class="l">
<span>
<a href="#">设为首页</a>
</span>
<span>
<a href="#">收藏本站</a>
</span>
</div>
<div class="r">
<span>
<a href="#">2021/7/23</a>
</span>
<span class="m">
<a href="#">多云 22℃ ~ 34℃</a>
</span>
</div>
</div>
</div>
<div class="wz">
<div class="logos wz">
<div class="logo l">
<h1><a href="#"><img src="img/logo.jpg" alt="麦子学院"/></a></h1>
</div>
<div class="sousuo l">
<form action="index.html" method="get">
<table>
<tr>
<td class="s_l l"></td>
<td class="s_c l">
<input type="text" name="text" id="s_c_l"/>
</td>
<td class="s_r l">
<button type="submit" name="submit">搜索</button>
</td>
</tr>
</table>
</form>
</div>
<div class="dianhua r">
<span>热线电话：8208208820</span>
</div>
</div>
</div>
<div class="nav">
<div class="wz">
<ul>
<li>
<a href="https://www.baidu.com">网站首页</a>
</li>
<li>
<a href="https://www.baidu.com">富强民主</a>
</li>
<li>
<a href="https://www.baidu.com">文明和谐</a>
</li>
<li>
<a href="https://www.baidu.com">自由平等</a>
</li>
<li>
<a href="https://www.baidu.com">公正法治</a>
</li>
<li>
<a href="https://www.baidu.com">爱国敬业</a>
</li>
<li>
<a href="https://www.baidu.com">诚信友善</a>
</li>
<li>
<a href="https://www.baidu.com">滴滴滴滴</a>
</li>
</ul>
</div>
</div>
</div>
<div class="center">
<div class="wz">
<div class="ad">
</div>
<div class="hzw l">
<div class="tit">
<a href="https://www.baidu.com/s?&wd=%E6%B5%B7%E8%B4%BC%E7%8E%8B&ie=utf-8&ie=utf-8"><h1>海贼王</h1></a>
<span><a href="https://www.baidu.com/s?&wd=%E6%B5%B7%E8%B4%BC%E7%8E%8B&ie=utf-8&ie=utf-8">More</a></span>
</div>
<div class="in">
<img src="img/hzw.jpg" >
<p>
《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品，
于1997年7月22日在集英社《周刊少年Jump》开始连载。
改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。
2012年5月11日，《航海王》获得第41回日本漫画家协会赏 。
本作被吉尼斯世界纪录官方认证为“世界上发行量最高的单一作者创作的系列漫画” 。
2017年7月21日，日本纪念日协会通过认证，将每年的7月22日设立为“ONE PIECE纪念日”.
</p>
</div>
</div>
<div class="hyrz l">
<div class="tit">
<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E7%81%AB%E5%BD%B1%E5%BF%8D%E8%80%85&oq=%25E6%25B5%25B7%25E8%25B4%25BC%25E7%258E%258B&rsv_pq=f89904a000044ac0&rsv_t=15d2j24Sgxzh1dpRTFpC0Actsbhz33otdoTLHVSVvDWzbaf9STnYgYLmN2M&rqlang=cn&rsv_dl=tb&rsv_enter=1&rsv_sug3=13&rsv_sug1=9&rsv_sug7=100&rsv_sug2=0&rsv_btype=t&inputT=3866&rsv_sug4=4461"><h1>火影忍者</h1></a>
<span><a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E7%81%AB%E5%BD%B1%E5%BF%8D%E8%80%85&oq=%25E6%25B5%25B7%25E8%25B4%25BC%25E7%258E%258B&rsv_pq=f89904a000044ac0&rsv_t=15d2j24Sgxzh1dpRTFpC0Actsbhz33otdoTLHVSVvDWzbaf9STnYgYLmN2M&rqlang=cn&rsv_dl=tb&rsv_enter=1&rsv_sug3=13&rsv_sug1=9&rsv_sug7=100&rsv_sug2=0&rsv_btype=t&inputT=3866&rsv_sug4=4461">More</a></span>
</div>
<div class="in">
<img src="img/hyrz.jpg" />
<p>
电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，
2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；
第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，
共500话；累计全720话。故事成功地将原本隐藏在黑暗中，
用世界上最强大的毅力和最艰辛的努力去做最密不可宣和隐讳残酷的事情的忍者，
描绘成了太阳下最值得骄傲最光明无限的职业。
</p>
</div>
</div>
<div class="wonderful l">
<div class="tit">
<a href="#"><h1>更多精彩推荐</h1></a>
<span><a href="#">More</a></span>
</div>
<div class="libiao">
<ul>
<li class="a">
<a href="https://www.baidu.com/sf/vsearch?wd=%E5%8A%A8%E6%BC%AB%E7%94%B5%E5%BD%B1&pd=video&tn=vsearch&lid=debf79e600074c83&ie=utf-8&rsv_spt=4&rsv_bp=1&f=8&oq=%25E6%25B5%25B7%25E8%25B4%25BC%25E7%258E%258B&rsv_pq=debf79e600074c83&rsv_t=f870u8iJkL2iXRhGHfZuSO0TZtDprj%252B8dkUVgY%252B%252FaP8CBuaI5IkpKFPcu1PliA"><img src="img/hf.jpg"/></a>
</li>
<li class="b">
<a href="https://www.baidu.com/sf/vsearch?wd=%E5%8A%A8%E6%BC%AB%E7%94%B5%E5%BD%B1&pd=video&tn=vsearch&lid=debf79e600074c83&ie=utf-8&rsv_spt=4&rsv_bp=1&f=8&oq=%25E6%25B5%25B7%25E8%25B4%25BC%25E7%258E%258B&rsv_pq=debf79e600074c83&rsv_t=f870u8iJkL2iXRhGHfZuSO0TZtDprj%252B8dkUVgY%252B%252FaP8CBuaI5IkpKFPcu1PliA"><h3>更多精彩动画等你观看</h3></a>
</li>
</div>
<!--
<li>
<a href="#"><h3>猫和老鼠</h3></a>
</li>
<li>
<a href="#"><h3>海绵宝宝</h3></a>
</li>
<li>
<a href="#"><h3>名侦探柯南</h3></a>
</li>
<li>
<a href="#"><h3>犬夜叉</h3></a>
</li>
<li>
<a href="#"><h3>哆啦A梦</h3></a>
</li>
</ul>
</div>
</div>
</div>
</div>
-->
<div class="wz">
<div class="t">
<ul>
<li><a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E7%8C%AB%E5%92%8C%E8%80%81%E9%BC%A0&oq=%25E6%25B5%25B7%25E7%25BB%25B5%25E5%25AE%259D%25E5%25AE%259D&rsv_pq=e823d14d0006f1c6&rsv_t=625fMXpppP8YiRqnI57WN75H2DH0jstIhL70GFENWqfzeVBPg63I%2FTcXg9c&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=11&rsv_sug1=9&rsv_sug7=100&rsv_sug2=0&rsv_btype=t&inputT=2815&rsv_sug4=3268"><img src="img/m.jpg"/><span>猫和老鼠</span></a></li>
<li><a href="https://www.baidu.com/s?&wd=%E6%B5%B7%E7%BB%B5%E5%AE%9D%E5%AE%9D&ie=utf-8&ie=utf-8"><img src="img/h.jpg"/><span>海绵宝宝</span></a></li>
<li><a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E5%BC%80%E5%BF%83%E8%B6%85%E4%BA%BA&oq=%25E7%258C%25AB%25E5%2592%258C%25E8%2580%2581%25E9%25BC%25A0&rsv_pq=91654dcd00044407&rsv_t=9aeaS73hXRaiarzkvgSQ95t8Lv32AUuwvyi91BhC1%2B3rGrjzwVraD0YLjC0&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_btype=t&inputT=10223&rsv_sug3=40&rsv_sug1=40&rsv_sug7=101&rsv_sug2=0&rsv_sug4=10964"><img src="img/k.jpg"/><span>开心超人</span></a></li>
<li><a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E7%8A%AC%E5%A4%9C%E5%8F%89&oq=%25E5%25BC%2580%25E5%25BF%2583%25E8%25B6%2585%25E4%25BA%25BA&rsv_pq=b4edda4100114288&rsv_t=d0cdpcWQ5%2F64muUzdt9W%2BCLQrxMB8wCjCkahUyUuJM2DgF0b6TFooTkrLmo&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_btype=t&inputT=2749&rsv_sug3=51&rsv_sug1=46&rsv_sug7=100&rsv_sug2=0&rsv_sug4=3308"><img src="img/q.jpg"/><span>犬夜叉</span></a></li>
<li><a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=duolaameng&oq=%25E7%258A%25AC%25E5%25A4%259C%25E5%258F%2589&rsv_pq=b13afa3e0011b296&rsv_t=fa96%2BMtz3SdUSFt6RjkmPYCq%2BmP%2FW4gR2pox%2FMqtDofIQ8Xd7UpN0VWL6qg&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_btype=t&inputT=4131&rsv_sug3=62&rsv_sug1=53&rsv_sug7=100&rsv_sug2=0&rsv_sug4=4927"><img src="img/d.jpg"/><span>哆啦A梦</span></a></li>
</ul>
</div>
<div class="z">
<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E7%8C%AB%E5%92%8C%E8%80%81%E9%BC%A0&oq=%25E6%25B5%25B7%25E7%25BB%25B5%25E5%25AE%259D%25E5%25AE%259D&rsv_pq=e823d14d0006f1c6&rsv_t=625fMXpppP8YiRqnI57WN75H2DH0jstIhL70GFENWqfzeVBPg63I%2FTcXg9c&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=11&rsv_sug1=9&rsv_sug7=100&rsv_sug2=0&rsv_btype=t&inputT=2815&rsv_sug4=3268"><p class="p1">猫和老鼠</p></a>
<a href="https://www.baidu.com/s?&wd=%E6%B5%B7%E7%BB%B5%E5%AE%9D%E5%AE%9D&ie=utf-8&ie=utf-8"><p class="p2">海绵宝宝</p></a>
<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E5%BC%80%E5%BF%83%E8%B6%85%E4%BA%BA&oq=%25E7%258C%25AB%25E5%2592%258C%25E8%2580%2581%25E9%25BC%25A0&rsv_pq=91654dcd00044407&rsv_t=9aeaS73hXRaiarzkvgSQ95t8Lv32AUuwvyi91BhC1%2B3rGrjzwVraD0YLjC0&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_btype=t&inputT=10223&rsv_sug3=40&rsv_sug1=40&rsv_sug7=101&rsv_sug2=0&rsv_sug4=10964"><p class="p3">开心超人</p></a>
<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E7%8A%AC%E5%A4%9C%E5%8F%89&oq=%25E5%25BC%2580%25E5%25BF%2583%25E8%25B6%2585%25E4%25BA%25BA&rsv_pq=b4edda4100114288&rsv_t=d0cdpcWQ5%2F64muUzdt9W%2BCLQrxMB8wCjCkahUyUuJM2DgF0b6TFooTkrLmo&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_btype=t&inputT=2749&rsv_sug3=51&rsv_sug1=46&rsv_sug7=100&rsv_sug2=0&rsv_sug4=3308"><p class="p4">犬夜叉</p></a>
<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=duolaameng&oq=%25E7%258A%25AC%25E5%25A4%259C%25E5%258F%2589&rsv_pq=b13afa3e0011b296&rsv_t=fa96%2BMtz3SdUSFt6RjkmPYCq%2BmP%2FW4gR2pox%2FMqtDofIQ8Xd7UpN0VWL6qg&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_btype=t&inputT=4131&rsv_sug3=62&rsv_sug1=53&rsv_sug7=100&rsv_sug2=0&rsv_sug4=4927"><p class="p5">哆啦A梦</p></a>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
CSS
/*通用样式*/
*{
margin: 0;
padding: 0;
}
body{
font-family: 微软雅黑;
font: 14px/24px;
}
.m{
margin: 0;
}
.wz{
width: 960px;
margin: auto;/*居中显示*/
}
.l{
float: left;
}
.r{
float: right;
}
.c{
clear: both;
}
.top{
width:100%;
height: 24px;
background-color:#303030 ;
line-height: 24px;
color: #d8d8d8;
}
.top span{
margin-right: 15px;
}
.top span.m{
margin: 0;
}
.top a{
color: #d8d8d8;
text-decoration: none;/*去掉下划线*/
}
.top a:hover{
color: #f60;
}
/*logos*/
.logos{
height: 59px;
margin: 15px 0;
}
/*搜索*/
.sousuo{
width: 350px;
height: 41px;
margin-top: 9px;
margin-left: 20px;
}
.sousuo td{
height: 41px;
}
.s_l{
width: 6px;
background: url(../img/s_z.jpg) no-repeat;
}
.s_c{
width: 200px;
background: url(../img/s_c.jpg) repeat-x;
}
.s_r{
width: 78px;
background: url(../img/s_r.jpg) no-repeat;
}
.s_c input{
height: 38px;
width: 200px;
line-height: 35px;
border: none;
margin-top: 2px;
}
.s_r button{
width: 78px;
height: 41px;
/*background: none;去掉按钮背景*/
border: 1px solid;
cursor: pointer;/*鼠标移动变形状*/
margin-top: 0;
background-color: #D8D8D8;
font-size: 25px;
}
.dianhua span{
font-size: 26px;
color: darkred;
height: 59px;
line-height: 59px;
}
/*导航栏*/
.nav{
height: 39px;
width: 100%;
background:rgb(159,170,198) repeat-x;
}
.nav li{
list-style: none;
float: left;
line-height: 39px;
padding: 0 28px;
}
.nav li:hover{
background:gray repeat-x ;
}
.nav a{
color: #fff;
font-size:16px ;
text-decoration: none;
}
.ad{
height: 206px;
background: url(../img/ad.jpg) repeat-x;
}
/*center*/
.center{
height: 1000px;
}
.ad{
margin-bottom: 10px;
}
.tit{
padding-bottom: 8px;
border-bottom: 1px solid darkred;
position: relative;
margin-bottom: 10px;
}
.tit span{/*相对定位*/
position: absolute;
right: 0;
bottom: 0;
}
.tit a{
color: darkred;
text-decoration: none;
}
.hzw{
width: 450px;
height: 300px;
margin-right: 40px;
}
.hyrz{
width: 450px;
height: 300px;
}
.wonderful{
width: 100%;
height: 350px;
}
.in img{
float: left;
margin: 0 10px 0 0;/*上右下左*/
}
.in p{
color:#616161 ;;
/*text-indent: 24px;首行缩进*/
}
.libiao li{
list-style: none;
height: 24px;
line-height: 24px;
padding-left: 15px;
background: url(../img/list_bg.jpg) no-repeat center left;
margin-bottom: 5px;/*调节行间距*/
}
.libiao li.a{
background: none;
padding: 0;
height: 76px;
background: url(../img/hf.jpg) repeat-x;
}
.libiao li.b{
background: none;
padding: 10px 0 10px 0;
font-size: 20px;
}
/*.libiao h3{
font-weight: normal;
}*/
.libiao a{
color:#616161 ;
text-decoration: none;
}
.t{
height: 115px;
}
.t li{
position: relative;
list-style: none;
margin: 10px 40px 10px 0;
float: left;
overflow: hidden;
width: 151px;
height: 96px;
}
.t span{
display: none;/*鼠标放上去时显示*/
position: absolute;
left: 0;
bottom: 0;
font-size: 16px;
height: 24px;
width: 131px;
padding: 0 50px;
background:darkred;
color: #fff;
}
.t a:hover{
color: darkred;
}
.t li:hover span{
display: block;
}
.z p{
color: #FF6600;
margin: 0;
height: 30px;
padding: 0;
float: left;
}
.z p.p1{
margin-left: 40px;
}
.z p.p2{
margin-left: 130px;
}
.z p.p3{
margin-left: 130px;
}
.z p.p4{
margin-left: 130px;
}
.z p.p5{
padding-left: 136px;
}
.z a{
color: #FF6600;
text-decoration: none;
}
.z a:hover p{
color: black;
}
/*footer_top*/
.footer{
height: 223px;
width: 100%;
clear: both;
background:url(../img/footer.jpg) repeat-x;
}
