css新闻列表制作

2026-02-13 08:56:33CSS

CSS新闻列表制作方法

使用无序列表 <ul> 和 <li> 标签创建新闻列表的基本结构，通过CSS控制样式和布局。

<ul class="news-list">
  <li><a href="#">新闻标题1</a><span>2023-10-01</span></li>
  <li><a href="#">新闻标题2</a><span>2023-09-30</span></li>
  <li><a href="#">新闻标题3</a><span>2023-09-29</span></li>
</ul>

基础样式设置

清除列表默认样式并设置基本间距，使列表项水平排列。

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-list li {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
}

交互效果增强

添加悬停效果和过渡动画，提升用户体验。

.news-list a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
}

.news-list a:hover {
  color: #1e88e5;
}

.news-list span {
  color: #999;
  font-size: 0.9em;
}

响应式布局处理

通过媒体查询适配不同屏幕尺寸，移动端改为垂直布局。

@media (max-width: 768px) {
  .news-list li {
    flex-direction: column;
  }

  .news-list span {
    margin-top: 5px;
  }
}

高级样式变体

创建带图标的新闻列表，使用伪元素添加装饰性元素。

css新闻列表制作

.news-list.advanced li {
  position: relative;
  padding-left: 20px;
}

.news-list.advanced li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #1e88e5;
}

这些方法可以组合使用或单独实现，根据实际需求调整样式参数和布局方式。