HTML基础学习-7- 列表学习3-CSDN博客

本文链接：https://blog.csdn.net/u011523180/article/details/73065303

HTML基础学习-7- 列表学习3

<!DOCTYPE html>


<!--

有序列表  无序列表
list-style
    none  无标记样式
    disc 默认样式 标记实心圆
    circle 空心圆
    square 实心方块
    decimal 数字
    decimal-leading-zero 0开头的数字标记
    lower-roman  小写罗马
    upper-roman 大写罗马
    lower-alpha 小写英文

    upper-alpha  大写英文
    lower-greek 小写希腊
    lower-latin 小写拉丁
    upper-latin 大写拉丁
    hebrew   传统希伯来
    armenian  亚美尼亚
    cjk-ideographic 简单表意数字
    georgian 乔治亚
    hiragana 日文片假名
    katakana
    hiragana-iroha
    katakana-iroha

list-style-position  标记位置
     inside   列表项目标记放置在  文本以内，且环绕文本根据 标记对齐
     outside  默认值，保持标记位于文本的左侧，列表项目标记位置位于 文本以外
                且环绕文本不根据标记对齐
    inherit 继承父类元素list-style-position 属性


list-style-image  设置图像列表标记   与第一个属性 互斥关系，显示其中一个


        URL 图像路径
        none
        inherit



    list-style-position:inside;
   list-style-position:outside;

    list-style:square inside url(img/scenery.jpg);  当图片不存在情况就会用 square属性来代替
-->
<head>

<title>列表相关属性</title>
<meta charset="utf-8">
<style type="text/css"
>
/*
    ul{
        width:10px;
        height:10px;
    }

    ul.inside{
    list-style-position:inside;
      list-style-image:url(img/scenery.jpg);
    }
    ol.outside{
        list-style-image:url(img/scenery.jpg);
        list-style-position:outside;
    }
    */
    ul{
        list-style:square inside url(img/scenery.jpg);
    }


</style>
</head>

<body>
<p>无序列表</p>
    <ul class="inside">
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
            <ul>
                <li> 嵌套列表1</li>
                <li> 嵌套列表2</li>
                <li> 嵌套列表3</li>
                <li> 嵌套列表4</li>
            </ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>

    </ul>
    <p>有序列表</p>
    <ol class="outside">
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>

    </ol>



</body>

</html>