css画排行榜 |后台修改css样式

/* HTML代码 */
<div class="rank">
<ul>
<li><a href="#">排行榜1</a></li>
<li><a href="#">排行榜2</a></li>
<li><a href="#">排行榜3</a></li>
<li><a href="#">排行榜4</a></li>
<li><a href="#">排行榜5</a></li>
</ul>
</div>
/* CSS代码 */
.rank {
width: 300px;
height: 250px;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
}
.rank ul {
list-style: none;
margin: 0;
padding: 0;
}
.rank li {
display: block;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
}
.rank li:last-child {
border: none;
margin-bottom: 0;
padding-bottom: 0;
}
.rank li a {
color: #333;
text-decoration: none;
font-size: 14px;
font-weight: bold;
}
.rank li a:hover {
text-decoration: underline;
}

上面是一个简单的排行榜，大家使用了一个div包裹一个ul和几个li。通过CSS设置div和li的属性，使得整个排行榜看上去非常简洁和美观。

使用CSS来画排行榜，可以大大简化代码量。如果要修改榜单样式或者调整一下榜单的大小，只需要修改CSS代码，整个页面就会随之变化。这对于开发人员来说是非常方便的。