之前有讲到常用标签input、p、a、表单、表格等,还要补充另外一种,那就是列表。列表在平时用的还是比较多的一种,最常用与导航栏。那下面我们一起来看看吧。
列表分为有序列表、无序列表、定义列表
有序列表(order list)
有序列表是一列项目,列表项目使用数字进行标记。
有序列表始于 < ol> 标签。每个列表项始于 < li> 标签。
<ol>
<li>首页</li>
<li>关于我的</li>
</ol>
效果图如下:
无序列表(unorder list)
无序列表是一列项目,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
有序列表始于 < ul> 签。每个列表项始于 < li> 标签。
<ul>
<li>首页</li>
<li>关于我的</li>
</ul>
效果图如下:
定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
有序列表始于 < dl> 签。每个列表项始于 < li> 标签。
<dl>
<dt>我的消息</dt>
<dd>关注</dd>
<dd>粉丝</dd>
</dl>
效果图如下:
在平时我们使用到无序列表和有序列表的大多数时候并不需要它们前面的标记样式,那该如何取消li的默认样式呢?
只需要在对应的列表css样式中编写如下代码:
li{
/* 第一种 */
list-style: none;
/* 第二种 */
list-style-type: none;
}
li的样式list-style-type的属性值还有:
none 去掉列表符号
disc 实心圆
circle 空心圆
decimal 数字
square 实心方形