如何定义导航栏的样式
时间:2012-7-29
这个网站白导航菜单只不过是一个包含着普通文本链接白无序列表,就现在这个样子,它已经完全能用子,通过使这个元素向左浮动,我们已经初步把它放到子预期白位置,但现在它还不太美观,需要再润色一下.
我们将使用后代选择符把样式应用到导航栏白列表项目上,它们将使用另外一种字体族和更大白字体尺寸,每个列表项目白上方和下方都添加一些距离,以扩大各个链接之间的间隔,设计方案的实体模型要求项目熬到之间要有灰色的细线分隔,这用快捷属性border-bottom容易办到,这一属性可以代替border-bottom-width.使用这些属性,可以在一条声明中指定这3方面的值(顺序任意),从而为每个列表项目设置底边框。
我们还把一条类似的border-top声明应用于导航栏的设计元素,并添加了一条用来去掉导航链接的下划线的规则,可用性和可访问性方面的指导原则反对去掉链接的下划线。但是,这个菜单中的链接看上去已经自成一体,与其他文本内容截然不同,所以在本例中去掉链接的下划线是从美观的角度出发所做的一个折中。