一、基本结构

• 首页
• 产品
• 服务
• 关于我们
• 联系我们

二、常用样式

1. 横向导航条

横向导航条是最常见的导航条样式，它可以通过CSS样式设置导航条的宽度、

```cssav {

width: 100%;

height: 50px;

av ul {

av li {

float: left;

width: 20%;

av li a {

display: block;e-height: 50px;

2. 垂直导航条

垂直导航条可以让网页更加简洁，适用于内容较少的网站。它可以通过CSS样式设置导航条的宽度、

```cssav {

width: 200px;

height: 100%;

av ul {

av li {

width: 100%;

av li a {

display: block;e-height: 40px;g-left: 20px;

3. 下拉菜单

下拉菜单可以让网页更加灵活，适用于内容较多的网站。它可以通过CSS样式设置下拉菜单的宽度、

```cssav ul li {: relative;

av ul ul {: absolute;

top: 100%;

left: 0;

width: 100%;

av ul ul li {

width: 100%;

av ul ul li a {

display: block;e-height: 40px;g-left: 20px;

av ul li:hover >ul {

display: block;

三、响应式设计

edia）来实现不同屏幕尺寸下的导航条样式。

```css

/* 横向导航条 */ediadax-width: 768px) {av {

height: auto;

}av ul {

}av li {

width: 100%;

}av li a {

display: block;: 1px solid #ccc;

}av li:last-child a {

}av ul ul li {

display: block;

width: 100%;

/* 垂直导航条 */ediadax-width: 768px) {av {

width: 100%;

height: auto;

}av ul {

width: 100%;

}av li {

width: 100%;

}av li:hover ul {

display: block;

/* 下拉菜单 */ediadax-width: 768px) {av ul ul {: static;

}av ul li:hover >ul {: static;

width: auto;