Html列表:详细全面的html与css的列表(有序,无序和定义列表)和样式教程

什么是列表

列表是数据或信息展示的一种方式，与任何其它形式相比，为数据或信息展示提供直观的理解，例如，购物清单以列表形式展示，而不是用段落格式将每个商品用逗号分开，则购物清单让人看起来一目了然。

HTML列表

如果你要显示的数据是某物的集合，使用列表让用户理解信息的绝佳选择。html列表有三种分别是有序，无序和定义列表。无序列表始于ul标签，每个列表项始于li。有序列表始于ol标签，每个列表项始于li标签。定义列表始于<dl> 标签开始，每个自定义列表项以 <dt> 开始，每个自定义列表项的定义以 <dd> 开始。

列表类型

在HTML通常有三种表示列表的方式。

有序列表
无序列表
定义列表

什么是有序列表

有序列表是按确定顺序展示项目，例如，当展示的数据或信息需要按顺序显示时才有意义的，用有序列表展示该信息是最佳选择。

例如：食谱制作说明，编写一个简单程序。此类信息必须以有序列表的形式展示，如果不是，则信息将失去其想要的实际含义。有序列表也称为编号列表。

有序列表用 <ol> 标签和<li>标签表示用于列出有序列表中的项目。

有序列表HTML代码

<ol>
    <li>在锅里加水；</li>
    <li>加入糖，茶叶和香料；</li>
    <li>煮沸并煮一分钟左右；</li>
    <li>加入牛奶；</li>
    <li>煮滚，小火煮3-5分钟；</li>
    <li>在茶壶中过滤茶。</li>
</ol>

有序列表效果演示

See the Pen qBEKLjK by Peter (@linyongmin) on CodePen.default

修改有序列表默认值为upper-alpha

有序列表的列表项标记的默认样式为十进制数，我们可以使用列表的列表项标记的CSS的list-style-type属性来更改列表的样式。

list-style-type :upper-alpha;

HTML:

<ol>
    <li>项目清单1</li>
    <li>项目清单2</li>
    <li>项目清单3</li>
</ol>

CSS :

ol {
    list-style-type:upper-alpha;
}

修改有序列表默认值为upper-alpha效果演示

See the Pen customise-list-style-type-upper-alpha by Peter (@linyongmin) on CodePen.default

list-style-type :upper-roman;

HTML :

<ol>
    <li>项目清单1</li>
    <li>项目清单2</li>
    <li>项目清单3</li>
</ol>

CSS :

ol {
    list-style-type:upper-roman
}

修改有序列表默认值为upper-roman效果演示

See the Pen customise-list-style-type-upper-roman by Peter (@linyongmin) on CodePen.default

以上是list-style-type最常用属性值，还有其它许多列表的属性值，在下面列表样式类型部分中介绍。

什么是无序列表

无序列表不一定是按特定顺序排列的项目列表，也称为项目符号列表，例如：购物清单，待办事项清单等。无序列表用 <ul> 标签和<li>标签标记列表项目。

HTML :

<ul>
    <li>衣服</li>
    <li>书</li>
    <li>笔</li>
    <li>手提电脑</li>
    <li>包</li>
</ul>

无序列表效果演示

See the Pen html-unorder-list by Peter (@linyongmin) on CodePen.default

无序列表默认样式

无序列表项标记的默认样式类型是disc。你可以使用无序列表的列表项标记的CSS的list-style-type属性更改列表的样式。

list-style-type: circle;

HTML:

<ul>
    <li>项目清单1</li>
    <li>项目清单2</li>
    <li>项目清单3</li>
</ul>

CSS :

ul {
    list-style-type:circle;
}

修改无序列表默认值为circle效果演示

See the Pen customise-list-style-type-circle by Peter (@linyongmin) on CodePen.default

list-style-type: square

HTML:

<ul>
    <li>项目清单1</li>
    <li>项目清单2</li>
    <li>项目清单3</li>
</ul>

CSS :

ul {
    list-style-type:square;
}

修改无序列表默认值为square效果演示

See the Pen customise-list-style-type-square by Peter (@linyongmin) on CodePen.default

list-style-type: disc

HTML:

<ul>
    <li>项目清单1</li>
    <li>项目清单2</li>
    <li>项目清单3</li>
</ul>

CSS :

ul {
    list-style-type:disc;
}

修改无序列表默认值为disc效果演示

See the Pen customise-list-style-type-disc by Peter (@linyongmin) on CodePen.default

什么是定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合，其中列表项包含两个元素，第一个是术语，第二个是描述，也称为描述列表。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

定义列表样例样例

HTML:

<dl>
  <dt>北京</dt>
  <dd>中国首都</dd>
  <dt>华盛顿</dt>
  <dd>美国首都</dd>
</dl>

定义列表效果演示

See the Pen html-definition-lists by Peter (@linyongmin) on CodePen.default

什么是嵌套列表

有时候我们需要在列表项中展示列表项，像这种列表中用列表的结构展示叫嵌套列表。

嵌套列表样例演示

HTML:

<ul>
  <li>第一章
    <ol>
      <li>第一节</li>
      <li>第二部分</li>
      <li>第三部分</li>
      <li>第四部分</li>
    </ol>
  </li>
  <li>第二章
    <ul>
      <li>第一节</li>
      <li>第二部分</li>
      <li>第三部分</li>
      <li>第四部分</li>
    </ul>
  </li>
  <li>第三章</li>
  <li>第四章</li>
</ul>

