带数字Top10排名列表
说明
演示效果分辨率为1980x1080分辨率效果
高度可定制修改
纯css代码控制
Index与css代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style>
a {
color: #525C66;
text-decoration: none;
}
<!-- div 大小设定 -->
.top-10 {
float: left;
width: 340px;
margin-top: 106px;
margin-left: 118px;
background: #fff;
border: 1px solid #FFF;
box-shadow: #d0d0d0 1px 1px 10px 0px;
}
.top-10 ul {
counter-reset: section;
}
.top-10 li {
float: left;
width: 260px;
border-bottom: 1px solid #b8c2cc;
line-height: 46px;
height: 46px;
overflow: hidden;
color: #525C66;
font-size: 14px;
}
.top-10 li:before {
counter-increment: section;
content: counter(section);
display: inline-block;
padding: 0 12px;
margin-right: 10px;
height: 18px;
line-height: 18px;
background: #b8c2cc;
color: #fff;
border-radius: 3px;
font-size: 9px
}
<!-- 排名前三名颜色控制 -->
.top-10 li:nth-child(1):before {
background: #0164b4
}
.top-10 li:nth-child(2):before {
background: #0164b4
}
.top-10 li:nth-child(3):before {
background: #0164b4
}
#rank-more {
float: left;
width: 100%;
margin-top: 8px;
text-align: center;
}
.span-h7 {
font-size: 14px;
color: #B8C2CC;
font-weight: 300;
}
</style>
<body>
<div class="top-10">
<ul>
<li><a>测试用-青岛XX公司01</a></li>
<li><a>测试用-青岛XX公司02</a></li>
<li><a>测试用-青岛XX公司03</a></li>
<li><a>测试用-青岛XX公司04</a></li>
<li><a>测试用-青岛XX公司05</a></li>
<li><a>测试用-青岛XX公司06</a></li>
<li><a>测试用-青岛XX公司07</a></li>
<li><a>测试用-青岛XX公司08</a></li>
<li><a>测试用-青岛XX公司09</a></li>
<li><a>测试用-青岛XX公司10</a></li>
</ul>
<div id="rank-more">
<span class="span-h7"><a href="#">查看更多</a></span>
</div>
</div>
</body>
</html>
演示图
515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
