详细的css导航条实现代码及素材下载.pdf

详细的css导航条实现代码及素材下载 导航条是⼀个⽹站的基础，美观易⽤的导航条对于任何⽹站都是⾮常重要的。按照传 统的⽅ ，导航条是由放在⼀⾏表格单元⾥的图形图像构成。由于⼈们不再推荐⽤表 格来定位任何⾮表格的页⾯内容，所以很多⼈都⽤结构化的XHTML标记和CSS格式来 创建导航条。下⾯先来看⼀下最简单的css导航条是怎么实现的： ⾸先,我们来给这个下拉菜单写⼀个HTML 的代码.先创建⼀个div来做为容器,然后把这 个导航菜单放到这个容器⾥.正如下⾯的代码,我们⽤⽆序列表来创建这个导航菜单.在 这个导航菜单中Portfolio项下有⼀个⼦菜单,⽤粗体表⽰出来,别忘了关闭/li 。 div id=nav ul li class=firsta href=#Home/a/li lia href=#About Me/a/li lia href=#Portfolio/a ul lia href=#Web/a/li lia href=#Print/a/li lia href=#Photos/a/li /ul /li lia href=#Contact Me/a/li /ul /div The css ⾸先,我们来给#nav div设置⼀个样式,给它⼀个宽度,⾼度,字体⼤⼩.并把默认的⽆序列 表样式给去掉.。 * margin:0px; padding: 0px; } #nav font-family : arial, sans-serif; position: relative; width: 390px; height:56px; font-size:14px; color:#999; margin: 0 auto; } #nav ul list-style-type: none; } 在这⼀步我们给li设置左浮动让整个导航⽔平.并且设置相对,记li成为⼀个祖元素, 这样我们下⾯就可以利⽤到绝对定位了。 #nav ul li float: left position: relative; } 在这⼀步我们给a标签设置⼀个样式被它看起来像⼀个按扭(div css教程-如何使⽤css 创建⼀个类似按扭的导航 #nav ul li a text-align: center; border-right:1px solid #e9e9e9; padding:20px; display :block; text-decoration:none; color:#999; } 最重要的部分 这部分将展⽰给你看如何让下拉菜单的显⽰和隐藏。 当光标没有移动到WEB项⾥下拉菜单不显⽰,当光标移动到WEB项上⾯时下拉菜单显 ⽰,我们⽤display的属性来实现这个效果。 #nav ul li ul display : none } #nav ul li:hover ul display : block; position: absolute; } 我们给下拉菜单的悬停状态设置样式 #nav ul li:hover ul li a display :block; background:#12aeef; color:#ffffff; width: 110px; text-align: center; border-bottom: 1px solid #f2f2f2; border-right: none; } #nav ul li:hover ul li a:hover background:#6dc7ec; color:#fff; } 完整的CSS * margin:0px; padding: 0px; } #nav font-family : arial, sans-serif; position: relative; width: 390px; height:56px; font-size:14px; color:#999; margin: 0 auto; } #nav ul list-style-type: none; } #nav ul li float: left; position: rela