利用CSS制作新闻标题代码教程
程序员文章站
2022-07-02 18:38:29
利用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;
height: 50px;
border-bottom: 2px solid red;
font: 18px/50px 'Microsoft Yahei';
color: #000;
/* 清除span的padding的上下属性 */
padding:0 15px;
position: relative;
}
.new_list_con ul{
/* 清除链接前面的“小圆点” */
list-style: none;
/* 清除ul的padding属性 */
padding: 0;
width: 560px;
height: 238px;
/* 设置左右间距 */
margin: 7px auto 0;
}
.new_list_con ul li{
/* 设置每一行的行高，行宽由内容撑开 */
height: 38px;
/* 设置每一行的下划线 */
border-bottom: 1px solid #ddd;
}
.new_list_con ul a{
/* 向左浮动 */
float: left;
/* 设置字体大小，行宽，字号 */
font: 14px/38px 'Microsoft Yahei';
/* 清除下划线 */
text-decoration: none;
/* 设置字体颜色 */
color: #000;
}
.new_list_con ul span{
/* 日期，向右浮动 */
float: right;
/* 设置行宽 */
height: 38px;
/* 居中对齐 */
line-height: 38px;
color: #000;
}
.new_list_con ul a:before{
/* 在文字前面加“小圆点” */
content: '· '
}
.new_list_con ul a:hover{
/* 触摸变色 */
color: red;
}
</style>
</head>
<body>
<p class="new_list_con">
<h3><span>新闻列表</span></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>