您的位置 首页 > 数码极客

天猫网站的导航性如何

列表分为无序列表、有序列表 以及定义列表。下面开始一个个介绍吧!

无序列表。

无序列表开始于<ul>标签,每个列表项开始于<li>,同时他还拥有一个type属性:

属性如下

disc

实心圆

circle

空心圆

square

方块符号

代码示例

网页效果

除了这种样式还可以进行列表嵌套。

代码如下

网页效果

当然属性也是可以设置的,之前文章也有讲属性是如何设置的。

这里就不给小伙伴们一一演示了。

有序列表:

有序列表开始于<ol>标签,每个列表项开始于<li>。

同时有序列表也有type属性。

属性如下
1数字序列号
A大写字母序列号
a小写字母序列号
lI II III 序列号
i
i ii iii 序列号

代码如下

网页效果

当然有序列表也是可以嵌套的,原理同无序列表一样,这边就不一一给大家做演示了。

定义列表

自定义列表以 <dl> 标签开始。

每个自定义列表项以 <dt> 开始。

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

代码如下

网页效果

说了那么多,看起来就像一个标题而已,列表到底有什么作用呢?

其实我们浏览网页时的导航栏就是用列表做的。

像百度新闻的页面

天猫商城页面

这些导航栏都是利用列表做出来的。

当然想要做出这么炫酷的导航栏可不是一下就可以得呦!

还需要一步步的努力待我们学习完css样式之后,我们就可以尝试做自己的主页了!我的主页我做主,想怎么搞就怎么搞!

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“天猫网站的导航性如何”边界阅读