不错的有序文章列表显示样式
3年前
超过1252天
温馨提示
本文最后更新于2021年06月17日，已超过1252天没有更新，若内容或图片失效，请留言反馈。
不错的有序文章列表显示样式，下面相关代码都来自网络上面的优秀模板提供。
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>
0 赞
or 打赏
喜欢就打赏一点
上一篇
下一篇
