当前位置：首页 > CSS

css新闻列表制作

2026-01-28 14:36:42CSS

CSS新闻列表制作

新闻列表是网页中常见的元素，通过CSS可以轻松实现美观的排版效果。以下是几种常见的新闻列表制作方法：

基础新闻列表样式

使用无序列表 <ul> 和 <li> 标签创建新闻列表结构：

<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>
</ul>

CSS样式设置：

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

.news-list li {
  padding: 10px 0;
  border-bottom: 1px dashed #eee;
}

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

.news-list span {
  float: right;
  color: #999;
}

带图标的新闻列表

为新闻列表添加图标增强视觉效果：

.news-list li {
  background: url('icon.png') no-repeat left center;
  padding-left: 20px;
}

响应式新闻列表

使用Flexbox布局创建响应式新闻列表：

css新闻列表制作

.news-list {
  display: flex;
  flex-direction: column;
}

.news-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

多列新闻列表

创建多列布局的新闻列表：

.news-list {
  column-count: 2;
  column-gap: 20px;
}

.news-list li {
  break-inside: avoid;
  margin-bottom: 15px;
}

悬停效果

添加悬停交互效果提升用户体验：

css新闻列表制作

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

.news-list li:hover {
  background-color: #f5f5f5;
}

带缩略图的新闻列表

创建包含缩略图的新闻列表：

<ul class="news-list">
  <li>
    <img src="thumb.jpg" alt="缩略图">
    <div>
      <h3>新闻标题</h3>
      <p>新闻简介...</p>
    </div>
  </li>
</ul>

CSS样式：

.news-list li {
  display: flex;
  gap: 15px;
}

.news-list img {
  width: 80px;
  height: 60px;
  object-fit: cover;
}

时间轴式新闻列表

创建时间轴风格的新闻列表：

.news-list {
  position: relative;
  padding-left: 30px;
}

.news-list::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e0e0e0;
}

.news-list li::before {
  content: '';
  position: absolute;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #1e88e5;
}

这些方法可以根据实际需求组合使用，创建出各种风格的新闻列表效果。