本文已参与「新人创作礼」活动，一起开启掘金创作之路。
在浏览新闻或资讯的时候，大家通常会关注文章的时效，也就是文章发布时间。因此许多网站会之间在列表页将发布时间显示出来，甚至还会顺便增加作者、摘要文字等信息。
这种类型的列表模块最大的区别如下：
- 标题栏右侧增加了“更多”链接。
- 列表项的内容除了文章标题外，还有摘要、作者头像、姓名和发布时间等。
- 由于每个列表项的文字行数多余一行，加入了水平分隔线，使得列表项之间更加容易区分。
我们还是先将整个模块分成标题和列表两部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻列表-修饰</title>
</head>
<body>
<div>
<header>
<h3>中国早点</h3>
<a href="/" target="_blank">更多</a>
</header>
<ul>
<li>
<h4>杨丹旭：中文写作得分不高的警示</h4>
<div>如果只诉诸于粗糙的比喻手法和拙劣的夸张手段，而不注重现实生活中的客观因素，文章是无法真正打动读者，从而获得高分。</div>
<div>
<img src="assets/image/columnist-yang-dan-xu_1.jpg" alt="杨丹旭">
<span>by 杨丹旭</span>
<span>07-13</span>
</div>
</li>
<li>
<h4>陈士铭：这是一些标题文字</h4>
<div>对于一篇教程来说，宁愿选择八卦文字，也不要选择真实的内容，随便写一些乱码是可以的。</div>
<div>
<img src="assets/image/journalist-dai-qing-cheng.jpg" alt="陈士铭">
<span>by 陈士铭</span>
<span>07-13</span>
</div>
</li>
</ul>
</div>
</body>
</html>
1. 类与类选择器
在前面几节里，我们都是通过标签以及标签的组合获取合适的选择器，并且设置对应样式。随着页面内的HTML元素数量增加，结构越来越复杂。单一的采用标签选择器会让元素的选取工作变得越来越复杂。CSS提供了多种选择器供我们使用。在本节中，我们采用类选择器来完成元素的选取和样式设置。
在使用类选择器之前，需要为标签设置class属性。`
- class`的属性值称为类名。
- 同一个类名可以设置给多个相同或不同类型的标签。
- 同一个标签可以同时设置多个类名，类名之间以空格隔开，如
class="name1 name2"。 - 类选择器的格式为
.+类名，如.name1。
<div class="column">
<header>
<h3 class="column-title">中国早点</h3>
<a class="more" href="/" target="_blank">更多></a>
</header>
<ul class="column-list">
<li class="column-item">
<h4 class="title">杨丹旭：中文写作得分不高的警示</h4>
<div class="content">如果只诉诸于粗糙的比喻手法和拙劣的夸张手段，而不注重现实生活中的客观因素，文章是无法真正打动读者，从而获得高分。</div>
<div class="author">
<img class="head" src="assets/image/columnist-yang-dan-xu_1.jpg" alt="杨丹旭">
<span class="name">by 杨丹旭</span>
<span class="date">07-13</span>
</div>
</li>
<li class="column-item">
<h4 class="title">陈士铭：这是一些标题文字</h4>
<div class="content">对于一篇教程来说，宁愿选择八卦文字，也不要选择真实的内容，随便写一些乱码是可以的。</div>
<div class="author">
<img class="head" src="assets/image/journalist-dai-qing-cheng.jpg" alt="陈士铭">
<span class="name">by 陈士铭</span>
<span class="date">07-13</span>
</div>
</li>
</ul>
</div>
我们还是从上往下依次添加样式，完善布局。先使用类选择器添加栏目的宽度：
.column {
width: 33.3333333%;
}
2. 栏目标题
接下来设置标题和更多按钮的样式：
.column-title {
display: inline-block;
font-size: 24px;
font-weight: bolder;
color: #a50034;
margin: 20px 0 10px;
}
.column-title::after {
display: block;
position: relative;
top: -8px;
content: '';
border-bottom: 8px #ffd8d8 solid;
z-index: -1;
}
.more {
float: right;
margin: 20px 0 10px;
font-size: 14px;
line-height: 2;
text-decoration: none;
color: #ccc;
}
.more:hover {
color: #a50034;
}
这里有几个地方需要注意。.column-title选中的栏目标题h3标签默认是block类型，在显示上会独占一行。这种情况下，通过设置该标签的::after伪元素的边框来实现标题下的修饰线，需要单独设置宽度，否则与标题一样独占一行。考虑到inline和inline-block类型的标签所占区域由它所包含的内容决定，将.column-title的display属性设置为inline-block既可以让标题的宽度随文字改变，避免手动计算宽度，而且不影响该标签尺寸和边距的设置。
HTML元素发生重叠时，默认情况下会根据标签的嵌套关系、在文档流中出现的先后次序叠放在一起。如图中红色框所代表的标签，文档流中后出现的标签会叠放在上层。通过设置z-index属性的值，能够改变它们的叠放顺序。同一父标签下的元素，z-index值越大，越叠放在上面。.column-title::after默认应该覆盖在栏目标题文字上，z-index为负数将它切换到了文字的下面。
a标签的下划线在大多数设计师眼里，都不是那么美观。text-decoration属性用于设置文本的修饰线，如下划线、波浪线、删除线等。text-decoration: none将取消对文字的修饰。
a标签是构建HTML文档的重要成分，它使得不同网页、网页中的不同部分通过形成超链接而建立关联，这也是超文本的由来和基本特征。在使用过程中，为了让用户对自己的操作有更加准确的判断，浏览器为a标签设置了4个状态：
link（链接）状态，默认visited（被访问）状态hover（鼠标悬停）状态active（鼠标点击）状态
a标签同时只能处于其中一个状态。CSS通过4个伪类分别选取这4个状态。由于这4个状态下所设置的属性能够被其它状态下对应属性所覆盖，一般应该遵循LVHA的书写顺序。
3. 文章列表
根据前面讲过的内容，我们应该可以很快地根据设计稿的要求将列表的默认样式中的圆点、缩进等取消，并将文章标题和摘要的字体大小、颜色以及垂直间距设置好。下面主要介绍作者信息样式。
作者头像样式有两个地方需要留意：
- 圆形的设置。
- 图片与文字的垂直对齐。
border-radius属性提供了为矩形元素添加圆角的功能。浏览器会使用这个属性值作为半径，为每个角绘制内切圆。灵活运用圆角的功能，结合元素长宽变化，可以制作许多有意思的效果。
当设置一个正方形元素，并以长宽的一半（50%）作为半径时，会将元素裁剪成一个圆。
.head {
width: 30px;
height: 30px;
border-radius: 50%;
}
作者信息中的img和span都是属于行内标签（inline），因此默认就能够水平排列。但我们发现头像与姓名、日期不能保持垂直对齐，效果如下。
这是因为行内元素具有垂直对齐属性vertical-align。该属性指定了行内元素如何与父元素垂直对齐。其中img默认与父元素底部对齐，而文本内容默认根据baseline对齐。下面是关于baseline位置的示意：
vertical-align可以被子元素继承。
最后就是文章列表的分隔线了。直接在li上设置下边框即可，记得取消最后一条新闻的边框。
4. 最终效果
5. 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻列表-修饰</title>
<style>
.column {
width: 33.3333333%;
}
.column-title {
display: inline-block;
font-size: 24px;
font-weight: bolder;
color: #a50034;
margin: 20px 0 10px;
}
.column-title::after {
display: block;
position: relative;
top: -8px;
content: '';
border-bottom: 8px #ffd8d8 solid;
z-index: -1;
}
.more {
float: right;
margin: 20px 0 10px;
font-size: 14px;
line-height: 2;
text-decoration: none;
color: #ccc;
}
.more:hover {
color: #a50034;
}
.column-list {
list-style: none;
margin-top: 0;
padding-left: 0;
}
.column-item {
padding-bottom: 10px;
border-bottom: 1px #ececec solid;
margin-bottom: 10px;
}
.column-item:last-child {
border-bottom: none;
}
.title {
font-size: 18px;
font-weight: lighter;
margin: 0;
}
.content {
font-size: 14px;
line-height: 24px;
color: #888;
margin-top: 10px;
}
.author {
padding-top: 10px;
}
.head {
width: 30px;
height: 30px;
border-radius: 50%;
vertical-align: middle;
}
.name {
font-size: 12px;
color: #a9977d;
}
.date {
font-size: 12px;
color: #b4b4b5;
}
</style>
</head>
<body>
<div class="column">
<header>
<h3 class="column-title">中国早点</h3>
<a class="more" href="/" target="_blank">更多></a>
</header>
<ul class="column-list">
<li class="column-item">
<h4 class="title">杨丹旭：中文写作得分不高的警示</h4>
<div class="content">如果只诉诸于粗糙的比喻手法和拙劣的夸张手段，而不注重现实生活中的客观因素，文章是无法真正打动读者，从而获得高分。</div>
<div class="author">
<img class="head" src="assets/image/columnist-yang-dan-xu_1.jpg" alt="杨丹旭">
<span class="name">by 杨丹旭</span>
<span class="date">07-13</span>
</div>
</li>
<li class="column-item">
<h4 class="title">陈士铭：这是一些标题文字</h4>
<div class="content">对于一篇教程来说，宁愿选择八卦文字，也不要选择真实的内容，随便写一些乱码是可以的。</div>
<div class="author">
<img class="head" src="assets/image/journalist-dai-qing-cheng.jpg" alt="陈士铭">
<span class="name">by 陈士铭</span>
<span class="date">07-13</span>
</div>
</li>
</ul>
</div>
</body>
</html>
