揭秘CSS(第 1 版)
6.3.5 主导航
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

链接的样式

列表的样式

创建导航

手风琴导航

垂直导航

分页导航

面包屑导航

主导航

曾几何时,采用滑动门创建的主导航比较流行,时至今日,滑动门慢慢退出历史舞台,简单平滑的水平主导航开始流行。这就是传说中的三十年河东,三十年河西。

本节,通过一个实例,来演示一下水平主导航的制作方法。首先,创建一个无序列表来包裹导航链接:

<ul class = "mainnav">
   <li><a href="#">文件</a></li>
   <li><a href="#">编辑</a></li>
   <li><a href="#">查看</a></li>
   <li><a href="#">收藏夹</a></li>
   <li><a href="#">工具</a></li>
   <li><a href="#">帮助</a></li>
</ul>

首先,重置列表的默认样式,将外边距、内边距设置为 0,并去掉默认的项目符号。并让列表的 li 元素向左浮动,来构建水平列表。

. mainnav {
    margin: 0;
    padding: 0;
    list-style: none;
}
. mainnav li {
    float: left;
}

当列表的所有列表项都浮动后,它就不再占据文档流中的任何空间。因此,此时预览,列表中实际上没有内容,所有的列表项都溢出到列表的外面。

最简单的解决办法,就是使用 overflow: hidden 技术,让父元素创建一个新的块格式化上下文,来包含浮动的子元素。对于IE 6,则需要触发布局,最简单、又没有副作用的方法是设置 width: 100%。

.mainnav {
    …
    width: 100%;
    overflow: hidden;
}

为了让链接醒目,把 mainnav 元素的背景颜色设置为橙色,把链接的文本颜色设置为白色,并设置链接文本的字体,关闭链接的下划线。

.mainnav {
    …
    background: #fa7a20;
}
mainnav li a {
    color: #fff;
    text-decoration: none;
    font: 1em "Microsoft YaHei", STXihei;
}

由于列表项 li 之间的默认间距为0,链接文本全部挤在一起。可以在链接两边增加内边距,来调整链接文本之间的距离。

再为链接指定宽度,并通过 padding 让链接文本垂直居中,通过 text-align 让链接文本水平居中。

.mainnav li a {
    color: #fff;
    width: 80px;
    padding: 10px 0;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    font: 1em "Microsoft YaHei", STXihei;
}

为了提醒用户,当鼠标悬停时,自动改变链接的背景颜色。另外,为了突显当前链接,定义一个current 类,并通过不同的背景颜色进行标识,让用户一目了然。

.current {
    background: #e4393c;
}
.mainnav li a:hover {
    background: #f30;
}

最后,通过增加适当的圆角,来锦上添花。就这样,一个时尚、高端、大气、上档次,兼容所有浏览器,又很流行的网站主导航就制作完成了,制作过程很简单吧。快来欣赏一下,是不是很酷、很享受呀( ⊙ o ⊙ )!!

水平导航
图6-15 水平导航

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验