本文已参与「新人创作礼」活动，一起开启掘金创作之路。 内容区是新闻门户网站最重要的组成部分。它一般用来显示网站的热门版块以及其热点内容（新闻）条目。根据内容、性质、热度等不同，会采用文字、图片、视频链接等方式进行呈现。在接下来的内容中，我们将通过实现几种常见的样式来学习HTML和CSS基础知识。
1. 简单文字列表型
文字列表是大家最熟悉的新闻条目列表形式了。它简洁明了，并且不受文章内容是否包含图片、视频的影响，因此被大量应用。
分析设计图可以看出，该新闻列表分成2个部分：栏目标题和新闻列表。下面的HTML结构能够满足设计需求：
<div>
<h3>政务</h3>
<ul>
<li>五部门:加强零工市场建设 完善求职招聘服务</li>
<li>百日千万网络招聘行动发布岗位需求1448万人次</li>
<li>6月我国汽车产销量同比稳步增长 </li>
<li>中国计生协青春健康教育服务覆盖全国700多所高校 </li>
<li>上半年我国人民币贷款增加13.68万亿元 </li>
</ul>
</div>
渲染结果如图：
结果与设计图还有较大的差别：
-
栏目顶部分隔线缺失。
-
缺少栏目标题前的图标。
-
字体大小和行间距不一致。
-
列表标识和缩进不正确。
下面我们先来添加栏目顶部的水平分隔线。在上一节中，我们通过设置右边框实现了垂直的分隔线。通过边框实现的分隔线的长度或者宽度，与它所在标签的大小有关系。在设计图中，明显有红色和灰色两条长短不一样的分隔线，如果采用边框来实现，需要设置在两个标签上。通过仔细观察分隔线的长度与栏目内容的关系，我们可以看出灰色分隔线的长度与整个栏目的宽度一致，而红色分隔线的宽度与栏目标题部分的宽度一致，所以我们将尝试在这两个标签上添加上边框来实现分隔线。
div {
width: 400px;
border-top: 1px #e5e5e5 solid;
}
h3 {
border-top: 2px #ff3333 solid;
}
通过给列表设置宽度（400px）和顶部边框、标题设置顶部边框，我们可以看到两条水平线。
红色分隔线的位置和长度需要进行微调才能符合我们的要求。红色分隔线所在的h3标签，默认具有18.72像素的上下外边距，并且h3标签作为div的子标签，两者的上边框不会发生重合。
我们通过移除h3标签默认上外边距的影响，并运用外边距为负可以实现重叠效果。
h3 {
margin-top: -1px;
border-top: 2px #ff3333 solid;
}
h3标签是一个块标签，通过改变width属性能够设置宽度。但是不同栏目的标题长度不尽相同，如果为栏目标题设置固定宽度，需要根据标题长度分别计算，较为麻烦。考虑到行内元素的宽度由它所包含的内容决定，在实际开发中一般选择将栏目标题包裹在行内标签中。
<div>
<h3>
<span>政务</span>
</h3>
<ul>
<li>五部门:加强零工市场建设 完善求职招聘服务</li>
<li>百日千万网络招聘行动发布岗位需求1448万人次</li>
<li>6月我国汽车产销量同比稳步增长 </li>
<li>中国计生协青春健康教育服务覆盖全国700多所高校 </li>
<li>上半年我国人民币贷款增加13.68万亿元 </li>
</ul>
</div>
相应地对CSS样式进行调整：
h3 {
margin-top: -1px;
}
h3 > span {
border-top: 2px #ff3333 solid;
}
结果如下：
与设计图相比，分隔线与栏目标题之间还需要增加9像素的空隙。红色分隔线与栏目标题属于同一个内联标签（inline）的边框与内容部分。根据盒模型，它们之间可以增加内边距（padding）。但span属于内联元素（inline），根据W3C标准，内联元素的margin和padding无效。inline-block类型刚好可以解决这个问题。
h3 > span {
display: inline-block;
padding-top: 8px;
border-top: 2px #ff3333 solid;
}
栏目标题前添加图标能够让内容更容易区分。一般有三种添加图标的方式：
-
img标签。 -
background-image属性。 -
图标字体。
其中修饰性质的图标一般采用后两种方式实现。我们先尝试通过background-image设置栏目图标。background-image图片显示在内容区和内边距区域，根据标签与图片的大小关系，可以选择部分显示图片或者重复显示图片。
h3 > span {
display: inline-block;
padding-top: 8px;
padding-left: 40px;
padding-right: 10px;
border-top: 2px #ff3333 solid;
background-image: url(assets/image/list-image-sprites.png);
background-position: 10px -1735px;
background-repeat: no-repeat;
}
url()函数中指定背景图的路径。background-position定义了图片相对img标签的位置。当图片大于img标签大小时，将根据background-position和background-origin的值，显示图片的一部分。利用这个特性，我们能够将多个小图标合并到同一个大图片中，在网页里通过改变background-position和background-origin的值来实现精灵图（Sprite）的效果，减少页面加载所需的网络请求数量。
url()函数中可以使用图片的相对路径或者绝对路径。切记相对路径是相对于该样式所在的文件位置。
按设计稿要求调整ul、li标签的内边距、行高：
ul {
padding-left: 14px;
}
li {
line-height: 30px;
}
到目前为止，还剩下最后一个难点待解决。li前面的圆点颜色与设计稿不一致。CSS虽然提供了::marker伪元素来设置它的大小和颜色，但是目前各浏览器的支持情况不一致。
li::marker {
color: #ccc;
}
为了确保使用不同浏览器的用户体验，尽量不要采用兼容性较差的功能，或者需要做兼容性测试和处理。
更加灵活的方式是将默认的列表样式取消，通过添加修饰性元素来实现。
li {
list-style: none;
line-height: 30px;
}
li::before {
display: inline-block;
content: '';
width: 4px;
height: 4px;
border-radius: 2px;
margin-top: -2px;
margin-left: -10px;
margin-right: 4px;
background-color: #ccc;
}
完整代码：
<!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>文字新闻列表-1</title>
<style>
div {
width: 400px;
border-top: 1px #e5e5e5 solid;
font-size: 14px;
}
h3 {
margin-top: -1px;
}
h3 > span {
display: inline-block;
padding-top: 8px;
padding-left: 40px;
padding-right: 10px;
border-top: 2px #ff3333 solid;
background-image: url(assets/image/list-image-sprites.png);
background-position: 10px -1735px;
background-repeat: no-repeat;
}
ul {
padding-left: 14px;
}
li {
list-style: none;
line-height: 30px;
}
li::before {
display: inline-block;
content: '';
width: 4px;
height: 4px;
border-radius: 2px;
margin-top: -2px;
margin-left: -10px;
margin-right: 4px;
background-color: #ccc;
}
/* li::marker {
color: #ccc;
} */
</style>
</head>
<body>
<div>
<h3>
<span>政务新闻</span>
</h3>
<ul>
<li>五部门:加强零工市场建设 完善求职招聘服务</li>
<li>百日千万网络招聘行动发布岗位需求1448万人次</li>
<li>6月我国汽车产销量同比稳步增长 </li>
<li>中国计生协青春健康教育服务覆盖全国700多所高校 </li>
<li>上半年我国人民币贷款增加13.68万亿元 </li>
</ul>
</div>
</body>
</html>
