• 范仁义html+css课程---5、列表


    范仁义html+css课程---5、列表

    一、总结

    一句话总结:

    学会基本的使用有序列表、无序列表、定义列表,设置样式的话尽量通过css而不是属性

    1、无序列表基本形式(实例)?

    ul标签包裹li标签:<ul> <li></li> </ul>
    <ul>
        <li>cpb粉底</li>
        <li>雪花秀气垫BB</li>
        <li>iope气垫BB</li>
    </ul>

    2、无序列表的常用属性有哪些?

    type属性:有三个值:1.disc(默认值)(实心圆);2.circle(空心圆);3.square(实心方块)

    3、有序列表基本形式(实例)?

    ol标签包裹li标签:<ol> <li></li> </ol>
    <ol>
        <li>第一步:清洗面部</li>
        <li>第二部:涂爽肤水</li>
        <li>第三部:涂乳液</li>
        <li>第四部:涂防晒</li>
    </ol>

    4、有序列表的常用属性有哪些?

    type属性:可以是整数,大小写英文字母,大小写罗马字母
    start属性:定义列表的开始序号
    reversed属性:定义列表倒序排列

    5、自定义列表基本形式(实例)?

    dl标签包裹dt和dd标签,dt是概念,dd是相应的解释和描述:<dl> <dt></dt> <dd></dd> </dl>
    <dl>
        <dt>cpb</dt>
        <dd>日本高端护肤品品牌</dd>
        <dt>雪花秀</dt>
        <dd>韩国中高端护肤品品牌</dd>
    </dl>

    二、列表基础知识

    课程对应的视频地址:5、列表
    https://www.fanrenyi.com/video/2/10

    1.无序列表的基本格式

    ul(unorder line)标签里面放li标签就好了,每一项就是一个li(LineItem)标签

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

    2.无序列表的type属性

    无序列表的type属性有三个值:1.disc(默认值);2.circle;3.square

    分别对应

    • 实心圆
    • 空心圆
    • 实心方块

    这里演示的就是ul中type为circle的效果

    css中可以设置更多更加复杂的效果,比如前面加小图片

    3.有序列表的基本格式


    ol(order line)标签里面放li标签就好了,每一项就是一个li(LineItem)标签

    <ol>
      <li></li>
      <li></li>
    </ol>


    4.有序列表的type属性

    1. 整数(默认值);
    2. 大(小)写字母ABC...
    3. 大小写的罗马字母:i ii .../I II III

    这里设置的ol的type为大写字母A

    li标签里面放图片链接都是可以的,元素的嵌套

    5.有序列表的start属性


    定义列表的开始序号,比如第一项不是数字1,而是从10开始.......

    就把ol的start属性设置成不同就可以了

    6.有序列表的reversed属性

    reversed属性的值为reversed或者true表示倒序排列

    比如

    reversed="reversed"

    7.有序列表的value属性

    定义某个单个列表项的序号.......

    1. 可以通过value属性来设置不连续列表
    2. 我们之前都是对ol操作,这里是对li操作
    3. 因为要设置每一项,所以可以每一项任意设置
    4. 比如说之前是连续的123,这里却跳到了10
    5. 做法是把跳的那一项li的value属性单独设置成10就好了
    6. 设置之后,后面的值会在这个设置的值上面递增

    8.自定义列表


    自定义列表项组成:由 dl定义列表;dt定义列表项目;dd定义列表内容;

    <dl>

      <dt>列表项目一</dt>

      <dd>列表项目一的内容</dd>

      <dt>列表项目二</dt>

      <dd>列表项目二的内容</dd>

    </dl>

    列表项目一
        列表项目一的内容
    列表项目二
        列表项目二的内容

    8、列表嵌套

    列表支持嵌套,比如

    <ol type="I" start="5" reversed="reversed">
        <li>第一步:清洗面部</li>
        <li>第二部:涂爽肤水</li>
        <li>第三部:涂乳液</li>
        <li>第四部:涂防晒</li>
        <ol >
            <li>先涂粉底再涂防晒</li>
            <li>先涂防晒再涂粉底</li>
        </ol>
    </ol>

    9、列表在实际开发中的常见应用

    长做导航,以及一些列表内容(比如课程章节对应的具体课程)

    三、有序列表、无序列表、定义列表 实例

    有序列表通常用来表示内容之间的顺序或者是重要性关系,每一个列表都分为多个子项,每一个子项都有相应的编号。

    有序列表,列表项包含在<li></li>标签对中,有序列表以<ol></ol>定义,项目前有数字或者字母缩进

    无序列表仅仅用于表示内容之间存在有并列关系,也是分为多个子项,但是子项之前没有相应的编号,只有一个原点用于标识。

    无序列表,列表项包含在<li></li>标签对中,无序列表以<ul></ul>定义,项目前有符号缩进


    自定列表,列表项包含在<dt></dt>标签对中,<dd></dd>与定义项对应的每个定义,自定义列表以<dl></dl>定义,项目前有符号缩进

    定义列表通常用于表示名词或者是概念的定义,每一个子项有两个部分组成,第一部分是名词或者是概念,第二部分是相应的解释和描述。


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <!-- ol:order list-->
    <!-- type 列表排序的类型共五种:默认阿拉伯数字,“a”小写字母,"A"大写字母,"I"大写罗马数字排序,"i"小写罗马数字排序-->
    <!-- start 排序的起始位置,如果type="a" start="5" 那么从字母e开始-->
    <!-- reversed="true" 倒序排列-->
    <ol type="I" start="5" reversed="reversed">
        <li>第一步:清洗面部</li>
        <li>第二部:涂爽肤水</li>
        <li>第三部:涂乳液</li>
        <li>第四部:涂防晒</li>
        <ol >
            <li>先涂粉底再涂防晒</li>
            <li>先涂防晒再涂粉底</li>
        </ol>
    </ol>
    <!-- 无序列表 unorder list 默认列表项前是小圆点-->
    <ul>
        <li>cpb粉底</li>
        <li>雪花秀气垫BB</li>
        <li>iope气垫BB</li>
    </ul>
    
    <!-- 定义列表:表达对名词或概念的解释或者描述-->
    <dl>
        <dt>cpb</dt>
        <dd>日本高端护肤品品牌</dd>
        <dt>雪花秀</dt>
        <dd>韩国中高端护肤品品牌</dd>
    </dl>
    </body>
    </html>

    效果图:

    四、参考资料

    1、ol标签的属性

    2、css列表样式

    一、 list-style-type:disc(默认for ul,实心圆);decimal(默认for ol ,数字);none(无标记);circle(空心圆);square(实心方块);decimal-leading-zero(01,02等以0开头的数字);lower-roman(小写罗马数字);upper-roman(大写罗马数字);lower-alpha(小写英文字母);upper-alpha(大写英文字母);

    二、list-style-position:outside(默认);inside;inherit;

    三、list-style-image:none(默认);url(“img.png”);inherit;

     
  • 相关阅读:
    spring Pom jar包版本管理
    Liunx 命令整理
    Centos&Nginx
    docker-compose
    .net core MemoryCache缓存
    .net core 程序集帮助类
    .NET CORE API Swagger
    Spring Boot (1)
    SQL Server生成实体
    1、认识和安装MongoDB
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12013576.html
Copyright © 2020-2023  润新知