嵌套列表效果演示

See the Pen html-nested-lists by Peter (@linyongmin) on CodePen.default

设置列表样式

我们可以使用以下三个CSS属性来设置列表样式。

list-style-type

本文开始已经做过解释，列表样式类型（ list-style-type ）是CSS属性，用于对列表项符号进行样式设置。

这个属性有以下这些值：

disc
square
circle
decimal
lower-alpha
lower-roman
lower-latin
lower-greek
upper-alpha
upper-roman
upper-latin etc…

这是list-style-type属性值的完整列表。

list-style-image

list-style-image用于将图像设置为列表符号。此属性有两个值，一个是image的url，第二个是none。

HTML:

<ul>
    <li>项目清单1</li>
    <li>项目清单2</li>
    <li>项目清单3</li>
    <li>项目清单4</li>
    <li>项目清单5</li>
</ul>

CSS :

ul {
list-style-image:url('https://interactive-examples.mdn.mozilla.net/media/examples/rocket.svg');
}

修改列表符号为图像效果演示

See the Pen set-up-list-style-image by Peter (@linyongmin) on CodePen.default

list-style-image值为none效果

ul {
list-style-image:none;
}

list-style-image设置为none显示默认的列表符号。

See the Pen set-up-list-style-image-none by Peter (@linyongmin) on CodePen.default

list-style-position

list-style-position是CSS属性设置列表项符号相对列表项的位置，列表样式位置具有两个值： inside和outside。

属性值：inside

列表样式符号是列表项内容中的第一个元素。

HTML:

<ul>
    <li>项目清单1</li>
    <li>项目清单2</li>
    <li>项目清单3</li>
    <li>项目清单4</li>
    <li>项目清单5</li>
</ul>

CSS :

ul {
    list-style-position:inside;
}

li {
  background-color:red;
}

修改列表符号位置为inside效果演示

See the Pen set-up-list-style-position-inside by Peter (@linyongmin) on CodePen.default

属性值： outside

列表项符号在列表框之外。

HTML:

<ul>
    <li>项目清单1</li>
    <li>项目清单2</li>
    <li>项目清单3</li>
    <li>项目清单4</li>
</ul>

CSS :

ul {
    list-style-position:outside;
}

li {
  background-color:red;
}

修改列表符号位置为outside效果演示

See the Pen set-up-list-style-position-outside by Peter (@linyongmin) on CodePen.default

关于列表颜色

现在是时候学习修改列表中的颜色了，无序列表项和符号添加彩色。

第一种情况：列表项和列表项符号的颜色相同

HTML:

<ul>
    <li>项目清单1</li>
    <li>项目清单2</li>
    <li>项目清单3</li>
    <li>项目清单4</li>
<ul>

CSS :

ul {
    color:red;
}

修改无序列表颜色效果演示

See the Pen customise-list-colorr by Peter (@linyongmin) on CodePen.default

第二种情况：无序列表项和列表项符号的颜色不同

HTML:

<ul>
    <li>项目清单1</li>
    <li>项目清单2</li>
    <li>项目清单3</li>
    <li>项目清单4</li>
<ul>

CSS :

ul {
    list-style-type:none;
    color:blue;
} 
li::before {
  content: "\2022"; 
  color: red;
  display: inline-block; 
  width: 1rem;
  margin-left: -1rem;    
}

修改无序列表项和列表项符号效果演示

See the Pen customise-list-item-mark-color by Peter (@linyongmin) on CodePen.default

编号列表添加颜色，现在是时候给数字列表上色了。

第一种情况：列表项和列表项符号的颜色相同

HTML:

<ol>
    <li>项目清单1</li>
    <li>项目清单2</li>
    <li>项目清单3</li>
    <li>项目清单4</li>
</ol>

CSS :

ol {
 color: red;
}

修改有序列表颜色效果演示

See the Pen customise-order-list-color by Peter (@linyongmin) on CodePen.default

第二种情况：有序列表项和列表项符号的颜色不同

HTML:

<ol>
    <li>项目清单1</li>
    <li>项目清单2</li>
    <li>项目清单3</li>
    <li>项目清单4</li>
</ol>

CSS :

ol {
  list-style-type:none;
  color:green;
  counter-reset:li
}

li::before{
  content: counter(li)'.'; 
  color: red;
  display: inline-block; 
  width: 1em;
  margin-left: -1.5em;
  margin-right: 0.5em; 
  text-align: right; 
  direction: ltr
}

li {counter-increment: li}

修改有序列表项和列表项符号效果演示

See the Pen customise-order-list-item-mark-color by Peter (@linyongmin) on CodePen.default

这是一篇有关html与css中的列表教程，详细介绍列表类型，列表样式，定义列表。如果关于html列表和样式的问题，欢迎联系博主。

转载请注明：林雍岷 » 3. 有关html与css中的列表教程

什么是列表

HTML列表

列表类型

什么是有序列表

有序列表HTML代码

有序列表效果演示

修改有序列表默认值为upper-alpha

修改有序列表默认值为upper-alpha效果演示

修改有序列表默认值为upper-roman效果演示

什么是无序列表

无序列表效果演示

无序列表默认样式

修改无序列表默认值为circle效果演示

修改无序列表默认值为square效果演示

修改无序列表默认值为disc效果演示

什么是定义列表

定义列表样例样例

定义列表效果演示

什么是嵌套列表

嵌套列表样例演示

嵌套列表效果演示

设置列表样式

关于列表颜色

与本文相关的文章