位置：电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS入门
CSS 基础样式
CSS 高级样式
语法应用：CSS 对齐
当前阅读教程：CSS入门到精通 > 列表项标记的类型 list-style-type属性
阅读(22555525)      收藏       赞(5685)      分享
上一篇： 列表项目标记位置 list-style-position属性 下一篇： 所有列表list-style属性

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

image.png

属性定义及使用说明

list-style-type 属性设置列表项标记的类型。

默认值：

"disc" for <ul> and   "decimal" for <ol>

继承：

yes

版本：

CSS1

JavaScript 语法：

object.style.listStyleType="square"

属性值

值

描述

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

传统的亚美尼亚编号方式

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, 等。（日文片假名）

实例

代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>列表项标记的类型 list-style-typ属性</title>

<!--定义内部样式-->

<style>

     .none {list-style-type: none}

     .disc {list-style-type: disc}

     .circle {list-style-type: circle}

     .square {list-style-type: square}

     .decimal {list-style-type: decimal}

     .decimal-leading-zero {list-style-type: decimal-leading-zero}

     .lower-roman {list-style-type: lower-roman}

     .upper-roman {list-style-type: upper-roman}

     .lower-alpha {list-style-type: lower-alpha}

     .upper-alpha {list-style-type: upper-alpha}

     .lower-greek {list-style-type: lower-greek}

     .lower-latin {list-style-type: lower-latin}

     .upper-latin {list-style-type: upper-latin}

     .hebrew {list-style-type: hebrew}

     .armenian {list-style-type: armenian}

     .georgian {list-style-type: georgian}

     .cjk-ideographic {list-style-type: cjk-ideographic}

     .hiragana {list-style-type: hiragana}

     .katakana {list-style-type: katakana}

     .hiragana-iroha {list-style-type: hiragana-iroha}

     .katakana-iroha {list-style-type: katakana-iroha}

</style>    

</head>

<body>

     <!-- 无标记 -->

     <ul>

     <li>"none" 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 默认。标记是实心圆 -->

     <ul>

     <li>Disc 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 标记是空心圆 -->

     <ul>

     <li>Circle 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 标记是实心方块 -->

     <ul>

     <li>Square 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 标记是数字 -->

     <ul>

     <li>Decimal 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 0开头的数字标记。(01, 02, 03, 等。) -->

     <ul>

     <li>Decimal-leading-zero 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

 

     <!-- 小写罗马数字(i, ii, iii, iv, v, 等。) -->

     <ul>

     <li>Lower-roman 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 大写罗马数字(I, II, III, IV, V, 等。) -->

     <ul>

     <li>Upper-roman 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) -->

     <ul>

     <li>Lower-alpha 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) -->

     <ul>

     <li>Upper-alpha 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 小写希腊字母(alpha, beta, gamma, 等。) -->

     <ul>

     <li>Lower-greek 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 小写拉丁字母(a, b, c, d, e, 等。) -->

     <ul>

     <li>Lower-latin 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 大写拉丁字母(A, B, C, D, E, 等。) -->

     <ul>

     <li>Upper-latin 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 传统的希伯来编号方式 -->

     <ul>

     <li>Hebrew 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 传统的亚美尼亚编号方式  -->

     <ul>

     <li>Armenian 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 传统的乔治亚编号方式(an, ban, gan, 等。) -->

     <ul>

     <li>Georgian 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 简单的表意数字 -->

     <ul>

     <li>Cjk-ideographic 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

 

     <!-- 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名） -->

     <ul>

     <li>Hiragana 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名） -->

     <ul>

     <li>Katakana 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!-- 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） -->

     <ul>

     <li>Hiragana-iroha 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

     <!--标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）  -->

     <ul>

     <li>Katakana-iroha 类型</li>

     <li>茶</li>

     <li>可口可乐</li>

     </ul>

    

</body>

</html>

效果图

小白教程网www.2d5.net

image.png
上一篇： 列表项目标记位置 list-style-position属性 下一篇： 所有列表list-style属性
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ：45157718(微信同号)（备注：毕设）