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

  • 相关阅读:
    CentOS上svn checkout时报错SSL handshake failed: SSL error: Key usage violation in certificate has been det
    SnmpTools配置
    Django下载文件
    Cacti的使用
    RRDtool 安装和使用
    SNMP 安装及使用
    Openstack CentOS6.5 ALL IN ONE 安装
    mysqladmin -u root password
    VS2013打包程序步骤
    python中使用rabbitmq消息中间件
  • 原文地址:https://www.cnblogs.com/chichung/p/9663366.html
Copyright © 2011-2022 走看看