<ul class="article-list"> <li> <a href="#">文章标题</a> <p class="time">发布时间:2021-05-25</p> <p class="summary">文章摘要,可以是一两句话,也可以是一段话。</p> </li> <li> <a href="#">文章标题</a> <p class="time">发布时间:2021-05-24</p> <p class="summary">文章摘要,可以是一两句话,也可以是一段话。</p> </li> <li> <a href="#">文章标题</a> <p class="time">发布时间:2021-05-23</p> <p class="summary">文章摘要,可以是一两句话,也可以是一段话。</p> </li> </ul>
其中,`ul` 元素设置了类名为 `"article-list"`,`li` 元素中包含了文章标题、发布时间和文章摘要。接下来就来看一下如何使用 CSS3 来美化这个列表。
首先,我们要去除列表项的默认样式,将其改为无序列表。
.article-list { list-style: none; margin: 0; padding: 0; }
接下来,我们要对每个列表项进行排版,让它们在垂直方向上等间距排列,并且每个列表项之间有一定的间隔。
.article-list li { margin-bottom: 20px; }
同时,我们还要让文章摘要在标题下方显示,并且摘要的行数不超过三行,超出的部分用省略号表示。
.article-list li a { display: block; font-size: 18px; font-weight: bold; line-height: 1.5; margin-bottom: 5px; text-decoration: none; color: #333; } <br> .article-list li .time { font-size: 12px; color: #666; } <br> .article-list li .summary { font-size: 16px; line-height: 1.5; color: #666; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; }
到这里,我们已经成功地对文章列表进行了美化,效果如下图所示:
![文章列表效果图](https://cdn.jsdelivr.net/gh/itxiaogu/image-hosting/img/20210525172341.jpg)
以上就是本文介绍的关于 CSS3 文章列表代码的所有内容,希望对大家有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。