不错的有序文章列表显示样式

寻梦xunm| 834| 收集

3年前

超过1190天温馨提示

本文最后更新于2021年06月17日，已超过1190天没有更新，若内容或图片失效，请留言反馈。

不错的有序文章列表显示样式，下面相关代码都来自网络上面的优秀模板提供。

html+css代码

<!DOCTYPE html>
<html>
<head>
    <title>不错的有序文章列表显示样式</title>
<style type="text/css">
#xm-xin ul{
  counter-reset: section;
  padding-left: 0;
  margin: 0;

}
#xm-xin li.widlist{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 5px;
  height: 28px;
  line-height: 28px;
  position: relative;
}
#xm-xin li.widlist::before {
  counter-increment: section;
  content: counter(section);
  display: inline-block;
  background-color: #f0f0f0;
  display: inline-block;
  font-size: 13px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  color: #999;
  text-align: center;
  margin-right: 5px;
  border-radius: 3px;
}
#xm-xin li.widlist:nth-child(-n+4):before {
  background: #f63;
  color: #fff;
}
#xm-xin li a{text-decoration:none; color: #333}
</style>
</head>
<body>
<div class="sidebar" id="xm-xin">
<ul>
<li class="widlist"><a href="/html-44.html" target="_blank" title="微博关注大V领取1~3元红包">微博关注大V领取1~3元红包</a></li>
<li class="widlist"><a href="/html-44.html" target="_blank" title="微博关注大V领取1~3元红包">微博关注大V领取1~3元红包</a></li>
<li class="widlist"><a href="/html-44.html" target="_blank" title="微博关注大V领取1~3元红包">微博关注大V领取1~3元红包</a></li>
<li class="widlist"><a href="/html-44.html" target="_blank" title="微博关注大V领取1~3元红包">微博关注大V领取1~3元红包</a></li>
<li class="widlist"><a href="/html-44.html" target="_blank" title="微博关注大V领取1~3元红包">微博关注大V领取1~3元红包</a></li>
</ul>
</div>
</body>
</html>

css html 文章列表有序

本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。

0 赞 or 打赏

喜欢就打赏一点