网站制作中ul和li的常用属性.doc

网站制作中ul和li的常用属性
在DIV+CSS网站模式中，ul和li是经常会用到的两个标签，常见的控制列表属性：
list-style-type属性
list-style-image属性
list-style-position属性
list-style属性
一、list-style-type属性介绍：
作用：用来定义li项目列表符的样式，其常用样式如下：
none：不使用项目符号；
disc：实心圆；
circle：空心圆；
square：实心方块；
demical：阿拉伯数字；
lower-alpha：小写英文字母；
upper-alpha：大写英文字母；
lower-roman：小写罗马数字；
upper-roman：大写罗马数字。
案例：项目符号前为方块：
Css样式：
Li{list-style-type:square;}
Body内容：
<ui>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
二、list-style-image属性介绍：
作用：定义项目符号的图片样式，可是一个继承属性，常用语法如下：
none：没有替换的图片；
url：要替换图片的路径。
案例：以images中的1. gif作为项目符号定义：
Css样式：
li{list-style-image:url(images/1.gif);}
body内容：
<ul>
<li>图片列表</li>
<li>图片列表</li>
<li>图片列表</li>
</ul>
三、list-style-position属性介绍：
作用：定义项目符号在列表中的显示位置，此属性也可作为一个继承性的属性，常用语法如下：
inside：项目符号放置在文本以内；
outside：项目符号放置在文本以外。
案例一：定义项目符号放在文本以外：
Css样式：
Li{list-style-type:square;
List-style-position:outside;}
Body内容：
<ul>
<li>用List-style-position:outside定义项目符号放在文本以外
（换行以后注意查看项目符号位置）
</li>
<li>定义项目符号放在文本以外</li>
<li>定义项目符号放在文本以外</li>
<ul>
案例一：定义项目符号放在文本以内：
Css样式：
Li{list-style-type:square;
List-style-position: inside;}
Body内容：
<ul>
<li>用List-style-position: inside定义项目符号放在文本以内
（换行以后注意查看项目符号位置）
</li>
<li>定义项目符号放在文本以外</li>
<li>定义项目符号放在文本以外</li>
<ul>
四、list-style属性介绍：
作用：设置li的属性, 此属性也可作为一个继承性的属性,常用语法如下：
li-style:list-style-type/list-style-image/list-style-position
案例：
Css样式：
Li{ list-style:url(images/1.gif)inside;}
Body内容：
<ul>
<li>这里是使用list-style属性的示例。请注意换行以后项目符号的位置。</li>
<li>这里是列表内容</li>
</ul>
文章来源于30建站，转载请注明出处！