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

  • 相关阅读:
    Android动态加载jar/dex
    aiXcoder安装&使用
    笨办法学python 13题:pycharm 运行
    python2.7安装numpy、pandas、matplotlib库
    win10在文件夹下打开powershell
    SpringCloud:(一)服务注册与发现
    pycharm2018.2安装
    Python2.7安装&配置环境变量
    centos7配置NTP时间服务器
    centos7:Zookeeper集群安装
  • 原文地址:https://www.cnblogs.com/chichung/p/9663366.html
Copyright © 2011-2022 走看看