发布时间 : 星期六 文章2天驾驭DIV+CSS!更新完毕开始阅读44085a81ec3a87c24028c40f
margin-top:30px;/*顶部30px*/ }
还有一点需要提醒的是,为了页面在浏览器的兼容性,不要忘记在CSS文件顶部加入标签重置代码哟~ 代码:
body,div{padding:0; margin:0;}
这里就不多说了,不明白的就看,课程顶部的课程关键词
怎么样,作出来了没有,效果是不是一个灰色条,位于页面的正中间,并且所有浏览器效果一样呢~呵呵
(如果没有做出来证明你没有认真看教程哟~用这种态度看教程会学不好的,本身我把整个XHTML+CSS的理论都压缩到教程里了,或者说教程的“知识点浓度”很高,有时需要你一字不漏的去品我说的话,不要一目十行的去看哟~只要你把我写的教程逐字逐句的研究透了,KwooJan保证你以后只要做出个页面就很Easy的兼容各种浏览器,并且代码绝对的精简!CSS文件加载速度大大提升哟~)
【第二步】
盒子做好了,我们就要往里面放导航条中的内容了“CSS学习 学前准备 入门教程 提高教程 布局教程 精彩应用”,如果我们把这内容(目前有6个),当成酒杯的话,如果直接放到盒子里面的话,肯定会乱,并且还会东倒西歪,一点顺序都没有,但是我们平时会用一个隔板将每个酒杯隔开,这样就是酒杯很有序的放入盒子,并且牢稳而且防震,方便使用!现在我们把这个隔板叫做“有序列表”起个英文名字叫:ul,里面的每个单元格我们也给起个英文名字叫“li”,大家想想里面的这个ul是不是和盒子里面的空间一样大,小了,酒杯照样放不稳,大了就放不进去了,所以我们定义UL的时候大小一定也要和外面的盒子大哟~,所以呢,我们的代码就知道怎么写了吧
HTML代码
CSS代码: #nav ul{
width:960px; height:35px; }
效果作出来了没有,下面是在IE6和FF中显示效果(其他浏览器效果大家自己测试,总结规律):
效果不一样吧,没关系,IE6中盒子被撑大,FF中却没有,但是我们的“酒杯”却出来了,还有我们不希望我们的酒杯纵向排列,而是横向排列,怎么办呢?给大家一分钟时间想~~~ 想出来了没有?什么没有?
没关系,我带着大家想想,因为
对喽~用浮动Float!可是让谁浮动呢,当然是
大家会发现虽然“酒杯”横向排列了,但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了 现在在瞅瞅,两种浏览器的显示效果是不是和下图一样了呢~
如果你做到这里的效果和我说的不一样,没关系,我把做到目前第二步的代码发出来,你对着上面说的再看看,绝对可以学会,代码如下:
html代码:
导航制作
/* CSS Document */
body,div,ul,li{padding:0; margin:0;} #nav{ width:960px; height:35px; background:#CCC;
margin:0 auto;/*水平居中*/ margin-top:30px;/*顶部30px*/ } #nav ul{ width:960px; height:35px; }