教你制作最精良的css自定义导航条.docxVIP

2019年教你制作最精良的CSS自定义导航条 　　 篇一：导航条制作css ? 　　 导航条制作css+div ? 　　 ? 　　 ? 　　 ? 　　 ? 　　 ? 　　 ? 　　 body,div,ul,li{margin:0;padding:0;}//标签重置 ? 　　 #nav{width:600px;height:35px;margin:0auto;margin-top:30px;background:#CCC;}//容器。设置固定宽与高，居中。可设置背景颜色background来调试。 ? 　　 #navul{width:600px;height:35px;}//将宽高设置成与容器一#navulli{float:left;list-style:none;line-height:35px;padding:010px;text-align:center;width:100px;}//li左浮动，清除掉黑点样式。垂直居中用行高line-height。设置每一li的宽度width并将其文字居中text-align.在设置每一li之间的距离。 ? 　　 #navullia{color:#00F;text-decoration:none;}//a标签最后添加。可以添加display:block将a标签变成块级元素。（兼容性设置float:left）尝试设置block，在看看a:hover中background变化。 ? 　　 #navullia:hover{color:#006;text-decoration:underline;} ? 　　 ? 　　 ? 　　 ? 　　 ? 　　 ? 　　 首页 ? 　　 新闻天下 ? 　　 资源共享 ? 　　 联系我们 ? 　　 ? 　　 ? 　　 ? 　　 ? 　　 篇二：导航条制作 ? 　　 【第一步】我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；),这个容器就是放我们的导航的哟~代码如下： ? 　　 HTML代码： ? 　　 ? 　　 CSS代码： ? 　　 #nav{ ? 　　 width:960px; ? 　　 height:35px; ? 　　 background:#CCC;/*为了便于查看区域范围大小，故而加个背景色*/margin:0auto;/*水平居中*/ ? 　　 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代码： ? 　　 #navul{ ? 　　 width:960px; ?