教你制作最精良的CSS自定义导航条.docVIP

教你制作最精良的CSS自定义导航条 　　篇一：导航条制作css 　　导航条制作css+div 　　 　　 　　 　　 　　无标题文档 　　 　　body,div,ul,li{margin:0; padding:0;} //标签重置 　　#nav{width:600px; height:35px; margin:0 auto; margin-top:30px; background:#CCC;}//容器。设置固定宽与高，居中。可设置背景颜色background来调试。 　　#nav ul{width:600px; height:35px; } //将宽高设置成与容器一 #nav ul li{float:left; list-style:none; line-height:35px; padding:0 10px; text-align:center; width:100px; }//li左浮动，清除掉黑点样式。垂直居中用行高line-height。设置每一li的宽度width并将其文字居中text-align.在设置每一li之间的距离。 　　#nav ul li a{color:#00F; text-decoration:none;} //a标签最后添加 。可以添加display:block将a标签变成块级元素。（兼容性设置float:left）尝试设置block，在看看a:hover中background变化。 　　#nav ul li a:hover{color:#006; text-decoration:underline;} 　　 　　 　　 　　 　　 　　首 页 　　新闻天下 　　资源共享 　　联系我们 　　 　　 　　 　　 　　篇二：导航条制作 　　第一步我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；),这个容器就是放我们的导航的哟~代码如下： 　　HTML代码： 　　 　　CSS代码： 　　#nav{ 　　width:960px; 　　height:35px; 　　background:#CCC;/*为了便于查看区域范围大小，故而加个背景色*/ margin:0 auto;/*水平居中*/ 　　margin-top:30px;/*顶部30px*/ 　　} 　　还有一点需要提醒的是，为了页面在浏览器的兼容性，不要忘记在CSS文件顶部加入标签重置代码哟~ 　　代码： 　　body,div{padding:0; margin:0;} 　　这里就不多说了，不明白的就看，课程顶部的课程关键词 　　怎么样，作出来了没有，效果是不是一个灰色条，位于页面的正中间，并且所有浏览器效果一样呢~呵呵 　　(如果没有做出来证明你没有认真看教程哟~用这种态度看教程会学不好的，本身我把整个XHTML+CSS的理论都压缩到教程里了，或者说教程的“知识点浓度”很高，有时需要你一字不漏的去品我说的话，不要一目十行的去看哟~只要你把我写的教程逐字逐句的研究透了，KwooJan保证你以后只要做出个页面就很Easy的兼容各种浏览器，并且代码绝对的精简！CSS文件加载速度大大提升哟~) 　　第二步 　　盒子做好了，我们就要往里面放导航条中的内容了“CSS学习 学前准备 入门教程 提高教程 布局教程 精彩应用”，如果我们把这内容(目前有6个)，当成酒杯的话，如果直接放到盒子里面的话，肯定会乱，并且还会东倒西歪，一点顺序都没有，但是我们平时会用一个隔板将每个酒杯隔开，这样就是酒杯很有序的放入盒子，并且牢稳而且防震，方便使用！现在我们把这个隔板叫做“有序列表”起个英文名字叫：ul,里面的每个单元格我们也给起个英文名字叫“li”，大家想想里面的这个ul是不是和盒子里面的空间一样大，小了，酒杯放不进去，大了杯子就会不稳，所以我们定义UL的时候大小一定也要和外面的盒子一样大哟~,所以呢，我们的代码就知道怎么写了吧 　　HTML代码 　　 　　 　　CSS学习 　　学前准备 　　入门教程 　　提高教程 　　布局教程 　　精彩应用 　　 　　 　　CSS代码： 　　#nav ul{ 　　width:960px; 　　height:35px; 　　} 　　效果作出来了没有，下面是在IE6和FF中显示效果(其他浏览器效果大家自己测试，总结规律)： 　　效果不一标签喽~代码如下： #nav ul li{ float:left;}