示例图
<!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>
时间： 2024-10-13 10:22:43