手写如图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content="微博、热点">
<meta name="description" content="
本内容纯属虚构">
<title>微博热点</title>
<style type="text/css">
.one{
text-align: center;
height: 50px;
width: 700px;
background-color: #989898;
}
.one p{
line-height: 50px;
color: white;
}
.two{
width: 700px;
height: 80px;
text-align: right;
display: table-cell;
vertical-align: middle;
}
.three{
width: 700px;
height: 500px;
background-color:#FFF0F5;
display: table-cell;
vertical-align: middle;
}
.four{
margin: auto;
width: 600px;
height:400px;
background-color:#F0F0F0;
}
.four ul{
padding: 0px;
}
.five{
width: 600px;
height: 10px;
text-align:center;
display: table-cell;
vertical-align: bottom;
}
.five ul{
padding: 0;
}
.five li{
list-style: none;
display: inline;
}
</style>
</head>
<body>
<h1><img src="./images/w1.jpg" width="50">微博热点</h1>
<div>
<p>内容实时更新</p>
<!-- 块内行元素进行水平垂直居中 -->
</div>
<div>
<p><a href="">头条热搜榜更多></a></p>
<p><a href="">社会热搜榜更多></a></p>
<!-- 块内多个行元素进行靠右垂直居中 -->
</div>
<br>
<div>
<div>
<ul type="none">
<li><a href=""><img src="./images/w2.jpg" width="30">教育部规定五项高考加分全部取消！但东台这些考生可加分和优先录取！</a></li>
<li><a href=""><img src="./images/w2.jpg" width="30">快检查一下化妆包！这13种韩国化妆品重金属超标</a></li>
<li><a href=""><img src="./images/w2.jpg" width="30">我们和春天有个约会，2018 SCC春季赛道日</a></li>
<li><a href=""><img src="./images/w2.jpg" width="30">刚刚怼完俄罗斯，英国又来香港找茬</a></li>
<li><a href=""><img src="./images/w2.jpg" width="30">中国杯-卡瓦尼惊天倒钩 乌拉圭2-0胜与威尔士争冠</a></li>
<li><a href=""><img src="./images/w2.jpg" width="30">新京报：特朗普开打贸易战 只会搬起石头砸自己脚</a></li>
<li><a href=""><img src="./images/w2.jpg" width="30">地球一小时</a></li>
<li><a href=""><img src="./images/w2.jpg" width="30">两名中国船员被救</a></li>
<li><a href=""><img src="./images/w2.jpg" width="30">宋祖儿复古清新</a></li>
<li><a href=""><img src="./images/w2.jpg" width="30">150头鲸鱼搁浅</a></li>
</ul>
</div>
</div>
<!-- 子元素是块元素水平垂直居中 -->
<br>
<div>
<ul>
<li><a href="">首页</a></li>
<li><a href="">上一页</a></li>
<li><a href="">下一页</a></li>
<li><a href="">尾页</a></li>
<li><a href="">跳转</a></li>
</ul>
</div>
<!-- 子元素是不限宽元素； -->
</body>
</html>效果如图![]L43}2E]S6]L@VJOAFK[4J3.png](https://img.php.cn//upload/image/540/364/860/1521886639900135.png "1521886639900135.png")
