CSS实现行编号效果[--图--]

taosst

于 2008-10-16 16:30:00 发布

阅读量150

点赞数

分类专栏： Html&Div&Css 文章标签： CSS HTML

Html&Div&Css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS实现带有行编号及特定样式的列表方法。通过定义不同类别的列表项（li），并设置背景颜色和边框等属性，使得列表不仅有序号而且视觉效果更佳。适用于网页设计中对有序列表样式有特定需求的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 
 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>带有行编号且编号与内容间带有分割符的CSS实现</title>
<style type="text/css">
<!--
ol{MARGIN: 0px 0px 1px 45px;LIST-STYLE-TYPE: decimal;}
li {BORDER-LEFT: #6ce26c 3px solid;BACKGROUND-COLOR: #f8f8f8;LIST-STYLE-POSITION:outside;}
li.alt {BACKGROUND-COLOR: #ffffff}
.STYLE1 {font-size: 12px}
-->
</style>
</head>
<body>
<ol class="STYLE1">
    <li>ddddd</li>
    <li class="alt">ddddd</li>
    <li>ddddd</li>
    <li class="alt">ddddd</li>
    <li>ddddd</li>
    <li class="alt">ddddd</li>
    <li>ddddd</li>
    <li class="alt">ddddd</li>
    <li>ddddd</li>
    <li class="alt">ddddd</li>
</ol>
</body>
</html>
 