HTML与CSS之HTML标签(三)

之前有讲到常用标签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  实心方形

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值