21xrx.com
登录
  

HTML 列表

上一章 下一章
无序列表
  • Item
  • Item
  • Item
  • Item
有序列表
  1. Item
  2. Item
  3. Item
  4. Item

HTML 无序列表

<ul>标签定义无序列表,每一项以<li>标签开始

每一项都以项目符号(小的黑色圆)标记.

例子

HTML 无序列表 - 样式属性

可以给无序列表添加样式属性(style),定义标记的样式.

样式描述
list-style-type:disc每一项以实心圆标记(默认)
list-style-type:circle每一项以空心圆标记
list-style-type:square每一项以实心方圆标记
list-style-type:none每一项都没有标记符号

DISC:

CIRCLE:

Square:

None:

HTML 有序列表

有序列表用<ol>标签,每一项用<li>标签.

每一项以数字标记.

例子

HTML 有序列表 - type属性

给有序列表添加一个type属性,定义标记的类型.

type描述
type="1"列表用数字编号(默认)
type="A"列表用大写字母编号
type="a"列表用小写字母编号
type="I"列表用大写的罗马数字编号
type="i"列表用小写的罗马数字编号

数字

大写字母

小写字母

大写的罗马数字

小写的罗马数字

HTML 描述列表

HTML也支持描述列表:

描述列表的每一项都是描述信息.

<dl>标签定义描述列表,<dt>标签定义每一项的标题,<dd>定义每一项的描述信息

例子

HTML 嵌套列表

列表可以嵌套(列表里面还有列表).

例子

    列表项可以包含新的列表,也可以包含其它的HTML元素,像图像和超链接等等.

水平列表

HTML列表可以用CSS来定义不同的风格.

比如说,水平显示列表.

例子

添加一些样式,看起来就像一个菜单了.

本章小结

  • HTML <ul>元素定义无序列表
  • HTML CSS属性定义列表项的样式
  • HTML <ol>元素定义有序列表
  • HTML type属性定义编号类型
  • HTML <li>元素定义列表项
  • HTML <dl>元素定义描述列表
  • HTML <dt>元素定义米描述标题
  • HTML <dd>元素定义描述信息
  • 列表可以嵌套另一个列表
  • 列表项可以包含其它的HTML元素
  • 用CSS的display:inline,列表水平显示
  • 标签描述信息
    <ul>定义无序列表
    <ol>定义有序列表
    <li>定义列表项
    <dl>定义描述列表
    <dt>定义描述列表里的每一项的描述标题
    <dd>定义描述列表里每一项的描述信息
      
      

    评论区

    {{item['qq_nickname']}}
    ()
    回复
    回复
    21技术    www.21xrx.com 备案号:蜀ICP备17043188号-2