仿黑马头条
仿照页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>头条页面</title>
<style>
.top{
background-color: #000000;
line-height: 40px;
text-align: right;
font-size: 20px;
}
.top a{
color: white;
}
a{
text-decoration: none;
color: #000000;
}
.nav{
line-height: 40px;
}
.nav a{
color: #000000;
}
a:hover{
color: #FF0000;
}
.left{
width: 20%;
text-align: center;
float: left;
}
.left img{
width: 38px;
height: 38px;
}
.left span{
vertical-align: 50%;
}
.center{
width: 59%;
float: left;
}
.right{
width: 20%;
float: left;
}
.footer{
/*清除浮动效果*/
clear: both;
/*文本对其方式*/
text-align: center;
/*背景颜色*/
background: blue;
line-height: 25px;
}
a{
color: white;
}
</style>
</head>
<body>
<div class="top">
<a href="#">登录 </a>
<a href="#">注册 </a>
<a href="#">更多 </a>
</div>
<div class="nav">
<img src="QQ图片20210517202737.png"/>
<a href="#">首页 /</a>
<a href="#">科技 /</a>
<font color="grey">正文</font>
</div>
<hr />
<div class="left">
<a href="#"><img src="QQ图片20210518005221.png"> <span> 评论<span/></a>
<hr />
<a href="#"><img src="QQ图片20210518005420.png"> <span> 转发<span/></a>
<br />
<a href="#"><img src="QQ图片20210518005427.png"> <span> 微博<span/></a>
<br />
<a href="#"><img src="QQ图片20210518005431.png"> <span> 空间<span/></a>
<br />
<a href="#"><img src="QQ图片20210518005435.png"> <span> 微信<span/></a>
</div>
<!--中间正文-->
<div class="center">
<!--标题-->
<div>
<h1>网络182</h1>
</div>
<!--作者信息-->
<div>
<i><font size="2" color="gray">梁晓平2021.5.4</font></i>
<hr />
</div>
<!--副标题-->
<div>
<h3>今天统计打疫苗人员名单和具体接种情况</h3>
</div>
<!--正文-->
<div>
<p>帅帅 14:21:55</p>
<p>全体成员 请各班统计打疫苗人员名单和具体接种情况，例如：
<ol>
<li>张某，已打1针,</li>
<li>或者王某，已打2针,</li>
</ol>
<img src="1.jpg" width="100%"/>
要求必须覆盖全班所有同学，数据准确，不然会对后续工作造成恶劣影响，今天晚上八点之前发到群里</p>
<p>帅帅 14:22:06</p>
<p>做个表格</p>
<p>帅帅 14:23:07</p>
<p>班级 姓名 是否接种疫苗 接种几次</p>
<img src="2.jpg" width="100%"/>
</div>
</div>
<!--右侧广告图片-->
<div class="right">
<img src="u=2987247273,4145941594&fm=11&gp=0.jpg" width="100%"/>
<img src="u=2990664622,453585765&fm=26&gp=0.jpg" width="100%"/>
<img src="u=2429014158,1228043752&fm=26&gp=0.jpg" width="100%"/>
<img src="u=2987247273,4145941594&fm=11&gp=0.jpg" width="100%"/>
<img src="u=2990664622,453585765&fm=26&gp=0.jpg" width="100%"/>
<img src="u=2429014158,1228043752&fm=26&gp=0.jpg" width="100%"/>
</div>
<!--下部超链接-->
<div class="footer">
<a href="#">关于网络</a>
<a href="#">帮助中心</a>
<a href="#">招聘英才</a>
<a href="#">联系我们</a>
<a href="#">法律声明</a>
<a href="#">隐私政策</a>
<a href="#">知识产权</a>
<a href="#">廉政举报</a>
</div>
</body>
</html>
```
