zoukankan      html  css  js  c++  java
  • html的列表标签

    列表一般应用在布局中的新闻标题列表和文章标题列表以及网页菜单等。

    例如这个就是一个列表:

    列表标签有几种,分别是有序列表,无序列表,定义列表。

    • 有序列表
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--有序列表-->
        <ol>
            <li>有序列表的第一项</li>
            <li>有序列表的第二项</li>
            <li>有序列表的第三项</li>
        </ol>
    </body>
    </html>
    
    网页效果如下:
    1.有序列表的第一项
    2.有序列表的第二项
    3.有序列表的第三项
    • 无序列表
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!--无序列表-->
        <ul>
            <li>无序列表的第一项</li>
            <li>无序列表的第二项</li>
            <li>无序列表的第三项</li>
        </ul>
    </body>
    </html>
    
    网页效果如下:
    ·有序列表的第一项
    ·有序列表的第二项
    ·有序列表的第三项
    • 定义列表
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <dl>
            <dt>html</dt>
                <dd>html是超文本标记语言,用于声明网页的内容和网页的结构</dd>
        </dl>
    </body>
    </html>
    
    网页效果如下:
    html
           html是超文本标记语言,用于声明网页的内容和网页的结构

    列表中还可以有列表,也就是列表的嵌套。上面的三种列表都可以嵌套。

    下面用定义列表嵌套进行演示:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <dl>
            <dt>html</dt>
                <dd>html是超文本标记语言,用于声明网页的内容和网页的结构</dd>
            <dt>css</dt>
                <dd>css是层叠样式表,用于声明网页的外观和样式</dd>
        </dl>
    </body>
    </html>
    
    网页效果如下:
    html
          html是超文本标记语言,用于声明网页的内容和网页的结构
    css
          css是层叠样式表,用于声明网页的外观和样式

     列表相关样式 
    list-style 去掉列表项的小圆点,比如:list-style:none

  • 相关阅读:
    LeetCode 42. Trapping Rain Water
    LeetCode 209. Minimum Size Subarray Sum
    LeetCode 50. Pow(x, n)
    LeetCode 80. Remove Duplicates from Sorted Array II
    Window10 激活
    Premiere 关键帧缩放
    AE 「酷酷的藤」特效字幕制作方法
    51Talk第一天 培训系列1
    Premiere 视频转场
    Premiere 暴徒生活Thug Life
  • 原文地址:https://www.cnblogs.com/chichung/p/9663366.html
Copyright © 2011-2022 走看看