CSSUl （列表样式）
值
描述none
⽆标记disc
默认。标记是实⼼圆circle
标记是空⼼圆square
标记是实⼼⽅块decimal
标记是数字decimal-leading-
zero
0开头的数字标记。(01, 02, 03, 等)lower-roman
⼩写罗马数字(i, ii, iii, iv, v, 等）upper-roman
⼤写罗马数字(I, II, III, IV, V, 等)lower-alpha
⼩写英⽂字母The marker is lower-alpha (a, b, c, d, e, 等)upper-alpha
⼤写英⽂字母The marker is upper-alpha (A, B, C, D, E, 等)lower-greek
⼩写希腊字母(alpha, beta, gamma, 等)lower-latin
⼩写拉丁字母(a, b, c, d, e, 等)upper-latin
⼤写拉丁字母(A, B, C, D, E, 等)hebrew
传统的希伯来编号⽅式armenian 传统的亚美尼亚编号⽅式
CSS Ul （列表样式）CSS列表属性作⽤如下：设置不同的列表项标记为有序列表设置不同的列表项标记为⽆序列表
设置列表项标记为图像
⼀、列表在HTML中，有两种类型的列表：⽆序列表 - 列表项标记⽤特殊图形（如⼩⿊点、⼩⽅框等）
有序列表 - 列表项的标记有数字或字母
使⽤CSS，可以列出进⼀步的样式，并可⽤图像作列表项标记。
⼆、不同的列表项标记
list-style-type属性指定列表项标记的类型是：
html ul标签ul.a {list-style-type : circle ;} /*⽆序，空⼼圆圈*/
ul.b {list-style-type : square ;} /*⽆序，实现四⽅形*/
ol.c {list-style-type : upper-roman ;} /*有序，罗马数字排序*/
ol.d {list-style-type : lower-alpha ;} /*有序，⼩写字母排序*/
list-style-type属性值：
georgian传统的乔治亚编号⽅式(an, ban, gan, 等)
cjk-ideographic简单的表意数字
hiragana标记是：a, i, u, e, o, ka, ki, 等。（⽇⽂⽚假名）
katakana标记是：A, I, U, E, O, KA, KI, 等。（⽇⽂⽚假名）
hiragana-iroha标记是：i, ro, ha, ni, ho, he, to, 等。（⽇⽂⽚假名）
katakana-iroha标记是：I, RO, HA, NI, HO, HE, TO, 等。（⽇⽂⽚假名）
三、作为列表项标记的图像
list-style-image 要指定列表项标记的图像，使⽤列表样式图像属性：
ul
{
list-style-image: url('sqpurple.gif');
}
上⾯的例⼦在所有浏览器中显⽰并不相同，IE和Opera显⽰图像标记⽐⽕狐，Chrome和Safari更⾼⼀点点。如果你想在所有的浏览器放置同样的形象标志，就应使⽤浏览器兼容性解决⽅案，过程如下
浏览器兼容性解决⽅案：
同样在所有的浏览器，下⾯的例⼦会显⽰的图像标记：
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
例⼦解释：
ul:
设置列表样式类型为没有删除列表项标记
设置填充和边距0px（浏览器兼容性）
ul中所有li:
设置图像的URL，并设置它只显⽰⼀次（⽆重复）
您需要的定位图像位置（左0px和上下5px）
⽤padding-left属性把⽂本置于列表中
四、相对内容绘制列表标记
list-style-position属性指⽰如何相对于对象的内容绘制列表项标记，属性值：
效果：
五、列表 -简写属性
在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。
为列表使⽤简写属性，列表样式属性设置如下：
ul
{
list-style: square url("sqpurple.gif");
}
可以按顺序设置如下属性：
list-style-type
list-style-position
list-style-image
如果上述值丢失⼀个，其余仍在指定的顺序，就没关系。六、所有的CSS列表属性
七、⽰例代码
/*⽆序列表*/
ul.a {list-style-type:circle;} /*⽆序，空⼼圆“○”*/
ul.b {list-style-type:disc;} /*⽆序，实⼼圆“●”*/
ul.c {list-style-type:square;}/*⽆序，实⼼正⽅形“■”*/
/*有序列表*/
ol.d {list-style-type:armenian;} /*有序，传统的亚美尼亚数字*/
ol.e {list-style-type:cjk-ideographic;} /*有序，浅⽩的表意数字*/
ol.f {list-style-type:decimal;} /*有序，数字1、2、3*/
ol.g {list-style-type:decimal-leading-zero;} /*有序，数字01、02、03*/ ol.h {list-style-type:georgian;} /*有序，传统的乔治数字*/
ol.i {list-style-type:hebrew;} /*有序，传统的希伯莱数字*/
ol.j {list-style-type:hiragana;} /*有序，⽇⽂平假名字符*/
ol.k {list-style-type:hiragana-iroha;} /*有序，⽇⽂平假名序号*/
ol.l {list-style-type:katakana;} /*有序，⽇⽂⽚假名字符*/
ol.m {list-style-type:katakana-iroha;} /*有序，⽇⽂⽚假名序号*/
ol.n {list-style-type:lower-alpha;} /*有序，⼩写英⽂字母a、b、c……*/ ol.o {list-style-type:lower-greek;} /*有序，基本的希腊⼩写字母*/
ol.p {list-style-type:lower-latin;} /*有序，⼩写拉丁字母*/
ol.q {list-style-type:lower-roman;} /*有序，⼩写罗马数字i、ii、iii……*/ ol.r {list-style-type:upper-alpha;} /*有序，⼤写英⽂字母A、B、C……*/
ol.s {list-style-type:upper-latin;} /*有序，⼤写拉丁字母*/
ol.t {list-style-type:upper-roman;} /*有序，⼤写罗马数字I、II、III……*/
ol.u {list-style-type:none;}/*不使⽤项⽬符号*/
ol.v {list-style-type:inherit;} /*继承*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。