用CSS制作导航条方法

第一步：建立一个无序列表我们先建立一个无序列表，来建立菜单的构造。代码是：<ul><li><ahref=“1“>首页</a></li><li><ahref=“2“>产品介绍</a></li><li><ahref=“3“>效劳介绍</a></li><li><ahref=“4“>技术支持</a></li><li><ahref=“5“>马上购置</a></li><li><ahref=“6“>联系我们</a></li></ul>其次步：隐蔽li的默认样式liUL样式来消退这些圆点。固然，为了更好的掌握整个菜单，我们把菜单放在一个div里。页面代码变成：<divclass=“test“><ul><li><ahref=“1“>首页</a></li><li><ahref=“2“>产品介绍</a></li><li><ahref=“3“>效劳介绍</a></li><li><ahref=“4“>技术支持</a></li><li><ahref=“5“>马上购置</a></li><li><ahref=“6“>联系我们</a></li></ul></div>CSS.testul{list-style:none;}testul现在的效果是没有圆点了第三步：关键的浮动“float:left;”liliCSS.testli{float:left;}看，菜单变横向了。就这么简洁！下面需要做的就是优化细节了。第四步：调整宽度菜单都挤在一起不好看怎么办？我们来调整li的宽度。li100px，固然你可以依据你的需要调整数值：.testli{float:left;width:100px;}，lidivdiv350px，6li600px，一行排不下就自动变成两行：.test{width:350px;}第五步：设置根本链接效果CSS:link、:visited、:hover的状态.testa:link{color:#666;background:#CCC;text-decoration:none;}.testa:visited{color:#666;text-decoration:underline;}.testa:hover{color:#FFF;font-weight:bold;text-decoration:underline;background:#F00;}第六步：将链接以块级元素显示liadisplay:block，使链接以块级元素显示。同时我们微调了如下细节：height:30pxmargin-left:3px3pxCSS.testa{display:block；text-align:center;height:30px;}.testli{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}这样就秀丽多了吧。第七步：定义背景图片CSS是承受定义li的背景图片来实现的：.testa:link{color:#666;background:url(arrow_off.gif)#CCCno-repeat5px12px;text-decoration:none;}.testa:hover{color:#FFF;font-weight:bold;text-decoration:none;background:url(arrow_on.gif)#F00no-repeat5px12px;}说明：“background:url(arrow_off.gif)#CCCno-repeat5px12px;”这句代CSSarrow_off.gif；背景颜色是#CCC；背景图“no-repeat5px12px；当鼠标移动到链接上，图标变为arrow_on.gif现在css的完整代码是：.testul{list-style:none;}.testli{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}.testa{display:block;text-align:center;height:30px;}.testa:link{color:#666;background:url(arrow_off.gif)#CCCno-repeat5px12px;text-decoration:none;}.testa:visited{color:#666;text-decoration:underline;}.testa:hover{color:#FFF;font-weight:bold;text-decoration:none;background:url(arrow_on.gif)#F00no-repeat5px12px;}页面的完整代码是：<divclass=“test“><ul><li><ahref=“1“>首页</a></li><li><ahref=“2“>产品介绍</a></li><li><ahref=“3“>效劳介绍</a></li><li><ahref=“4“>技术支持</a></li><li><ahref=“5“>马上购置</a></li><li><ahref=“6“>联系我们</a></li></ul></div>一款CSS制作的动态导航条代码<style>.channel{width:350px;margin:12px0px0px175px;height:30px;line-height:30px;text-align:center;}.channelul{list-style:none;margin:0px;}.channelli{float:left;padding-left:8px;}.channela{background:url(/icon/arrow2.gif)no-repeatleft;padding-left:10px;color:#457a8b;font-size:14px;font-weight:bold;}.channela:link{background:url(/icon/arrow2.gif)no-repeatleft;padding-left:10px;color:#457a8b;}.channela:visited{background:url(/icon/arrow2.gif)no-repeatleft;padding-left:10px;color:#457a8b;}.channela:hover{background:url(/icon/arrow1.gif)no-repeat