论文

XHTML+CSS 常规应用教程 ——XHTML+CSS 导航条 导航条(Div+CSS 导航条制作教程) 导航条制作教程
如何用 XHTML 和 CSS 制作一款导航条呢?希望这个教程可以帮助你回答这个问题。
制作 CSS 导航条前的热身
在阅读本教程之前,您应该已经掌握了基础的 HTML/XHTML 和 CSS。 由于大多数站点导航条所列出的几个条目都是并列的关系,因此我们通常使用一个无 序列表 ul 来作为导航条的代码。 因此如何给 ul 定义基本的样式也就成了制作导航条的重要 基础。下面就让我们来看一个定义了简单样式的无序列表。
垂直导航条
普通的列表,稍加一些简单的样式就可以做成垂直的导航条。 1.CSS 垂直导航条 1——(消除了图片下载延迟。但是宽度和高度都固定,因为受背景 图片的限制)[1] 2.CSS 垂直导航条 2(宽度可更改并且高度自适应) 3.CSS 垂直导航条 3(没有图片,宽度可更改,高度自适应)[2] 4.CSS 垂直导航条 4(没有图片,宽度可更改,高度自适应)[2]
水平导航条
1.CSS 水平导航条 1 —— 利用 CSS 的 float 属性,让列表水平排列,从而制作水平导 航条。[1] 2.CSS 水平导航条 2 —— 使用一张包含了三个状态的图片来让水平 CSS 导航条更加美 观。[3]
参考资料

1.《精通 CSS》 2.CSS Design: Taming Lists——https://www.360docs.net/doc/905663989.html,/articles/taminglists/ (CSS 设计:驯服 列表) 3.Accessible Image-Tab Rollovers——https://www.360docs.net/doc/905663989.html,/ (可访问的图 片标签式切换导航条) 以下部分尚未整理
XHTML+CSS 导航条实例(摘自 https://www.360docs.net/doc/905663989.html,) 导航条实例( )
这里收集了一些导航条以及代码,阅读这些代码就可以大概了解 XHTML+CSS 导航条的 制作方法。 1.XHTML+CSS 导航条 1 2.XHTML+CSS 导航条 2 3.XHTML+CSS 导航条 3 4.XHTML+CSS 导航条 4 5.XHTML+CSS 导航条 5 6.XHTML+CSS 导航条 6 7.XHTML+CSS 导航条 7
更多导航条实例
https://www.360docs.net/doc/905663989.html,/style/csslibrary/category/C1/ https://www.360docs.net/doc/905663989.html,/style/csslibrary/category/C2/
CSS 垂直导航条 1——XHTML+CSS 导航条
用 CSS 实现的简单的垂直导航条。宽度和高度都固定,消除了图片下载延迟的现象。
实际效果

? ? ? ? ? ?
HOME ABOUT XHTML CSS BLUEIDEA ALA
使用本代码
需要一张下面这样的图片,再在 CSS 中修改 a 的宽度和高度。
本例子的缺点
1.宽度高度都是固定的,没有灵活性。
本例子的优点
1.链接的两个状态只使用一张背景图片,可以消除延迟现象。
HTML:



CSS: :
CSS 中值得注意的是以下几点: 1.我们不是定义 li 的样式,而是定义 li 里嵌套的 a。 2.要给 a 定义 display:block,这样可点击区域才能和图片一样大。 3.a 的 line-height 和 height 要一样,这样就可以实现垂直居中。 4.a 的高度是背景图片高度减去 1。这样才能确保上下边框不会重叠,定义 background: ……left bottom 就能使上面的一像素边框被隐藏。而.first a 设 置为 40px,这样边框就会显示出来。
ul#exNav { font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif; font-size: 1.6em; margin: 0; padding: 0; list-style-type: none; } ul#exNav li { display: inline: /* :KLUDGE: Removes large gaps in IE/Win */ } ul#exNav li a { display: block; width: 200px; height: 39px; line-height: 39px; color: #000; text-decoration: none; background: #94B8E9 url(images/pixy-rollover.gif) no-repeat left bottom; text-indent: 50px; text-transform: uppercase; } ul#exNav li a:hover,ul#mainNav li .selected a { background-color: #369; background-position: right bottom; color: #fff; } ul#exNav .first a { height: 40px;

line-height: 40px; }
CSS 垂直导航条 2——XHTML+CSS 导航条
用 CSS 实现的简单的垂直导航条。宽度和高度都可以调整,并且没有图片下载延迟的现象。
实际效果
? ? ? ? ? ? Home About XHTML CSS Blueidea ALA
使用本代码
需要一张下面这样的图片。其中左边的图片尽量长。
对比精通 CSS 中的垂直导航条,本例子有以下优点: 1.宽度可以改变。而不需要更换图片。 2.高度不固定。因为是垂直平铺。
HTML:


CSS: :
注意 a:hover 的背景 position 属性的设置为背景图片右半部分的开始位置。
#exNav{ list-style-type: none; margin: 0; padding: 0; width: 180px; /* width of menu (don't forget to add border with below!) */ border-left: 8px solid #ffa1a3; /* thick left border of menu */ } #exNav li{ border-bottom: 1px solid #885b5c; /* Gray border beneath each menu item */ } #exNav li a{ background: white url(images/vstrip.gif) repeat-y left top; /* Background image positioned to the left(v) top(h) corner initially */ font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana; display: block; color: black; width: auto;

