示例图
<!doctype html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<style type="text/css">/*父级上增加属性overflow：hidden*//*在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）*//*使用成熟的清浮动样式类，clearfix*//*.clearfix:after,.clearfix:before{ content: "";display: table;}*//*.clearfix:after{ clear:both;}*//*.clearfix{zoom:1;}*//*清除浮动的使用方法：*//*.con2{... overflow:hidden}*/ ???????.news_list_con{ ???????????width:600px; ???????????height: 290px; ???????????border:1px solid #ddd; ???????????margin: 50px auto; ???????????overflow: hidden; ???????????/*overflow: hidden; ??将多余的内容清除掉 */ ???????/*}*/} ???.news_list_con h3{ ???????height: 50px; ???????width:560px; ???????border-bottom: 1px solid #ddd; ???????margin: 0px auto; ???????color: #000; ???} ???????.news_list_con h3 span{ ???????????display: inline-block; ???????????height:50px; ???????????border-bottom: 2px solid red; ???????????/*font: 18px/50px ‘Microsoft Himalaya‘; ???字体大小 行高 和字体微软雅黑*/ ???????????font: 18px/50px ‘Microsoft Himalaya‘; ???????????padding: 0 15px; ???????????position: relative; ???????????????????} ???????.news_list_con ul{ ???????????list-style: none; ???????????/*list-style: none; 清除ul的点*/ ???????????padding: 0; ???????????width: 560px; ???????????height: 238px; ???????????????margin: 6px auto; ???????} ???????.news_list_con ul li{ ???????????height:38px; ???????????border-bottom: 1px solid #ddd; ???????} ????????.news_list_con ul a{ ????????????float: left; ????????????height:38px; ????????????font: 14px/38px ‘Microsoft Himalaya‘; ????????????color: #000; ????????????text-decoration: none; ????????????/*text-decoration: none; 清除多余的线条*/ ????????} ????????.news_list_con ul span{ ????????????float: right; ????????????height:38px; ????????????????font: 13px/38px ‘Microsoft‘; ????????????color: #000; ????????} ???????.news_list_con ul a:before{ ???????????/*content: ‘. ‘; 再前面加点*/ ???????????content: ‘. ‘; ????????} ???????.news_list_con ul a:hover{ ???????????color: red; ???????} ???</style></head><body><div class="news_list_con"> ???<h3><span>新闻列表</span></h3> ???<ul> ???????<li><a href="#">特征布局：新闻列表所需知识点：盒子模型浮动</a><span>2017-09-29</span></li> ???????<li><a href="#">特征布局：新闻列表所需知识点：盒子模型浮动</a><span>2017-09-29</span></li> ???????<li><a href="#">特征布局：新闻列表所需知识点：盒子模型浮动</a><span>2017-09-29</span></li> ???????<li><a href="#">特征布局：新闻列表所需知识点：盒子模型浮动</a><span>2017-09-29</span></li> ???????<li><a href="#">特征布局：新闻列表所需知识点：盒子模型浮动</a><span>2017-09-29</span></li> ???????<li><a href="#">特征布局：新闻列表所需知识点：盒子模型浮动</a><span>2017-09-29</span></li> ???</ul></div></body></html>css实战设置新闻内容
原文地址：http://www.cnblogs.com/Mjonj/p/7609823.html