导航栏代码课件.docVIP

我们要做的导航条的效果如下： 鼠标移动上去背景变黑，并且字体颜色变成白色 其实做这款导航条很容易的，你只需要动动鼠标敲敲键盘，跟着KwooJan做就是了，呵呵 【第一步】我们要先做一个容器（要求：ID为“nav”，宽度为960px，高度为：35px，位于页面水平正中，与浏览器顶部的距离是30px；),这个容器就是放我们的导航的哟~代码如下： HTML代码： div id=nav/div 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代码 复制代码代码如下: div id=nav ul liCSS学习/li li学前准备/li li入门教程/li li提高教程/li li布局教程/li li精彩应用/li /ul /div CSS代码： 复制代码代码如下: #nav ul{ width:960px; height:35px; } 效果作出来了没有，下面是在IE6和FF中显示效果(其他浏览器效果大家自己测试，总结规律)： 效果不一样吧，没关系，IE6中盒子被撑大，FF中却没有，但是我们的“酒杯”却出来了，还有我们不希望我们的酒杯纵向排列，而是横向排列，怎么办呢？给大家一分钟时间想~~~ 想出来了没有？什么没有？ 没关系，我带着大家想想，因为li标签也是块状元素，所以他也有块状元素的“霸道”，不允许其他元素和自己处于同一行，总共六个li,所以他们六个就像台阶似的纵向排列起来了，我提示到这里，大家应该知道怎么做才能让这些“酒杯”横向排列了吧！^_^ 对喽~用浮动Float！可是让谁浮动呢，当然是li标签喽~代码如下： #nav ul li{ float:left;} 效果是不是和下面的一样呢 大家会发现虽然“酒杯”横向排列了，但IE6和FF中的效果还是不一样的 1）盒子(#nav)高度不一样 2) 在FF中“酒杯”前面有个大黑圆点，而IE6中却没有！ 解决上面这两个问题，也很容易，如下 1）做到这里标签ul和li有没有进行重置？只要我们在页面中新写一个标签，就要进行重置，做法是，将ul、li标签加入重置代码中“body,div,ul,li{padding:0; margin:0;}” 2）“酒杯”前面的大黑圆点，是FF给li标签定义的默认样式，我们只需要将li的默认样式去掉就是了，在li标签的CSS属性中加入“list-style:none;”就OK了 现在在瞅瞅，两种浏览器的显示效果是不是和下图一样了呢~ 如果你做到这里的效果和我说的不一样，没关系，我把做到目前第二步的代码发出来，你对着上面说的再看看，绝对可以学会 导航条1.rar (763 Bytes) 下载次数: 299 【第三步】 第二步的效果还不是我们想要的，所有的“酒杯”都没有保持“车距”，后面的文字全部贴着前面的文字。