解密国内大型网站导航栏制作原理

小伙伴们，晚上好呀！

上期苏莱介绍的HTML表单标签，大家掌握的怎么样了呢？今天苏莱要跟大家分享的是，网站导航栏的实现原理。小伙伴们不要被它高大上的名头吓到了哦~

因为任何导航栏的实现都离不开我们今天即将学习的HTML列表标签。现在我们来看一下，即将用HTML列表标签写出的效果图是怎样的吧！

在写出上述效果之前，先来给大家介绍一下，基本的列表元素有哪些吧？

无序列表

标签定义无序列表，列表项默认使用粗体圆点进行标记。无序列表始于

标签，每个列表项始于

标签。开发中，无序列表一般应用于导航栏的制作。

首页

女装

母婴

美妆

有序列表

标签定义有序列表，列表项默认使用数字进行标记。有序列表始于标签，每个列表项始于

标签。

国际

男装

居家

鞋包

自定义列表

自定义列表以 标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。

水果

桃子

蔬菜

白菜

掌握好上述标签，我们就来分析一下，今天要写的导航栏的布局吧~

1）最外层：一个无序列表；

2）里层：八个列表项；

3）最里层：每个列表项中放置一个超链接。

现在我们将这段文字翻译成HTML代码，

首页女装母婴美妆国际男装居家鞋包运动生活更多

写完后效果是酱紫滴~

很丑是不是？没关系，我们来将它美化一下。

1）首先，将超链接的默认样式去掉；

2）其次，将无序列表的默认样式（小圆点）去掉；

3）最后，将列表项依次向左浮动，水平排列（注意要清除li浮动后产生的副作用）。

接下来，我们将这段文字用CSS翻译一下，

写完后，导航栏变成了酱紫~

也许，关于浮动的知识点，大家还不是很了解。但是没关系，在分享到CSS章节的时候，苏莱会将CSS浮动单独用一篇文章来介绍的，所以，小伙伴们不要为此担心啦~

接下来，苏莱继续为大家介绍一下怎么通过CSS来修改超链接与无序列表的默认样式吧！

首先，我们需要了解两个CSS属性

text-decoration 属性

text-decoration 属性允许对文本设置某种效果，如加下划线，或去掉默认样式的下划线。以下是它常用到的属性值，

none

默认样式，定义标准的文本

underline

定义文本下的一条线

overline

定义文本上的一条线

inherit

继承自父元素内 text-decoration 属性的值

list-style-type 属性

list-style-type 属性用于设置不同的列表样式。以下是它常用到的属性值，

none

无标记

disc

默认样式，实心圆

circle

空心圆

square

实心方圈

decimal

数字

decimal-leading-zero

0开头的数字

lower-roman

小写罗马数字

upper-roman

大写罗马数字

lower-alpha

小写英文字母

upper-alpha

大写英文字母

其次，我们再复习一个之前说过的CSS属性

color 属性

color 属性用于为不同元素设置文本颜色。常用的四类属性值，

color_name

颜色值为颜色名称的颜色（如：red）

hex_number

颜色值为十六进制值的颜色（如：#ff0037）

rgb_number

颜色值为 rgb 代码的颜色（如：rgb(0,0,0)）

inherit

从父元素继承颜色

今天的内容就到这啦~

小伙伴们，回去多多练习吧！

下期预告

HTML行内元素与块级元素

小伙伴们

加苏莱微信

来领取前端学习资料吧~