发新话题
打印

HTML中li标签CSS样式明细

HTML中li标签CSS样式明细

1、直接变色
li{
       color:#f00;
}
注:如果改变点的颜色,那么li后的文字有可能跟着变色,所以要注意分别定义颜色li和字体的颜色。成功的案例请看我的歌轩网。
2、改成图片
li{
       list-style: url("pre.gif") outside circle;
}

3、关于这个list-style-type的一些语法与参数
语法:
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
取值:
disc   :  CSS1   默认值。实心圆
circle   :  CSS1   空心圆
square   :  CSS1   实心方块
decimal :  CSS1   阿拉伯数字
lower-roman   :  CSS1   小写罗马数字
upper-roman   :  CSS1   大写罗马数字
lower-alpha   :  CSS1   小写英文字母
upper-alpha   :  CSS1   大写英文字母
none   :  CSS1   不使用项目符号

TOP

用CSS制作横向菜单

css的完整代码是:

.test ul{list-style:none;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}
页面的完整代码是:

<div class="test">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>

TOP

发新话题