[分享]css做新闻列表带图片

CSS可以用来制作带图片的新闻列表，下面是一个示例：

.news-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.news-item img {
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.news-item h3 {
  margin: 0;
}

.news-item p {
  margin: 10px 0;
  line-height: 1.5;
} 

这段代码定义了一个名为.news-item的CSS类，其中包含一个图片、新闻标题和新闻摘要。使用display:flex将它们水平排列。

接下来，我们需要在HTML中使用这个CSS类：

<div class="news-item">
  <img src="news1.jpg">
  <h3>新闻标题1</h3>
  <p>新闻摘要...</p>
</div>

<div class="news-item">
  <img src="news2.jpg">
  <h3>新闻标题2</h3>
  <p>新闻摘要...</p>
</div> 

以上HTML代码添加了两个新闻列表项。现在，它们应该排列在一行上，每个项包含一个图片、新闻标题和新闻摘要。

使用CSS可以轻松地控制这些元素的布局和样式，从而打造高质量的新闻列表。