总结：
1.学会使用h2作标题
2.学会隐藏超出行的文本，以及将超出的文本变成省略号
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表</title>
<style type="text/css">
*{margin:0px;padding:0px;}
body{background:#f3f5f7;}
div{background:#ffffff;margin:300px auto;width:500px;height:298px;border:2px solid #f5f5f5;}
h2{padding-left:10px;margin-bottom:10px;color:#5184eb;border-bottom:2px solid #5184eb;}
ul {width:500px; height:500px; list-style: none;}
ul li{line-height: 40px;padding-left:10px;white-space:nowrap;overflow: hidden;text-overflow:ellipsis;}
ul a{color:#000000;text-decoration: none;font-size:20px;}
ul li:hover{background:#ccc;}
</style>
</head>
<body>
<div>
<h2>今日要闻</h2>
<ul>
<li><a href="http://www.php.cn/toutiao-412576.html">php中文网vip特权会员学习指南</a></li>
<li><a href="http://www.php.cn/toutiao-409221.html">php中文网原创视频：《天龙八部》公益php培训系列课程汇总！</a></li>
<li><a href="http://www.php.cn/toutiao-409169.html">php中文网《玉女心经》公益***系列课程汇总</a></li>
<li><a href="http://www.php.cn/toutiao-415921.html">最新上线的10个精美网站素材分享【免费下载】</a></li>
<li><a href="http://www.php.cn/toutiao-415877.html">2019为什么我们还会继续使用 PHP？</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
