码迷,mamicode.com
首页 > 其他好文 > 详细

仿黑马头条

时间:2021-06-08 22:35:14      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:float   http   view   登录   width   隐私   line   作者   ini   

仿照页面
技术图片

技术图片
技术图片
技术图片
技术图片
技术图片
技术图片

<!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="#">登录&nbsp;&nbsp;</a>
			<a href="#">注册&nbsp;&nbsp;</a>
			<a href="#">更多&nbsp;&nbsp;</a>
		</div>
		<div class="nav">
			<img src="QQ图片20210517202737.png"/>
			<a href="#">首页&nbsp;&nbsp;/</a>
			<a href="#">科技&nbsp;&nbsp;/</a>
			<font color="grey">正文</font>
		</div>
		<hr />
		<div class="left">
			<a href="#"><img src="QQ图片20210518005221.png"> <span>&nbsp;评论<span/></a>
			<hr />
			<a href="#"><img src="QQ图片20210518005420.png"> <span>&nbsp;转发<span/></a>
			<br />
			<a href="#"><img src="QQ图片20210518005427.png"> <span>&nbsp;微博<span/></a>
			<br />
			<a href="#"><img src="QQ图片20210518005431.png"> <span>&nbsp;空间<span/></a>
			<br />
			<a href="#"><img src="QQ图片20210518005435.png"> <span>&nbsp;微信<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>&nbsp;
			<a href="#">帮助中心</a>&nbsp;
			<a href="#">招聘英才</a>&nbsp;
			<a href="#">联系我们</a>&nbsp;
			<a href="#">法律声明</a>&nbsp;
			<a href="#">隐私政策</a>&nbsp;
			<a href="#">知识产权</a>&nbsp;
			<a href="#">廉政举报</a>
		</div>
	</body>
</html>
```![](https://img2020.cnblogs.com/blog/1591440/202106/1591440-20210607221232813-2040076139.png)
![](https://img2020.cnblogs.com/blog/1591440/202106/1591440-20210607221254218-1065698361.png)

仿黑马头条

标签:float   http   view   登录   width   隐私   line   作者   ini   

原文地址:https://www.cnblogs.com/liang-xp/p/14860767.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!