如果你正在构建一个新闻网站或者博客,一个漂亮的新闻列表对于你的用户来说是非常重要的。在这篇文章中,我们会为大家介绍一种使用 CSS 样式的新闻列表的代码。
.news-list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .news-item { width: 30%; margin: 10px; padding: 10px; background-color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); transition: ease .3s; } .news-item:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, .3); transform: translateY(-5px); } .news-item h2 { margin: 0; font-size: 18px; line-height: 1.2; font-weight: 600; color: #333; } .news-item p { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: #777; }
在上面的代码中,我们首先为新闻列表 (news-list) 设置了 flex 布局,使得新闻条目 (news-item) 能够根据屏幕的大小自动调整布局。然后我们为新闻条目设置了一些基本的样式,比如背景颜色、阴影等等。当用户把鼠标悬停在某个条目上时,我们使用了 transition 和 transform 属性实现了一个简单的动画效果。
对于每个新闻条目,我们使用了 h2 标签来显示新闻标题,p 标签来显示新闻摘要。这些元素都有自己的样式,可以根据需要进行修改。
以上就是关于使用 CSS 样式的新闻列表的代码,希望能对你有所帮助。