zoukankan      html  css  js  c++  java
  • 范仁义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;

     
  • 相关阅读:
    JavaSE 基础 第51节 定义自己的异常
    JavaSE 基础 第50节 Java中的异常链
    JavaSE 基础 第49节 手动抛出异常
    JavaSE 基础 第48节 Java中的异常声明
    JavaSE 基础 第47节 获取异常信息
    JavaSE 基础 第46节 异常的分类
    JavaSE 基础 第45节Java异常快速入门
    JavaSE 基础 第44节 引用外部类的对象
    JavaSE 基础 第43节 静态内部类
    通用爬虫
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12013576.html
Copyright © 2011-2022 走看看