列表

<!DOCTYPE html>
<html>
  <head&gt;
    <meta charset="utf-8" /&gt;
    <title></title>
    <style type="text/css">
      /*
			 * 去掉项目符号
			 */
      ul {
        list-style: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>西门大官人</li>
      <li>柴大官人</li>
      <li>许大官人</li>
      <li>唐僧大官人</li>
    </ul>

    <ol type="I">
      <li>结构</li>
      <li>表现</li>
      <li>行为</li>
    </ol>

    <p>菜谱</p>
    <ul>
      <li>
        鱼香肉丝
        <ol>
          <li></li>
          <li></li>
          <li>肉丝</li>
        </ol>
      </li>
      <li>
        宫保鸡丁
        <ul>
          <li>宫保</li>
          <li>鸡丁</li>
        </ul>
      </li>
      <li>青椒肉丝</li>
    </ul>

    <dl>
      <dt>武松</dt>
      <dd>景阳冈打虎英雄,战斗力99</dd>
      <dd>后打死西门庆,投奔梁山</dd>
      <dt>武大</dt>
      <dd>著名餐饮企业家,战斗力0</dd>
    </dl>
  </body>
</html>

请添加图片描述

1. 列表说明

  1. 列表就相当于去超市购物时的那个购物清单
  2. 在 HTML 中也可以创建列表,在网页中一共有三种列表:
  1. 去掉项目符号
<style type="text/css">
  ul {
    list-style: none;
  }
</style>

2. 无序列

  1. 使用 ul 标签创建一个序列
  2. 使用 li 在 ul 中创建一个一个的列表项,一个 li 就是一个列表项
  3. 通过 type 属性可以修改序列表的项目符号
  4. type 属性可选值

1.注意:默认项目符号我们一般都不使用!!
2.如果需要设置项目符号,则可以采用为 li 设置背景图片方式来设置
3.ul 和 li 都是块元素

<ul>
  <li>西门大官人</li>
  <li>柴大官人</li>
  <li>许大官人</li>
  <li>唐僧大官人</li>
</ul>

3. 有序列

  1. 序列表和无序列表类似,只不过它使用 ol 来代替 ul
  2. 有序列表使用有序的序号作为项目符号
  3. type 属性可以指定序号类型
  4. type 属性可选值

ol 也是块元素

<ol type="I">
  <li>结构</li>
  <li>表现</li>
  <li>行为</li>
</ol>

4. 列表嵌套

  1. 列表之间都是可以互相嵌套的,可以在无序列表中放个有序列表
  2. 可以有序表中一个无序列表
<p>菜谱</p>
<ul>
  <li>
    鱼香肉丝
    <ol>
      <li></li>
      <li></li>
      <li>肉丝</li>
    </ol>
  </li>
  <li>
    宫保鸡丁
    <ul>
      <li>宫保</li>
      <li>鸡丁</li>
    </ul>
  </li>
  <li>青椒肉丝</li>
</ul>

5. 定义列表

  1. 定义列表用来对一些词汇内容进行定义
  2. 使用 dl 来创建一个定义列表
  3. dl 中有两个标签

同样 dl 和 ul 和 ol 之间都可以互相嵌套

<dl>
  <dt>武松</dt>
  <dd>景阳冈打虎英雄,战斗力99</dd>
  <dd>后打死西门庆,投奔梁山</dd>
  <dt>武大</dt>
  <dd>著名餐饮企业家,战斗力0</dd>
</dl>

原文地址:https://blog.csdn.net/weixin_64933233/article/details/127679534

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_22168.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注