承接文章：灵巧掌握块级元素在一行内显示，CSS浮动属性，知道事理就很大略
技能等级：低级 | 适宜前端开拓的初学者阅读学习。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，由于这些文章都是连载的，并且是经由系统的归纳和总结的。塌下心来负责阅读，你一定会学到对你有用的知识。
如果你是初学前端开拓，强烈建议随着文章中讲的步骤自己做一做。步骤不多，思路大略，占用不了大家太多的韶光，自己做一遍，一定会收成不少。
一、导航栏效果图展示：
本日我们要做的导航栏效果如下图所示。
导航栏效果图展示
这个效果紧张利用的是<ul></ul>标记对和<a></a>标记对共同实现的。
全体实例涉及到的CSS属性如下所示：
width
height
background-color
list-style-type
display
float
margin
line-height
二、实现页面效果：
首先为导航栏设置一个<div>容器，并设置其id属性的取值设置为nav。该容器用来掌握导航栏的通栏位置。通栏的容器宽度该当设置为100%，这里高度设置为40px，颜色为#a72f2e。实当代码如下所示：
<div id=”nav”></div>
#nav{
width:100%; height:40px;
background-color:#a72f2e;
}
由于要在通栏的容器中显示固定宽度为1000px的导航栏主体，因此在该容器内部再制作一个<div>容器，用来盛放真正的导航栏代码。我们将它的class属性取值为navContent。这个容器的宽度设置为1000px，高度与#nav的高度等高，并且在#nav容器内部水平居中。实当代码如下所示：
<div class=”navContent”></div>
#nav .navContent{
width:1000px; height:40px;
margin:0 auto;
}
接下来在.navContent容器内部书写导航栏的各个条款。导航栏是利用<ul></ul>标记对实现的，而它的导航栏条款是利用<li></li>标记对书写的。由于导航栏须要单击后跳转页面，以是在<li></li>内部利用了<a></a>标记对。
这里要解释一点，由于<li></li>标记对是块级元素，<a></a>标记对是内联元素，因此要让<li></li>标记对包裹<a></a>标记对，不要用<a></a>标记对包裹<li></li>标记对。
这里以导航栏条款“首页”和“网站先容”为例，下列HTML代码展示了导航栏的条款内容。
<ul>
<li><a href=\"大众index.html\"大众>首页</a></li>
<li><a href=\公众#\"大众>网站简介</a></li>
…
</ul>
须要更多的导航栏条款，可以在<ul>标记对内部重复书写<li></li>和<a></a>的代码格式。
三、编写全体导航栏的CSS样式：
全体导航栏是利用<ul></ul>标记对实现的，以是须要对<ul></ul>标记对编写CSS样式。
由于无序列表的列表项左侧带有小圆点的项目符号，因此须要将该项目符号去掉。以是<ul></ul>标记对的CSS代码如下所示：
#nav .navContent ul{
list-style-type:none;
}
四、编写导航栏条款标CSS样式：
导航栏条款是利用<li></li>标记对实现的，以是须要对<li></li>标记对编写CSS样式。
由于<li></li>标记对是块级元素，因此纵然去掉了左侧的项目符号，所有的条款依然都各自独占一行显示，以是须要让它们在一行内显示，这就须要让所有的<li></li>标记对左浮动。CSS代码如下所示：
#nav .navContent ul li{
float:left;
}
五、编写导航栏条款中链接的CSS样式：
导航栏条款中的链接是利用<a></a>标记对实现的，以是须要对<a></a>标记对编写CSS样式。
由于<a></a>标记对是内联元素，因此无法设置宽度和高度，也就无法为每一个导航栏条款设置尺寸。因此须要将<a></a>标记对转换为块级元素（display属性），然后设置宽度和高度（width属性和height属性）。
有了宽度和高度，就须要让链接的文本在容器中水平居中（text-align属性）和垂直居中（line-height属性）了。
末了去掉链接的下划线（text-decoration属性），并设置链接的文本质彩（color属性）。
导航栏条款中链接的CSS代码如下所示：
#nav .navContent ul li a{
display:block;
width:100px; height:40px;
text-align:center;
line-height:40px;
text-decoration:none;
color:#dddddd;
}
六、编写鼠标经由导航栏条款时的CSS样式：
鼠标经由导航栏目时，纵然没有触碰到链接的文本部分，也该当能够进行跳转。因此须要对<a></a>标记对编写鼠标经由时的CSS样式。
鼠标经由时，希望背景颜色（background-color属性）和文本质彩（color属性）发生变革。
鼠标经由链接时的CSS代码如下所示：
#nav .navContent ul li a:hover{
background-color:#ff5857;
color:#ffffff;
}
七、整体代码：
至此，这个大略的导航栏效果就完备实现了，CSS整体利用了约30行代码。实现这个导航栏效果的HTML代码如下图所示。
HTML整体代码
实现这个导航栏效果的CSS代码如下图所示。
CSS整体代码
小海教材如果大家希望得到更加全面的关于HTML和CSS技能讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开拓的道路上阔步前行。
小海声明在头条上揭橥的这些文章都是从前端开拓的根本开始一步一步讲起的。我非常希望能有更多的前端开拓初学者通过我写的文章，逐步学到一定的知识，乃至逐步有了入门的觉得。这些文章都是我这几年传授教化过程中的履历，每写一篇时我都只管即便把握好说话，用大略易懂的措辞描述，同时精心设计版面，让版面更加丰富，引发阅读兴趣。以是，每一篇文章可能篇幅不长，但是都要耗费小海老师良久的韶光。
希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，由于这些文章都是连载的，并且是经由系统的归纳和总结的。塌下心来负责阅读，你一定会学到对你有用的知识。关注“小海前端”，我会连续为大家奉上更加深入的前端开拓文章，也希望更多的初学者随着学下去，我们共同将前端开拓的路努力坚持的走下去。
文章预报下一次，小海老师开始为大家讲解CSS的盒属性。盒属性是div布局的根本，在实际的布局过程中有许多运用技巧。下一篇文章我会为大家将盒属性一个一个进行详细的剖析。
