列表分为无序列表、有序列表 以及定义列表。下面开始一个个介绍吧!
无序列表。
无序列表开始于<ul>标签,每个列表项开始于<li>,同时他还拥有一个type属性:
属性如下 | |
disc | 实心圆 |
circle | 空心圆 |
square | 方块符号 |
代码示例
网页效果
除了这种样式还可以进行列表嵌套。
代码如下
网页效果
当然属性也是可以设置的,之前文章也有讲属性是如何设置的。
这里就不给小伙伴们一一演示了。
有序列表:
有序列表开始于<ol>标签,每个列表项开始于<li>。
同时有序列表也有type属性。
属性如下 | |
1 | 数字序列号 |
A | 大写字母序列号 |
a | 小写字母序列号 |
l | I II III 序列号 |
i | i ii iii 序列号 |
代码如下
网页效果
当然有序列表也是可以嵌套的,原理同无序列表一样,这边就不一一给大家做演示了。
定义列表
自定义列表以 <dl> 标签开始。
每个自定义列表项以 <dt> 开始。
每个自定义列表项的定义以 <dd> 开始。
代码如下
网页效果
说了那么多,看起来就像一个标题而已,列表到底有什么作用呢?
其实我们浏览网页时的导航栏就是用列表做的。
像百度新闻的页面
天猫商城页面
这些导航栏都是利用列表做出来的。
当然想要做出这么炫酷的导航栏可不是一下就可以得呦!
还需要一步步的努力待我们学习完css样式之后,我们就可以尝试做自己的主页了!我的主页我做主,想怎么搞就怎么搞!