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

来源：互联网发布：体育场馆播放软件编辑：程序博客网时间：2024/05/07 14:52

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-irohalist-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>

跟随视频学习，手写记录自己学习过程中的点点滴滴，一起加油吧。

阅读全文

0 0