HTML/CSS:导航栏水平和垂直
1.垂直导航栏
导航栏 = 链接列表
导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的。
如需构建垂直导航栏,我们只需要定义 <a> 元素的样式
演示:
代码:
HTML
<div class="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">MTRA</a></li> <li><a href="#">PRODUCT</a></li> <li><a href="#">MORE</a></li> </ul> </div>
CSS
.nav {
background-color: #F5F5DC;
}
.nav ul {
margin: 0;padding: 0;
list-style-type: none;
line-height: 3em;
}
.nav a {
display: block;
width: 10em;
text-align: center;
text-decoration: none;
background-color: #CCCCCC;
}
.nav a:hover {
background-color: #E6E6FA;
}
核心代码:
- list-style-type:none - 删除圆点。导航栏不需要列表项标记。
- 把外边距和内边距设置为 0 可以去除浏览器的默认设定。
- display:block - 把链接显示为块元素可使整个链接区域可点击(不仅仅是文本),同时也允许我们规定宽度。
- width:10em - 块元素默认占用全部可用宽度。此处自定义宽度。
提醒:请始终规定垂直导航栏中 <a> 元素的宽度。如果省略宽度,IE6 会产生意想不到的结果。
2.两种水平导航栏设置方式
有两种创建水平导航栏的方法。使用行内或浮动列表项。
两种方法都不错,但是:如果希望链接拥有相同的尺寸,就必须使用浮动方法。
1.行内列表法
演示:
代码:
HTML
<div class="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">MTRA</a></li> <li><a href="#">PRODUCT</a></li> <li><a href="#">MORE</a></li> </ul> </div>
CSS
.nav { text-align: center; background-color: #F5F5DC; } .nav ul { list-style-type: none; line-height: 5em; } .nav ul li { display: inline; } .nav a { text-decoration: none; background-color: #CCCCCC; } .nav a:hover { background-color: #E6E6FA; }
核心代码:
- display:inline - 默认地,<li> 元素是块元素。在这里,我们去除了每个列表项前后的换行,以便让它们在一行中显示。
2.浮动列表法
在上面的例子中,链接的宽度是不同的。
为了让所有链接拥有相等的宽度,浮动 <li> 元素并规定 <a> 元素的宽度:
演示:
代码:
HTML
<div class="nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">MTRA</a></li> <li><a href="#">PRODUCT</a></li> <li><a href="#">MORE</a></li> </ul> </div>
CSS
.nav { height: 5em; width: 50em; margin: 0 auto; background-color: #F5F5DC; text-align: center; } .nav ul { margin: 0;padding: 0; list-style-type: none; display: inline-block; } .nav ul li { float:left; } .nav a { display:block; width: 10em; height: 5em; line-height: 5em; text-decoration: none; background-color: #CCCCCC; } .nav a:hover { background-color: #E6E6FA; }
核心代码:
- display: inline-block - 使列表正常居中显示。
- float:left - 使用 float 来把块元素滑向彼此。
- display:block - 把链接显示为块元素可使整个链接区域可点击(不仅仅是文本),同时也允许我们规定宽度。
- width:10em - 由于块元素默认占用全部可用宽度,链接无法滑动至彼此相邻。我们需要自定义宽度。