标题: HTML中li标签CSS样式明细 [打印本页]

---

作者: fangzhen    时间: 2009-2-23 17:31     标题: 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   不使用项目符号

---

作者: fangzhen    时间: 2009-2-24 09:17     标题: 用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>

---

欢迎光临 PHP开发笔记 (http://phpvi.com/)

Powered by Discuz! 6.1.0