今天跟大家分享的是，网站导航栏的实现原理。小伙伴们不要被它高大上的名头吓到了哦~
因为任何导航栏的实现都离不开我们今天即将学习的HTML列表标签。现在我们来看一下，即将用HTML列表标签写出的效果图是怎样的吧！
在写出上述效果之前，先来给大家介绍一下，基本的列表元素有哪些吧？
无序列表
<ul>标签定义无序列表，列表项默认使用粗体圆点进行标记。无序列表始于<ul>标签，每个列表项始于<li>标签。开发中，无序列表一般应用于导航栏的制作。
有序列表
<ol>标签定义有序列表，列表项默认使用数字进行标记。有序列表始于<ol>标签，每个列表项始于<li>标签。
自定义列表
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
掌握好上述标签，我们就来分析一下，今天要写的导航栏的布局吧~
1）最外层：一个无序列表；
2）里层：八个列表项；
3）最里层：每个列表项中放置一个超链接。
现在我们将这段文字翻译成HTML代码，
<ul>
<li><a href="">首页</a></li>
<li><a href="">女装</a></li>
<li><a href="">母婴</a></li>
<li><a href="">美妆</a></li>
<li><a href="">国际</a></li>
<li><a href="">男装</a></li>
<li><a href="">居家</a></li>
<li><a href="">鞋包</a></li>
<li><a href="">运动</a></li>
<li><a href="">生活</a></li>
<li><a href="">更多</a></li>
</ul>
写完后效果是酱紫滴~
很丑是不是？没关系，我们来将它美化一下。
1）首先，将超链接的默认样式去掉；
2）其次，将无序列表的默认样式（小圆点）去掉；
3）最后，将列表项依次向左浮动，水平排列（注意要清除li浮动后产生的副作用）。
接下来，我们将这段文字用CSS翻译一下，
<style>
/* 清除小圆点 */
ul{
list-style-type:none;
}
/* 清除li浮动后产生的副作用 */
ul::after{
content: '';
display: block;
clear: both;
}
/* 设置列表项向左浮动 */
ul>li{
float:left;
}
ul>li>a{
/* 将行内元素变为块级元素 */
display:block;
/* 清除下划线 */
text-decoration:none;
/* 设置字体大小 */
font-size: 16px;
width:60px;
height:40px;
/* 设置行高，行高与高度一致时当行高与高度一致时，会使当行文字上下居中 */
line-height:40px;
/* 设置文本颜色 */
color: #ffffff;
/* 设置背景颜色 */
background:#f10180;
/* 设置文本居中 */
text-align: center;
}
ul>li>a.pink{
background-color: #bd1067;
}
/* 鼠标悬停效果 */
ul>li>a:hover{
color:#fff;
background:#c23a7e;
}
</style>
写完后，导航栏变成了酱紫~
也许，关于浮动的知识点，大家还不是很了解。但是没关系，在分享到CSS章节的时候，苏莱会将CSS浮动单独用一篇文章来介绍的，所以，小伙伴们不要为此担心啦~
接下来，继续为大家介绍一下怎么通过CSS来修改超链接与无序列表的默认样式吧！
首先，我们需要了解两个CSS属性
text-decoration 属性
text-decoration 属性允许对文本设置某种效果，如加下划线，或去掉默认样式的下划线。以下是它常用到的属性值，
list-style-type 属性
list-style-type 属性用于设置不同的列表样式。以下是它常用到的属性值，
其次，我们再复习一个之前说过的CSS属性
color 属性
color 属性用于为不同元素设置文本颜色。常用的四类属性值，
大家有没有学会呢？没学会的话记得私信小编"011"哦~