老师，请检查整体效果，是否需要优化或者有的地方使用标签不合理

来源：2-8 主体部分的底部

LongFace

2020-03-23 21:01:36

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页布局实例</title>
<style>
*{
	margin:0;
	padding:0;
}
body{
	font-family:"Helvetica";
}
img{
	display:block;
}
ul{
	list-style:none;
	overflow:hidden;
}
a{
	text-decoration:none;
	font-size:0px;
	color:black;
	cursor:pointer;
}
.nav{
	width:100%;
	height:80px;
	border-bottom:1px solid #E8E8E8;
	line-height:80px;
	overflow:hidden;
	min-width:740px;
	font-weight:bold;
}
.logo{
	width:200px;
	float:left;
	padding:0 0 0 100px;
}
.nav-li{
	float:right;
	margin-right:45px;
}
.nav-li ul li{
	float:left;
	padding:0 30px;
	cursor:pointer;
}
.nav-li ul li a{
	display:inline-block;
	font-size:14px;
	color:#626262;
}
.nav-li ul li a:hover{
	color:#343D47;
}
.main .banner{
	width:100%;
	height:600px;
	position: relative;
}
.main .banner .banner-img img{
	display:block;
	width:100%;
	height:600px;
}
.main .banner .mask{
	width:100%;
	height:600px;
	background-color:black;
	position: absolute;
	left:0;
	top:0;
	opacity:0.5;
}
.main .banner .top-title{
	width:500px;
	height:300px;
	position: absolute;
	margin:auto auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
.main .banner .top-title h1{
	font-size:45px;
	font-weight:bold;
	text-align:center;
	color:white;
	padding-top:110px;
}
.main .banner .top-title button{
	width:140px;
	height:45px;
	margin-top:35px;
	color:white;
	background-color:#F07F57;
	font-size:14px;
	text-align:center;
	border:none;
	border-radius:7px;
	margin-left:180px;
}
.friend-link{
	overflow:hidden;
}
.commen{
	width:33.3%;
	float:left;
	text-align:center;
	padding-top:50px;
	font-weight:bold;
	color:#7C7D7F;
}
.commen a{
	display:inline-block;
	margin-bottom:7px;
}
.top-text{
	color:#E29795;
	font-style:italic;
	font-size:22px;
	text-align:center;
	padding:25px 0;
}
.pic-lit{
	width:1110px;

	margin:0 auto;
}
.pic-lit ul li{
	padding:15px;
	float:left;
	text-align:center;
}
.pic-lit ul li img{
	width:340px;
	border-radius:3px;
}
.pic-lit ul li p{
	font-size:20px;
	font-weight:bold;
	color:#7C7D7F;
	padding-top:13px;
}
.pic-lit ul li p:nth-last-child(1){
	color:#BDBDBC;
}

.article-block{
	width:992px;
	margin:0 auto;
}
.article-block .tit{
	color:#7C7D7F;
	line-height:100px;
	font-size:22px;
	text-align:center;
	font-weight:bold;
}
.article-block .article ul li{
	width:470px;
	padding:0 13px;
	float:left;
}
.article-block .article ul li img{
	display:block;
	width:470px;
}
.article-block .article ul li p{
	font-size:18px;
	font-weight:bold;
	color:#969698;
	text-align:justify;
	margin-top:17px;
}
.footer h1{
	width:100%;
	color:white;
	background-color:#292C36;
	text-align:center;
	line-height:100px;
	font-size:14px;
	margin-top:125px;
}
</style>
</head>
<body>
<!-- 导航开始 -->
<div class="nav">
<div class="logo">
<a href="">
<img src="http://climg.mukewang.com/595dd5120001736902000080.png" alt="imooc">
</a>
</div>
<div class="nav-li">
<ul>
<li><a href="">前端</a></li>
<li><a href="">后端</a></li>
<li><a href="">移动端</a></li>
<li><a href="">数据库</a></li>
</ul>
</div>
</div>
<!-- 导航结束 -->
<!-- 主体内容开始 -->
<div class="main">
<div class="banner">
  <div class="banner-img">
   <img src="../img/banner.jpeg" alt="">
  </div>
  <div class="mask"></div>
  <div class="top-title">
   <h1>MY BEAUTIFUL LIFE</h1>
   <button>LOOK MORE &gt;</button>
  </div>
</div>
<!-- 第三方网站开始 -->
<div class="friend-link">
<div class="commen weibo">
<a href=""><img src="../img/weibo.png" alt=""></a>
<p>MICROBLOG</p>
</div>
<div class="commen wechat">
<a href=""><img src="../img/weixin.png" alt=""></a>
<p>WECHAT</p>
</div>
<div class="commen qq">
<a href=""><img src="../img/QQ.png" alt=""></a>
<p>QQ</p>
</div>
</div>
<!-- 第三方网站结束 -->
<!-- 唯美文字开始 -->
<div class="top-text">
"I want to give good things to record down,<br/>after the recall will be very beautiful."
</div>
<!-- 唯美文字结束 -->
<!-- 图片列表开始 -->
<div class="pic-lit">
<ul>
<li>
<img src="../img/03-01.jpg" alt="">
<p>Cool Image</p>
<p>Record The Picture</p>
</li>
<li>
<img src="../img/03-02.jpg" alt="">
<p>Cool Image</p>
<p>Record The Picture</p>
</li>
<li>
<img src="../img/03-03.jpg" alt="">
<p>Cool Image</p>
<p>Record The Picture</p>
</li>
</ul>
</div>
<!-- 图片列表结束 -->
<!-- 主体中部文字 -->

<!-- 主体中部文字结束-->
<div class="article-block">
<div class="tit">
FROM THE PHOTO ALBUM
</div>
<div class="article">
<ul>
<li>
<img src="../img/04-01.jpg" alt="">
<p>Life is like a book, just read more and more refined, more write more carefully. When read, mind open, all things have been indifferent to heart. Life is the precipitation. </p>
</li>
<li>
<img src="../img/04-02.jpg" alt="">
<p>Life is like a book, just read more and more refined, more write more carefully. When read, mind open, all things have been indifferent to heart. Life is the precipitation. </p>
</li>
</ul>
</div>
</div>
</div>
<!-- 主体内容结束 -->
<!-- 页脚版权开始 -->
<div class="footer">
<h1>&copy;2016 imooc.com 京ICP备13046642号</h2>
</div>
<!-- 页脚版权结束 -->
</body>
</html>

写回答

1回答