在CSS中，如何编写新闻列表？
程序员文章站
2022-07-02 18:35:53
在CSS中，如何编写新闻列表？
...
在CSS中，如何编写新闻列表？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新闻列表</title>
<style>
.new_list_con{
width: 600px;
height: 290px;
border: 1px solid #ddd;
margin: 50px auto;
/* 多余的部分，进行裁剪 */
overflow: hidden;
}
.new_list_con h3{
width: 560px;
height: 50px;
/* 设置下划线 */
border-bottom: 1px solid #ddd;
/* 居中，对齐 */
margin: 0 auto;
}
.new_list_con h3 span{
/* 转换为内联块元素 */
/*display: inline-block;*/
float: left;
height: 50px;
border-bottom: 2px solid red;
font: 18px/50px 'Microsoft Yahei';
color: #000;
/* 清除span的padding的上下属性 */
padding:0 15px;
position: relative;
}
.new_list_con h3 a{
float: right;
font: 14px/14px 'Microsoft Yahei';
color: #666;
text-decoration: none;
margin-top: 25px;
}
.new_list_con h3 a:hover{
color: red;
}
.new_list_con ul{
/* 清除链接前面的“小圆点” */
list-style: none;
/* 清除ul的padding属性 */
padding: 0;
width: 560px;
height: 238px;
/* 设置左右间距 */
margin: 7px auto 0;
}
.new_list_con ul li{
/*float: left;*/
/* 设置每一行的行高，行宽由内容撑开 */
height: 38px;
/* 设置每一行的下划线 */
border-bottom: 1px solid #ddd;
}
.new_list_con ul a{
/* 向左浮动 */
float: left;
/* 设置字体大小，行宽，字号 */
font: 14px/38px 'Microsoft Yahei';
/* 清除下划线 */
text-decoration: none;
/* 设置字体颜色 */
color: #000;
text-indent: 30px;
background: url(2.jpg) 3px center no-repeat;
}
.new_list_con ul span{
/* 日期，向右浮动 */
float: right;
/* 设置行宽 */
height: 38px;
/* 居中对齐 */
line-height: 38px;
color: #000;
}
/* .new_list_con ul li:before{
在文字前面加“小圆点”
content: '· '
}*/
.new_list_con ul a:hover{
/* 触摸变色 */
color: red;
}
</style>
</head>
<body>
<p class="new_list_con">
<h3><span>新闻列表</span><a href="#">更多>></a></h3>
<ul>
<li><a href="">原因并不只有天气</a><span>2017-12-15</span></li>
<li><a href="">原因并不只有天气</a><span>2017-12-15</span></li>
<li><a href="">原因并不只有天气</a><span>2017-12-15</span></li>
<li><a href="">原因并不只有天气</a><span>2017-12-15</span></li>
<li><a href="">原因并不只有天气</a><span>2017-12-15</span></li>
<li><a href="">原因并不只有天气</a><span>2017-12-15</span></li>
</ul>
</p>
</body>
</html>