[分享]css中导航栏的制作

CSS导航栏是网页中常用的重要元素，它能提供方便的网页导航，使用户能够更为迅速地浏览网页内容。本文将介绍如何利用CSS制作简单的水平导航栏。首先，在HTML页面中创建一个基本的导航栏框架，我们需要使用...

CSS导航栏是网页中常用的重要元素，它能提供方便的网页导航，使用户能够更为迅速地浏览网页内容。本文将介绍如何利用CSS制作简单的水平导航栏。
首先，在HTML页面中创建一个基本的导航栏框架，我们需要使用一个HTML列表来创建导航栏菜单。每一个列表项对应导航栏中的一项，如下所示：

<ul class="navi">  
   <li><a href="#">Home</a></li>  
   <li><a href="#">Blog</a></li>  
   <li><a href="#">About</a></li>  
   <li><a href="#">Contact</a></li>  
</ul> 

这里我们使用了一个class为“navi”的ul元素，类名可以任意设定，但需要在后续的CSS样式中进行对应调用。
接下来，我们将使用CSS样式来为导航栏添加样式。我们可以使用以下代码来为导航栏添加样式：

.navi {  
  list-style:none;  
  margin:0;  
  padding:0;  
  overflow:hidden;  
  background-color:#333;  
}  

.navi li {  
  float:left;  
  border-right:1px solid #fff;  
}  

.navi li:last-child {  
  border-right:none;  
}  

.navi li a {  
  display:block;  
  color:#fff;  
  text-align:center;  
  padding:14px 16px;  
  text-decoration:none;  
}  

.navi li a:hover {  
  background-color:#111;  
} 

以上样式中，我们对class为“navi”的ul元素定义了一些公共的样式，例如去掉初始样式（list-style:none）；去掉外边距和内边距（margin:0, padding:0）；设置隐藏式溢出（overflow:hidden）；设置背景颜色为深灰色（background-color:#333）。
接下来，对于每个列表的li元素，我们设置了浮动（float:left）；边框（border-right:1px solid #fff）以及最后一个元素去掉边框（.navi li:last-child {border:none}）。
最后，我们对每个链接元素a进行样式设置，定义了显示方式为块级元素（display:block）；字体颜色为白色（color:#fff）；居中显示（text-align:center）；内边距为14px和16px（padding:14px 16px）以及去除链接下划线（text-decoration:none）。同时，在鼠标悬浮时，我们对链接元素进行样式调整，改变背景颜色（background-color:#111）。
通过以上样式定义，我们可以为导航栏添加一个简单而美观的外观。而在创建时，只需要遵循基本的HTML列表框架，通过简单的CSS样式定义，就可以轻松地制作出酷炫的导航栏。