border-bottom: 1px solid white; /* White border beneath each menu item link, to add depth */ line-height:2.5em; height:2.5em; text-indent: 8px; text-decoration: none; } #exNav li a:visited, #exNav li a:active{ color: black; } #exNav li a:hover{ backgroundbackground-position: -387px 0; /* Shift background image horizontally 387px, or the start of the 2nd background image */ color: black; } #exNav https://www.360docs.net/doc/905663989.html,st, #exNav https://www.360docs.net/doc/905663989.html,st a{ border-bottom-width: 0; /* For last menu item within menu, remove bottom border */ }
CSS 垂直导航条 3——XHTML+CSS 导航条
用 CSS 实现的简单的垂直导航条。没有图片,宽度可更改,高度自适应。
实际效果

Cainiao8
? ? ? ? ? ? ? ? ? ? ? ?
Home About XHTML CSS Blueidea ALA
Blue Idea
Home About XHTML CSS Blueidea ALA
使用本代码: 使用本代码:
例子中的字体以浏览器默认大小为基准,使用的时候请注意根据整页的设置修改。 本垂直导航条有以下优点: 1.没有使用图片,所以高度和宽度都可以任意更改。 2.标注为/*hover 的时候改变*/的代码就是这个导航条的核心。
HTML:


CSS: :
#exNav{ border: 1px solid black; black border-bottom-width: 0; width: 185px; } #exNav ul{ margin: 0; padding: 0; width:100%; list-style-type: none; font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; } #exNav ul li{ display:block; margin:0; padding:0; } #exNav li a{ margin:0;

padding:0; display: block; height:1.5em; lineline-height:1.5em; paddingpadding-left:1em; text-decoration: none; color: white; background-color: #2175bc;/*hover 的时候改变*/ border-bottom: 1px solid #90bade; border-left: 7px solid #1958b7;/*hover 的时候改变*/ } #exNav li a:hover { background-color: #2586d7;/*hover 的时候改变*/ border-left-color: #1c64d1;/*hover 的时候改变*/ } #exNav h2.menutitle{ width:100%; margin:0; padding:0; text-indent:1em; color: white; border-bottom: 1px solid black; background-color: black; font: bold 100% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

}
CSS 垂直导航条 4——XHTML+CSS 导航条
用 CSS 实现的简单的垂直导航条。没有图片,宽度可更改,高度自适应。
实际效果
? ? ? ? ? ?
Home About XHTML CSS Blueidea ALA
本例子的代码与使用与上一个例子基本相同。 本例子的代码与使用与上一个例子基本相同。 上一个例子基本相同
CSS 水平导航条 1——XHTML+CSS 导航条
通过 float 让列表变为水平导航条。
实际效果
? ? ? ? ? ?
HOME ABOUT XHTML CSS BLUEIDEA ALA
使用代码: 使用代码:

使用本导航条代码,你需要制作一张如下的小图片,然后让其水平平铺座位导航条的 背景。
HTML: :


CSS: :
CSS 中值得注意的是以下几点: 1.让 ul 里的 li 浮动到左侧。ul 也要浮动。a 的浮动是为了修复 IE/MAC 的 bug。 2.a 的 left top 背景是分割线。其中.first a 没有背景。
#clear { clear:both;} ul { margin: 0; padding: 0; float: left; width: 720px; background: #FAA819 url(images/mainNavBg.gif) repeat-x; list-style: none; text-transform: uppercase;

} ul li { float: left; }
ul a { padding: 0 2em; line-height: 2.1em; background: url(images/mainNavBorder.gif) repeat-y left top; text-decoration: none; color: #fff; float: left; display: block; }
ul a:hover { color: #333; }
ul .first a { background: none; }

CSS 水平导航条 2——XHTML+CSS 导航条
使用一张包含了三个状态的图片来让水平 CSS 导航条更加美观。
实际效果
? ? ? ?
Home Guides Magazine Archives
使用代码: 使用代码:
使用本 CSS 导航条代码,需要如下的几张图片。如果图片大小改变,需要更改 CSS 中 的相应属性。
40*60
45*60
59*60
54*60
HTML: :


CSS: :
CSS 说明: 1.本导航条使用 li 的 display:inline 来实现水平导航的效果。#exNav;里也有这个 属性,这是为了避免 IE5/Win 产生 Bug。 2.a:hover 的时候会将背景图片向下移动 20px。a:active 和当前页链接的背景则会移 动 40px。 本例子的缺点: 1.图片文字,不能改变大小,而且维护麻烦,需要更新图片。 注意 a:hover 的背景设置为右半部分背景的开始。
#header { position: relative; width: 500px; height: 30px; padding: 0; margin: 3px 0 20px 0; background: #7FA0B1; } #exNav { position: absolute; top: 10px; left: 10px;

list-style: none; margin: 0; padding: 0; height: 20px; display: inline; overflow: hidden; width: 201px; }
#exNav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #exNav a { float: left; padding: 20px 0 0 0; overflow: hidden; height: 0px !important; height /**/:20px; /* for IE5/Win */ }
#exNav a:hover { background-position: 0 -20px;

} #exNav a:active, #exNav a.selected { background-position: 0 -40px; }
#thome a
{
width: 40px; background: url(images/horizontal-nav/home.gif) top left no-repeat; } #tguides a {
width: 45px; background: url(images/horizontal-nav/guides.gif) top left no-repeat; } #tmag a { width: 62px; background: url(images/horizontal-nav/magazine.gif) top left no-repeat; } #tarchives a {
width: 54px; background: url(images/horizontal-nav/archives.gif) top left no-repeat; }

相关文档
最新文档