和谐的小三角裤
关于列表项标记(一般就是li前面的点或者小三角裤),我们通常都是做成图片的,这样比较方便控制。那不用图片可不可以呢?当且仅当列表图片为方形、三角形的时候还是有一定可行性的,比如这样:
css:
ul {
position:relative;
margin:10px auto;
padding:10px;
width:230px;
border:1px solid #DDD;
font-size:12px;
overflow:hidden;
}
li {
position:relative;
clear:both;
float:left;
width:220px;
margin:0.75em 0;
width:0;
height:3px;
border-left:3px double #333;
}
ul li:after {
content:"";
display:block;
clear:both;
height:0;
zoom:1;
visibility:hidden;
}
li a {
position:absolute;
top:-0.65em;
margin-left:10px;
white-space:nowrap;
}
优点:
和谐,再也不用每个颜色的“小裤衩”、"小板凳"都做一条了。
缺点:
1、小裤衩时,在非IE下会有线头露出来(表现为虚边);
2、还没想到...
标签: 标签: css 列表 项目符号
- 2010-4-16 21:50
- 艺术pk技术
评论
-
独孤逸辰 -
恩,不错的做法。。(2010-04-17 20:28)
小寨