网页设计是从静态页面开始的，传统的网页设计多采用表格布局，样式也很简单，但是现在由于CSS技术的发展，样式和布局的更改更加方便易行，能够打造更为精美的页面效果，使网页设计人员更容易实现自己的创意，从而让网页设计得以更加具有艺术感。本文将通过五千字的篇幅，结合图片和实例来详细介绍CSS制作横向导航的方法及技巧。
一、初识CSS
CSS，层叠样式表（Cascading Style Sheets），简称CSS。用于描述网页的呈现方式。它描述的是网页的样式方面，例如，颜色、字体、边框等等，整个页面的排版则通过HTML来实现。CSS与HTML的关系有点像是外壳与内核一般，两者生死相依，紧密相连，都是现代网站建设的核心技术。
CSS本身是一种规范，它并不是编程语言。 CSS样式表的语言比较简单易懂，具备一定的清晰度和可重用性，在设计网站排版的时候会非常有帮助。
1.1 CSS的语法
CSS的一般语法格式为：选择器{属性：属性值}，其中选择器用来定位一个或多个HTML元素，花括号中的属性-属性值对用来描述元素的属性。
属性：指HTML元素的功能或特征。
属性名：指HTML元素的功能或特征的名称。
属性值：指HTML元素某个功能或特征的属性值。
举例：
```
选择器 {
属性1: 属性1值;
属性2: 属性2值;
属性3: 属性3值;
}
```
对于一条简单的CSS语句，我们来看一个示例：
```
body {
color: #000;
background-color: #fff;
}
```
这条语句表示：
- 选择器: body
- 属性1: color
- 属性1值: #000
- 属性2: background-color
- 属性2值: #fff
1.2 CSS选择器
CSS选择器用于定位HTML文档中的元素。常用的选择器有：标签选择器、ID选择器、类选择器、属性选择器、伪类选择器等。
- 标签选择器
标签选择器是CSS中最常用的选择器之一，它通过元素的标签名字进行选择。
```
标签名 {
属性：属性值;
}
```
- ID选择器
ID选择器是用来选择页面中指定ID属性值的元素。
```
#id {
属性：属性值;
}
```
- 类选择器
类选择器用于选择文档中指定类属性值的元素。
示例：
```
.class {
属性：属性值;
}
```
- 属性选择器
属性选择器以元素的某个属性的值作为选择器，且可以匹配这个属性的任意部分内容。例如，选出所有元素 name 属性值中包含 \"John\" 的元素。
```
[attribute=\"value\"]{
属性：属性值;
}
```
- 伪类选择器
向某些选择器添加一个特殊的效果，如链接的状态、鼠标放上去的状态等。
示例：
```
a:hover {
颜色：红色;
}
```
二、CSS制作网页横向导航菜单
2.1 前期准备
在开始制作横向导航之前，需要对页面进行一些简单的整理。我们按照如下步骤来处理：
1. 界面初步规划：先考虑横向导航的位置和内容布局，例如放在什么位置、导航菜单的文字及按需求添加的其他东西等。 如下图所示：
2. 切片限定标准：对需要实现的导航样式进行初步截图，用于自己的设计以及日后的参考。如下图所示：
3. 图片命名规范：建议命名方式为数字+描述词，例如menu_link.jpg、menu_hover.jpg等等。
4. CSS文件的编写，首先建立一个名为style.css的CSS文件，由于CSS不是一门程序语言，不需要使用切入点，因此在CSS文件中可以自由地添加注释，这篇文章也将结合注释来讲解每一步的制作过程。
2.2 具体实现
开始制作横向导航菜单：
1. 在HTML页面中添加导航列表，在UL和LI里面创建一个无序列表：
```
首页
产品
服务
客户
关于我们
联系方式
```
补充说明：
- 在这里我们通过ul和li标签创建一个6个项目的无序列表。
- 每个列表项(li)中包含一条导航链接。
- ID属性名menu对应的样式表是控制整个导航列表菜单的样式表。
- 导航链接使用标签a来定义，并且均为指向#（当前页面的上一级目录）的链接。
2. 修改样式表
```
div#menu ul {
margin-top: 5px;
padding: 0;
list-style: none;
background-color: #FFFFFF;
font-family: Arial, sans-serif;
font-size: 13px;
height: 32px;
width: 768px;
border-bottom: 1px solid #666666;
text-align: left;
}
```
补充说明：
- 代码中我们选择了div元素中的ul元素，所以这个样式表只对ID为menu的DIV生效。
- margin-top:5px用来使导航列表与用户上面的其他元素之间产生一些间隙。padding:0; list-style:none;分别是用来取消列表元素默认的边距、填充及默认的列表符号。height:32px使导航菜单的高度为32个像素，与图片高度相匹配。width:768px定义整个导航菜单区域的宽度。background-color:#FFFFFF让整个导航菜单的背景颜色为白色。text-align:left使整个导航菜单内部的文字左对齐。border-bottom:1px solid #666666是用来在导航菜单底部添加一条灰色的分界线用来分隔导航菜单与页面主体.
3. 修改 li 标签的样式
```
div#menu li {
float: left;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
```
补充说明：
- 上述代码选择了div元素中每个li元素。因为浮动属性float并不支持垂直方向的属性，所以必须使用水平方向的float属性。如上述代码所示，我们使用“float:left;”属性来使每个导航链接横向排列。
- 我们使用margin:0; padding:0; 取消每个列表项的缩进及默认填充属性。
- background-color:#FFFFFF 让整个导航菜单的背景颜色为白色。
4. 边框与光标样式
```
div#menu a {
display: block;
margin: 0 0 0 1px;
padding: 8px 20px;
background-image:;
background-color:
#FFFFFF;
text-decoration: none;
line-height: 32px;
border-right: 1px solid #BBBBBB;
border-left: 1px solid #BBBBBB;
border-top: 1px solid #BBBBBB;
cursor: pointer;
}
```
补充说明：
- 上述代码选择所有div元素中，ID为menu的UL标签中的每个A标签，同时添加了block属性，让链接在一个矩形方框中显示。同时，通过line-height:32px来设定行高。
- 添加了8个像素的上/下填充及20个像素的左/右填充来适用于底部背景图。同时，纯色背景图也是允许使用这样一种方法来使导航链接居中的。
- 添加了1像素粗细的灰色边框。注意：这些边框会在链接之间产生分隔的作用。
- 添加一个黑色的光标来使导航链接在链接被选中时的显示更加美观。
5. 点击后标签样式
```
div#menu a:hover, div#menu .current {
background-color:
#22559B;
color: #FFFFFF;
}
```
补充说明：
- 上述代码选择所有div元素中，ID为menu的UL标签中的每个A标签，同时定义了背景色和文字颜色。试想一下，这一部分就是当鼠标悬停（hover）在链接上时，该链接的样式。同时，也针对“current”样式定位到悬停时正在访问的链接上。
所有的CSS样式都完成之后，就可以让整个网站具有了很好的导航菜单。
```
<meta charset=\"utf-8\">
<link href=\"style.css\" rel=\"stylesheet\" type=\"text/css\">
<body>
首页
产品
服务
客户
关于我们
联系方式
```
完整代码： style.css
```
div#menu ul {
margin-top: 5px;
padding: 0;
list-style: none;
background-color: #FFFFFF;
font-family: Arial, sans-serif;
font-size: 13px;
height: 32px;
width: 768px;
border-bottom: 1px solid #666666;
text-align: left;
}
div#menu li {
float: left;
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
div#menu a {
display: block;
margin: 0 0 0 1px;
padding: 8px 20px;
background-image:;
background-color:#FFFFFF;
text-decoration: none;
line-height: 32px;
border-right: 1px solid #BBBBBB;
border-left: 1px solid #BBBBBB;
border-top: 1px solid #BBBBBB;
cursor: pointer;
}
div#menu a:hover, div#menu .current {
background-color:#22559B;
color: #FFFFFF;
}
```
本文介绍了如何用CSS制作一个简单的横向导航菜单，这只是一个小例子。在实际编程中，需要考虑更多的因素例如web浏览器的兼容性等等，如果你想要让导航菜单在不同的浏览器上都能支持并完美兼容，可以通过阅读更多的web开发书籍和相关博客来寻求帮助。
网站导航栏（Site navigation bar），是指位于网页最上端的一行横线，用来为用户提供对网站的整体导航和分类浏览服务。它一般包含了主要的网站分类和功能模块，是网页设计中非常重要的一个部分，能够从整体上优化用户体验和增强网站的可用性。因此，网页导航的设计和制作也成为了Web前端开发中常见的技能之一。
二、CSS制作网页导航栏的原理
CSS（Cascading Style Sheets）是一种非常强大的标记语言，可以通过 CSS 样式定义，实现对网页 HTML 内容的格式化和布局控制。而对于网页导航栏的制作，CSS主要是用来控制导航栏的布局，风格和样式等。
具体地说，CSS实现网页导航栏制作的原理如下：
1. 使用HTML定义导航栏内容
首先，我们需要在HTML中定义导航栏的内容，包括导航栏的标签，链接以及其他的元素。下面是一个简单的导航栏HTML代码示例：
```html
首页
新闻动态
产品中心
案例展示
联系我们
```
在这个例子中，我们使用“`
`”标签创建了导航栏的容器，并在容器中插入了一个“``”列表元素，用来存放导航栏的各个链接。“``”标签则是列表的子元素，用来存放每个导航项的具体内容。每个导航项的链接则通过“``”标签来实现。
2. 使用CSS格式化导航栏样式
接下来，我们需要使用CSS对导航栏进行格式化和样式控制。下面是导航栏的基本样式定义代码：
```css
.navbar {
background-color: #333333;
overflow: hidden;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #dddddd;
color: black;
}
```
在这个代码中，我们通过`.navbar`选择器对导航栏整体进行控制，设置它的背景颜色和overflow属性。`.navbar ul`选择器用于控制导航栏中的列表元素，`.navbar li`选择器则用于控制每个导航项（即列表的子元素），将它们通过`float`属性按照水平方向排列。
最后，`.navbar li a`选择器定义了导航项的链接样式，包括颜色、位置、背景等，并使用`:hover`伪类来指定鼠标悬浮时的样式效果。
3. 响应式设计
在现代Web设计中，响应式设计已经成为了一种非常重要的技术，它可以根据用户的设备和屏幕尺寸动态调整网页布局和显示效果。因此，在CSS制作导航栏时，我们还需要考虑网页的响应式布局问题。
下面是一个简单的响应式设计实现方法：
```css
@media (max-width: 768px) {
.navbar li {
float: none;
}
.navbar li a {
display: block;
text-align: left;
}
}
```
这段代码中，我们使用了`@media`媒体查询来判断当前设备宽度是否小于等于768像素。如果是，我们通过修改`.navbar li`样式来取消导航项的float属性，并且通过修改`.navbar li a`样式来改变导航项链接的位置和对齐方式。
三、CSS制作导航栏的具体步骤
了解了CSS制作导航栏的原理和基本知识后，我们现在可以开始着手实现自己的导航栏了。下面分步骤详细介绍如何用CSS制作网页导航栏。
1. 创建导航栏HTML代码
首先，我们需要在HTML中创建导航栏的容器，用以放置导航项。
```html
首页
新闻动态
产品中心
案例展示
联系我们
```
在这里，我们使用了“`
`”标签作为导航栏的容器，以及“``”和“``”标签作为导航栏和导航项的容器。
2. 设置导航栏样式
接下来，我们需要使用CSS代码来设置导航栏的样式。
```css
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar ul {
margin: 0;
padding: 0;
list-style: none;
}
.navbar li {
display: inline-block;
float: left;
margin-right: 5px;
}
.navbar li a {
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #555;
}
```
在这段代码中，我们使用了`.navbar`选择器来选择导航栏，将其背景色设置为黑色，同时隐藏导航栏溢出内容。`.navbar ul`选择器用来设置导航栏中的列表元素，将它们的margin和padding都设置为0，并去除了列表符号。`.navbar li`选择器定义了每个导航项，将它们设置为行内块元素，并且使用float属性将它们按顺序横向排列。`.navbar li a`选择器则用来设置导航项中的链接样式，包括颜色、位置、内边距等。最后，`.navbar li a:hover`选择器用于设定鼠标悬浮时的导航栏的样式。
3. 编写响应式设计代码
为了让导航栏随着移动设备的屏幕尺寸变化而自适应，我们需要编写响应式设计代码。
```css
@media screen and (max-width : 768px) {
.navbar li {
display:block;
float:none;
margin:0;
padding:0;
}
.navbar li a {
padding:10px;
text-align:center;
background-color: #333;
margin:0;
border:none;
width:100%;
}
}
```
在这段代码中，我们使用了`@media`媒体查询来判断当前设备是否满足条件（屏幕宽度小于等于768px）。如果是，我们将导航栏中的每个导航项设置为块元素，并去除它们的浮动属性；将导航项链接的padding、对齐方式、背景颜色、边距、边框以及宽度设置为100%。
四、CSS制作导航栏的常见技巧
在实现网页导航栏的过程中，我们还可以利用一些CSS技巧和特性，来增加导航栏的交互性，增强用户的体验感和网站的可用性。
1. 设计下拉菜单式导航栏
如果你的网站有较多的分类，那么单层式的导航栏显然不够用。这时候，我们可以利用CSS设计出下拉菜单式导航栏。
```html
首页
新闻动态
公司新闻
行业新闻
产品中心
产品1
产品2
产品3
案例展示
联系我们
```
在这个例子中，我们直接在导航栏的HTML代码中嵌套了其他的“``”元素，并使用嵌套和`display:none`来实现导航栏的下拉菜单效果。
```css
.navbar ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background:#eee;
padding:0;
margin:0;
}
.navbar ul li:hover >ul {
display:inherit;
}
.navbar ul ul li {
position: relative;
float:none;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
z-index: 999;
}
.navbar ul ul li a {
color:#262626;
padding: 12px 12px;
text-decoration:none;
display:block;
z-index: 999;
}
.navbar ul ul ul {
position:absolute;
left:100%;
top:0;
}
```
而在CSS样式中，我们则需要针对下拉菜单的特性设置一些新的样式。首先，使用`.navbar ul ul`选择器来设置菜单列表的样式和默认状态下的不可见属性。然后，通过`.navbar ul li:hover >ul`来控制鼠标悬停时子菜单的显隐状态。之后使用`.navbar ul ul li`来设置子菜单项的显示方式和样式，添加了边框、z-index属性等。最后，如果你希望菜单栏存在多层级，需要对`.navbar ul ul ul`也进行样式设置。
2. 导航栏超链接在滑动时增加动态效果
如果你想让导航栏看起来更动态一些，可以增加一些hover特效。下面是一个简单的示例代码：
```css
.navbar a:hover {
position: relative;
}
.navbar a:hover:after {
position: absolute;
content: \;
height: 2px;
background-color: #fff;
left: 50%;
bottom: -10px;
transform: translateX(-50%);
width: 0%;
transition: width ease-in-out 0.3s;
}
.navbar a:hover:before {
position: absolute;
content: \;
height: 2px;
background-color: #fff;
left: 50%;
top: -10px;
transform: translateX(-50%);
width: 0%;
transition: width ease-in-out 0.3s;
}
.navbar a:hover:after,
.navbar a:hover:before {
width: 60%;
}
```
这段代码的作用是在导航栏的链接上添加一个小效果，当鼠标悬浮在链接上时，链接上方和下方各出现一条2px的白线条，并慢慢延伸出来。用增加观看体验。
五、总结
CSS制作网页导航栏是前端开发人员应该掌握的一项重要技能，它可以帮助网站从整体上优化用户体验，增强可用性。在学习时，需要先了解CSS的基本语法和规则，然后再结合实际需求进行制作和样式设计。在实际操作中，需要注意将HTML和CSS代码分离，合理利用CSS技巧和响应式设计技术，以达到最佳的用户体验效果。
