导航栏的设计

管理员06  发布于:2014-11-23  浏览:

摘要:在HTML页面上,导航栏使用ul和li标签,这基本已经成为导航栏设计的标准元素,重点在于CSS的设计,只有良好地运用CSS的功能才能让导航变得美观,吸引人。在首页中,导航栏定义在header标签内部的nav元素中,如代码24.6所示: 可以看到,对于当前显示的页面,会使用class=current类,表示要应用特别的显示样式。在网站的style.css文件中,对nav标签和其内部的子元素分别应用了样式,
  在HTML页面上,导航栏使用<ul>和<li>标签,这基本已经成为导航栏设计的标准元素,重点在于CSS设计,只有良好地运用CSS的功能才能让导航变得美观,吸引人。在首页中,导航栏定义在<header>标签内部的<nav>元素中,如代码24.6所示:

   可以看到,对于当前显示的页面,会使用class=current类,表示要应用特别的显示样式。在网站的style.css文件中,对<nav>标签和其内部的子元素分别应用了样式,以便使之显示水平的导航栏效果。导航栏的CSS如代码24.7所示:


CSS代码的定义如下所示:
  (l) nav容器指定绝对定位方式,right指定居右显示,位于右侧的25px靠齐;top指定位于顶部的距离,因为是绝对定位,因此它总是固定在顶部97px的位置,并且与右侧保持25px的距离。
  (2)<li>标签内的链接和<li>都会向左浮动,以便导航能够水平进行显示。其中链接部分指定了各种字体、对齐、行高等属性用于控制链接的显示方式。
  (3)鼠标经过(a:hover)与CSS类current使用相同的样式,类current用于当前选中的链接,CSS属性background指定链接的背景色,同时通过border-radius指定圆角外边框,因此使连接的显示具有圆角矩形的效果,显示如图24.9所示。

  在过去要实现这种效果,必须嵌入多个CSS,并且使用具有圆角效果的图片,使用了CSS 3以后,可以看到3行代码就轻松地实现了圆角的显示。

文章链接:http://www.jihai.com/a/jiaocheng/html5-css3/201411/433.html
标签:导航(7)栏(4)页(16)面上(2)HTML(52)使用(75)设计(33)的(233)在(109)
作者:管理员06 来源:未知 发布于2014-11-23 16:18
您可能喜欢的文章

热门模板
热门阅读
热门插件