答案：用HTML搭建新闻列表结构并用CSS重置样式、设置排版与交互效果。先创建带h2标题和ul列表的div容器，重置默认样式后，设置容器居中、边框及内边距，标题下加细线分隔，列表项用虚线分隔并统一高度与行高，可通过背景图添加小图标，链接悬停时显示下划线并变色以增强交互感。
做CSS初级项目时，做一个简单的新闻列表是练手的好方法。重点是用HTML搭结构，再用CSS控制样式，让页面看起来整洁清晰。
基本结构与样式重置
先写HTML，用一个容器把整个列表包起来，标题用h2，列表内容用ul和li。这是最基础的语义化写法。
- 创建一个div作为外层盒子，给它一个类名比如news-box
- 在盒子里面放一个h2标签写“最新文章”这类标题
- 接着用ul包裹多个li，每个li代表一条新闻
- 每条新闻里加一个a标签做链接，方便点击跳转
开始写CSS前，先把默认样式清掉，避免浏览器自带的margin和padding影响布局。
* { margin: 0; padding: 0; }li { list-style: none; }
a { text-decoration: none; color: #333; }
设置容器与排版
给外层容器定宽、居中，并加上边框和内边距，让它在页面上更明显。
立即学习“前端免费学习笔记（深入）”；
.news-box { width: 300px; margin: 100px auto; padding: 15px; border: 1px solid #ccc; }标题下面加一条细线，增强视觉分隔。
.news-box h2 { font-size: 18px; padding-bottom: 5px; border-bottom: 1px solid #ccc; }
列表项之间用虚线分隔，高度统一，文字垂直居中。
.news-box ul li { height: 30px; line-height: 30px; border-bottom: 1px dashed #ddd; }添加小图标与悬停效果
可以在每条新闻前加个小图标，比如圆点或箭头，用背景图实现。
.news-box ul li { background: url(icon.png) no-repeat left center; padding-left: 20px; }让链接在鼠标移上去时有反馈，提升交互感。
.news-box ul li a:hover { text-decoration: underline; color: #f60; }基本上就这些。不复杂但容易忽略细节，比如忘记去掉默认样式或者没处理好行高。多试几次就能掌握。
