CSS_列表

最新推荐文章于 2021-02-06 15:21:20 发布

twilight0402

最新推荐文章于 2021-02-06 15:21:20 发布

阅读量238

点赞数

分类专栏： CSS 文章标签： css square class html 列表

本文链接：https://blog.csdn.net/twilight_karl/article/details/54730634

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

list-style-type

改变列表项的标志。以下的所有的标志类型：

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 小写英文字母(a, b, c, d, e, 等。)
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, 等。（日文片假名）

<html>
    <head>
        <style type="text/css">
            .disc{
                list-style-type:disc;
            }
            .circle{
                list-style-type:circle;
            }
            .square{
                list-style-type:square;
            }
            .decimal{
                list-style-type:decimal;
            }
            .lower-roman{
                list-style-type:lower-roman;
            }
            .lower-alpha{
                list-style-type:lower-alpha;
            }
            .lower-greek{
                list-style-type:lower-greek;
            }
            .lower-latin{
                list-style-type:lower-latin;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="disc">disc 实心圆，默认</li>
            <li class="circle">circle 空心圆</li>
            <li class="square">square 方块</li>
            <li class="decimal">decimal 数字</li>
            <li class="lower-roman">lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。) </li>
            <li class="lower-alpha">lower-alpha 小写英文字母(a, b, c, d, e, 等。)  </li>
            <li class="lower-greek">lower-greek 小写希腊字母(alpha, beta, gamma, 等。) </li>
            <li class="lower-latin">lower-latin 小写拉丁字母(a, b, c, d, e, 等。) </li>
        </ul>
    </body>
</html>

list-style-position

inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

<html>
    <head>
        <style type="text/css">
            .inside{
                list-style-position:inside;
            }
            .outside{
                list-style-position:outside;
            }
        </style>
    </head>
    <body>
    <ul class="inside">
        <li>inside inside inside</li>
        <li>inside inside inside</li>
        <li>inside inside inside</li>
    </ul>

    <ul>
        <li>normal normal normal</li>
        <li>normal normal normal</li>
        <li>normal normal normal</li>
    </ul>

    <ul class="outside">
        <li>outside outside outside</li>
        <li>outside outside outside</li>
        <li>outside outside outside</li>
    </ul>

    </body>
</html>

列表位置

list-style-image

以图片作为标志

list-style-image:url(url);

none 无
inherit 继承

<html>
    <head>
        <style type="text/css">
            .image{
                list-style-image:url("素材/五角星.png");
            }
        </style>
    </head>
    <body>

    <ul class="image">
        <li>图片 图片 图片 </li>
        <li>图片 图片 图片 </li>
        <li>图片 图片 图片 </li>
    </ul>

    </body>
</html>

list-style

简写，将所有属性按照一定顺序写在list-style后，可以不设置某个值，未设置的值将采用默认值。

li {list-style : url(example.gif) square inside}

twilight0402

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS_列表

list-style-type改变列表项的标志。以下的所有的标志类型：none 无标记 disc 实心圆，默认 circle 空心圆 square 方块 decimal 数字 decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。) lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。) upper-roman 大写罗
复制链接

扫一扫