[分享]css做一带框个导航栏

CSS是一种用于网页设计和排版的语言，它可以通过控制HTML文档的样式来实现各种各样的效果。其中一个非常常见的效果就是导航栏，可以让网页的用户更加方便地浏览不同的内容。下面我们来看看如何使用CSS来设...

CSS是一种用于网页设计和排版的语言，它可以通过控制HTML文档的样式来实现各种各样的效果。其中一个非常常见的效果就是导航栏，可以让网页的用户更加方便地浏览不同的内容。下面我们来看看如何使用CSS来设计一个简单的带框样式的导航栏。

<ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">分类</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

/* CSS代码 */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
}

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

li a:hover:not(.active) {
  background-color: #ddd;
}

.active {
  background-color: #4CAF50;
  color: white;
} 

首先，我们需要在HTML文档中创建一个<ul>元素，并在其中添加多个<li>元素，每个元素代表一个导航链接。每个<li>元素中都包含一个<a>元素，该元素用于显示链接的文本内容。注意将href属性设置为"#"，以便在实际使用时替换为正确的链接地址。

接下来，我们使用CSS样式为导航栏添加样式。使用"list-style-type: none"将列表标记去除，同时设置margin和padding为0，确保元素的外边距和内边距都为0。使用"overflow: hidden"隐藏超出区域的内容，并设置"border: 1px solid #e7e7e7"和"background-color: #f3f3f3"，为导航栏添加灰色的边框背景。

然后，对每个导航链接进行设置。使用"float: left"将链接元素沿着水平方向浮动排列，依次排在一行中。使用"display: block"将链接元素设置为块级元素，可以让链接元素占据整个父元素的宽度。设置"color: #666"为链接元素设置默认的颜色，用于显示文本内容。设置"text-align: center"将文本内容居中对齐。

将"padding: 14px 16px"为链接元素的内边距，设置为14像素的垂直内边距和16像素的水平内边距。这将为导航栏添加一些空隙和间距，使其看起来更加美观。

最后，我们对激活状态的导航链接进行特殊设置。使用"<a>:not(.active)"选择器，为不是激活状态的链接设置悬停时的背景颜色为灰色。使用".active"类选择器为激活状态的链接设置绿色的背景和白色的文本颜色。注意，在HTML文档中添加"active"类以激活状态的链接。

以上就是使用CSS设计带框样式的导航栏的过程。通过这种方法，我们可以快速地为网站设计出各种各样的导航栏和菜单。希望大家能够掌握这个技巧，并运用到自己的网页设计中。