使用CSS计数器为每个项目编号
示例
的CSS
body {
counter-reset: item-counter; /* create the counter */
}
.item {
counter-increment: item-counter; /* increment the counter every time an element with class "item" is encountered */
}
.item-header:before {
content: counter(item-counter) ". "; /* print the value of the counter before the header and append a "." to it */
}
/* just for demo */
.item {
border: 1px solid;
height: 100px;
margin-bottom: 10px;
}
.item-header {
border-bottom: 1px solid;
height: 40px;
line-height: 40px;
padding: 5px;
}
.item-content {
padding: 8px;
}的HTML
<div class='item'> <div class='item-header'>Item 1 Header</div> <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div> </div> <div class='item'> <div class='item-header'>Item 2 Header</div> <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div> </div> <div class='item'> <div class='item-header'>Item 3 Header</div> <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div> </div>
上面的示例为页面中的每个“项目”编号，并在项目的标题之前添加该项目的编号（使用element的pseudocontent属性）。此处提供了此代码的实时演示。.item-header:before
热门推荐
10 给姐妹乔迁祝福语简短
11 虎年台词祝福语大全简短
12 送去考试祝福语简短英文
13 白日庆典祝福语简短英语
14 少先队代表送祝福语简短
15 鲜花卡片简短开业祝福语
16 许愿星姐妹祝福语简短
17 祝球员赛前祝福语简短
18 宝子生日祝福语简短