在网上我们经常看到非常多的新闻列表页，在百度新闻、搜狐、新浪平台下访问新闻页面都可以看到的栏目页面，在上图就可以看出效果图！废话不多说，今天带着大家来一起看看吧！
第一：构建长方形盒子，并设置水平居中1、操作步骤如下：
分步骤理解：
（1）、在页面构建一个class名为news的div盒子
divclass="news"/div
（2）、给盒子添加宽度，高度，背景色
.news{width:px;height:px;background-color:red;}
（3）、去掉body默认的外边距margin样式
body{margin:0;}
（3）、设置盒子在水平居中，并且与浏览器顶部有50px外边距
.news{margin:50pxauto0px;}
2、代码如下：
styletype="text/css"body{margin:0;}.news{width:px;height:px;background-color:red;margin:50pxauto0px;}/stylebodydivclass="news"/div/body
3、效果如下：
第二、给盒子添加边框线，同时设置内边距（1）、给.news添加边框线
.news{border:1pxsolid#ddd;}
（2）、给.news添加内边距，同时修改宽度
.news{width:px;/*把宽度从调整到*/padding:15px;/*四个不同方向的内边距*/}
（3）、注释或删除刚开始给.news添加的红色背景
.news{/*background-color:red;*/}
2、代码如下：
styletype="text/css"body{margin:0;}.news{width:px;height:px;/*background-color:red;*/margin:50pxauto0px;border:1pxsolid#ddd;padding:15px;}/stylebodydivclass="news"这个内容用来模拟添加了padding内边距后，内容与盒子边框线之间产生的间距/div/body
3、效果如下：
第三：添加h3标签，制作新闻标题操作方式
1、在.news中添加h3标签
divclass="news"h3百度新闻热榜/h3/div
2、去掉h3默认自带的外边距margin
body,h3{margin:0;}
3、修饰h3中的文字样式如下：
.newsh3{font-size:20px;}
运行代码
styletype="text/css"body,h3{margin:0;}.news{width:px;height:px;/*background-color:red;*/margin:50pxauto0px;border:1pxsolid#ddd;padding:15px;}.newsh3{font-size:20px;}/stylebodydivclass="news"h3百度新闻热榜/h3/div/body
效果如下：
第四：利用ul无序列表来制作新闻列表操作方式
1、在.news中添加ul无序列表，同时每个li中的文字用a标签包裹
divclass="news"h3百度新闻热榜/h3ulliahref=""1全国人代会第二次全体会议热？/a/liliahref=""2美官员承认美国在乌生物实验室有料/a/liliahref=""3组关键词读懂“两高”报告热/a/liliahref=""4建议独生子女父母退休金上调10-20%新/a/liliahref=""5昨日新增本土确诊例无症状例热/a/liliahref=""6陕西新增10例本土确诊病例新/a/liliahref=""7新冠或致大脑萎缩使人提前老10岁/a/liliahref=""8代表：45岁退休利于减少晚婚晚育/a/li/ul/div
2、去掉ul自带的默认样3、给每个li添加如下样式
.newsulli{height:35px;line-height:35px;font-size:16px;border:1pxsolidred;}
4、控制a标签样式，去掉下划线和更改文字颜色
.newsullia{text-decoration:none;color:#;}
5、添加鼠标滑上去的效果
.newsullia:hover{color:red;}
代码如下
styletype="text/css"body,h3{margin:0;}ul{margin:0px;padding:0px;list-style:none;}.news{width:px;height:px;/*background-color:red;*/margin:50pxauto0px;border:1pxsolid#ddd;padding:15px;}.newsh3{font-size:20px;}.newsulli{height:35px;line-height:35px;font-size:16px;border:1pxsolidred;}.newsullia{text-decoration:none;color:#;}.newsullia:hover{color:red;}/stylebodydivclass="news"h3百度新闻热榜/h3ulliahref=""1全国人代会第二次全体会议热？/a/liliahref=""2美官员承认美国在乌生物实验室有料/a/liliahref=""3组关键词读懂“两高”报告热/a/liliahref=""4建议独生子女父母退休金上调10-20%新/a/liliahref=""5昨日新增本土确诊例无症状例热/a/liliahref=""6陕西新增10例本土确诊病例新/a/liliahref=""7新冠或致大脑萎缩使人提前老10岁/a/liliahref=""8代表：45岁退休利于减少晚婚晚育/a/li/ul/div/body
运行效果：
第五、控制每条新闻前面序号的样式实现方法
1、用span标签把每个li前面的数字包裹起来
divclass="news"h3百度新闻热榜/h3ulliahref=""span1/span全国人代会第二次全体会议热？/a/liliahref=""span2/span美官员承认美国在乌生物实验室有料/a/liliahref=""span3/span组关键词读懂“两高”报告热/a/liliahref=""span4/span建议独生子女父母退休金上调10-20%新/a/liliahref=""span5/span昨日新增本土确诊例无症状例热/a/liliahref=""span6/span陕西新增10例本土确诊病例新/a/liliahref=""span7/span新冠或致大脑萎缩使人提前老10岁/a/liliahref=""span8/span代表：45岁退休利于减少晚婚晚育/a/li/ul/div
2、给每个span加上向右的外边距
.newsullispan{margin-right:10px;}
3、控制span中字体的样式如下：
newsullispan{font-size:16px;font-weight:bold;}
4、单独控制前三项span的颜色。我们可以单独给前三个span加上不同的class名，然后单独添加颜色
divclass="news"h3百度新闻热榜/h3ulliahref=""spanclass="col1"1/span全国人代会第二次全体会议热？/a/liliahref=""spanclass="col2"2/span美官员承认美国在乌生物实验室有料/a/liliahref=""spanclass="col3"3/span组关键词读懂“两高”报告热/a/liliahref=""span4/span建议独生子女父母退休金上调10-20%新/a/liliahref=""span5/span昨日新增本土确诊例无症状例热/a/liliahref=""span6/span陕西新增10例本土确诊病例新/a/liliahref=""span7/span新冠或致大脑萎缩使人提前老10岁/a/liliahref=""span8/span代表：45岁退休利于减少晚婚晚育/a/li/ul/div
5、单独控制前三个序号颜色
.col1{color:red;}.col2{color:#ff5c55;}.col3{color:#ffa;}
完整代码
styletype="text/css"body,h3{margin:0;}ul{margin:0px;padding:0px;list-style:none;}.news{width:px;height:px;/*background-color:red;*/margin:50pxauto0px;border:1pxsolid#ddd;padding:15px;}.newsh3{font-size:20px;}.newsulli{height:35px;line-height:35px;font-size:16px;border:1pxsolidred;}.newsullia{text-decoration:none;color:#;}.newsullia:hover{color:red;}.newsullispan{margin-right:10px;font-size:16px;font-weight:bold;}.col1{color:red;}.col2{color:#ff5c55;}.col3{color:#ffa;}/stylebodydivclass="news"h3百度新闻热榜/h3ulliahref=""spanclass="col1"1/span全国人代会第二次全体会议热？/a/liliahref=""spanclass="col2"2/span美官员承认美国在乌生物实验室有料/a/liliahref=""spanclass="col3"3/span组关键词读懂“两高”报告热/a/liliahref=""span4/span建议独生子女父母退休金上调10-20%新/a/liliahref=""span5/span昨日新增本土确诊例无症状例热/a/liliahref=""span6/span陕西新增10例本土确诊病例新/a/liliahref=""span7/span新冠或致大脑萎缩使人提前老10岁/a/liliahref=""span8/span代表：45岁退休利于减少晚婚晚育/a/li/ul/div/body
实现效果：
第六步：消除每条新闻底部的边框线，还有标题与新闻列表间的空隙操作步骤
1、把每个li的边框样式修改成如下
.newsulli{/*border:1pxsolidred;*/border-bottom:1pxdotted#ddd;}
2、给h3标签，添加向下的外边距
.newsh3{margin-bottom:20px;}
3、把最开始给.news添中的高度注释或删除
.news{/*height:px;*/}
完整代码如下：
styletype="text/css"body,h3{margin:0;}ul{margin:0px;padding:0px;list-style:none;}.news{width:px;/*height:px;*//*background-color:red;*/margin:50pxauto0px;border:1pxsolid#ddd;padding:15px;}.newsh3{font-size:20px;margin-bottom:20px;}.newsulli{height:35px;line-height:35px;font-size:16px;/*border:1pxsolidred;*/border-bottom:1pxdotted#ddd;}.newsullia{text-decoration:none;color:#;}.newsullia:hover{color:red;}.newsullispan{margin-right:10px;font-size:16px;font-weight:bold;}.col1{color:red;}.col2{color:#ff5c55;}.col3{color:#ffa;}/stylebodydivclass="news"h3百度新闻热榜/h3ulliahref=""spanclass="col1"1/span全国人代会第二次全体会议热？/a/liliahref=""spanclass="col2"2/span美官员承认美国在乌生物实验室有料/a/liliahref=""spanclass="col3"3/span组关键词读懂“两高”报告热/a/liliahref=""span4/span建议独生子女父母退休金上调10-20%新/a/liliahref=""span5/span昨日新增本土确诊例无症状例热/a/liliahref=""span6/span陕西新增10例本土确诊病例新/a/liliahref=""span7/span新冠或致大脑萎缩使人提前老10岁/a/liliahref=""span8/span代表：45岁退休利于减少晚婚晚育/a/li/ul/div/body
运行效果
如有相关前端方面的技术问题，欢迎加