当前位置：首页 > CSS

css制作新闻列表

2026-04-02 14:23:15CSS

新闻列表的CSS实现方法

基础结构设计 使用无序列表<ul>或有序列表<ol>作为容器，每个新闻项用<li>包裹。推荐语义化结构：

<ul class="news-list">
  <li>
    <a href="#">
      <h3>新闻标题</h3>
      <p class="time">2023-08-01</p>
      <p class="desc">新闻摘要内容...</p>
    </a>
  </li>
</ul>

核心样式方案 清除默认列表样式并添加间距：

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

.news-list li {
  padding: 12px 15px;
  border-bottom: 1px dashed #eee;
  transition: background 0.3s;
}

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

标题与时间样式

.news-list h3 {
  margin: 0 0 5px;
  font-size: 16px;
  color: #333;
}

.news-list .time {
  color: #999;
  font-size: 12px;
  margin: 0 0 8px;
}

.news-list .desc {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

交互增强效果 添加点击反馈和悬停动画：

.news-list a {
  text-decoration: none;
  display: block;
}

.news-list li {
  position: relative;
}

.news-list li::after {
  content: ">";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #ccc;
}

响应式适配 针对不同屏幕尺寸调整布局：

@media (max-width: 768px) {
  .news-list li {
    padding: 10px;
  }

  .news-list h3 {
    font-size: 15px;
  }

  .news-list .desc {
    -webkit-line-clamp: 1;
  }
}

多列布局变体 需要横向排列时可采用flex布局：

css制作新闻列表

.news-list.horizontal {
  display: flex;
  flex-wrap: wrap;
}

.news-list.horizontal li {
  width: calc(33.33% - 20px);
  margin-right: 20px;
  border: 1px solid #f0f0f0;
}