无懈可击的web设计学习笔记（三）

本文主要讲的内容为：可伸缩的导航栏，让网站导航栏能够适应任意大小的文字或者任何数量的内容。

html

就导航栏而言，应该使用列表，即包含一组链接的列表。但是我们也将使用html5中新增的语义化的nav元素来包装列表：

    

        
1
        
2
        
3
        
4
    

注意我们还在nav元素中使用了role特性，以便在导航中注入一个WAI-ARIA路标角色。路标角色使得辅助软件能够提供一致的导航体验。换句话说，通过添加额外的语义，角色可以使导航方便许多。

css

导航栏一般都是横向排列的，所以应通过相应的css去改变它的样式。

nav[role="navigation"] ul{
    float:left;
    width:720px;
    margin:0;
    padding:10px 0 0 46px;
    list-style:none;
    background:#FFCB2D;
}
nav[role="navigation"] ul li{
    float:left;
    margin:0 1px 0 0;
    padding:0;
    font-family:"Lucida Grande",sans-serif;
    font-size:80%;
}

因为浮动的li是通过文档流布局自然生成的，所以要想撑开外围那个定义了背景色的ul，就必须设置ul的css属性为浮动，而且还要为ul设定一个特定的宽度。

添加链接的css：

nav[role="navigation'] ul li a{
    float:left;
    display:block;
    margin:0;
    padding:4px 8px;
    color:#333;
    text-decoration:none;
    border:1px solid #9B8748;
    border-bottom:none;
    background:#F9E9A9;
}

通过将display:block;规则应用于a元素，和给a设置内边距，使整个选项卡的整个区域都可以被点击。块级对象总是独占一整行，所以我们必须使用float属性使它们处于同一行。

引入背景渐变图片：

background:#F9E9A9 url(img/off_bg.gif) repeat-x top left;

也可以通过css渐变来实现：

创建渐变的语法容易让人感到困惑。作者强烈建议使用一个基于web的“所见即所得”工具来自动完成正确的语法，因为仅靠记忆键入它们几乎是不可能的。

ColorZilla的Ultimate CSS Gradient Generator（www.colorzilla.com/gradient-editor）是一个极为出色的工具，可以建立需要的渐变，并自动生成每种浏览器（包括IE9和更低版本）所需的全部css。它会给每条规则加上注释，指出该规则适合哪种浏览器/操作系统。

通过em来实现css

nav[role="navigation"] ul{
    float:left;
    width:50em;
    margin:0;
    padding:1em 0 0 5em;
    list-style:none;
    background:#666;
}
nav[role="navigation'] ul li a{
    float:left;
    display:block;
    margin:0;
    padding:.5em 1em;
    color:#333;
    text-decoration:none;
    background:#CCC;
}

请注意padding:.5em 1em;这句代码，它的意思是：“将超链接的上下内边距设置为0.5em，将左右内边距设置为1em”。现在调整字体的大小，将会看到选项卡中的文本以及文本周围的空隙会成比例地放大或者缩小，感觉非常不错。在上一个方法中，无论怎样调整字体大小，文本周围的窗纱总是存在固定数量的像素，而使用了em后，整个导航栏实现了真正的等比例缩放。

其他灵活的方法

• 使用两幅背景图片，当其中的内容增加时，图片也相应的分离。通过使用两幅独立的图片，圆角和其他非矩形的成分都能够沿选项卡和其他容器边界对齐——与此同时，仍然能够保持灵活性和适应性。
• 通过设置一个大于原来尺寸的背景图，随着内容的增加或者字号的增加仍然能够很好的显示出来。