最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

3. 有关html与css中的列表教程

HTML语言学习 林雍岷 219浏览

什么是列表

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

3. 有关html与css中的列表教程 html列表

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中的列表教程