2天轻松驾驭div+css实战版
当你看完教程，肯定会说XHTML+CSS就这么简单！easy！
【例子】
要求：
1）宽度、高度均是200像素；
2）颜色为红色#900；
自己做做，看看能不能作出来？先不要看我的代码，如果真的做不出来，就下载下来，跟着我下面说的一步一步修改。
下面是我的代码：
/* CSS Document */
#redBlock{
width:200px;
height:200px;
background:#900;
}
在IE6和FF中显示效果如下图：
怎么样，比较容易吧~，但是你们有没有发现，红色区域离浏览器的顶部和左边的边距IE6和FF的不一样，有没有发现？这样的话，我们作出来的页面浏览器就不兼容了，效果不一样了？为什么会这样？
这是因为每个浏览器都有一个内置的CSS文件，当你没有对某个标签的属性设置的时候，浏览器就会应用内置的CSS文件，怎么才能做到浏览器兼容？不着急，你只需要在CSS 文件中，将我们目前应用到得标签body和div置零就OK了，代码这么写
body,div{padding:0; margin:0;}
当把这句话加上之后，是不是两款浏览器显示效果一样了吧~如下图
好，我们接着来，现在再加一个条件
让红色区域与浏览器的顶部和左边距离为20像素；
怎么样，有没有思路？没有思路没关系，继续向下看
我们，只需要设置红色方块的外边距就可以了，添加如下CSS代码：margin-top:20px;
margin-left:20px;
效果如下图
这样就使红色区域定位于页面坐标(20,20)处了，与浏览器上边距和左边距都为20像素。不过上面的这种写法我们可以精简为
margin:20px 0 0 20px;
其中的数值顺序是：上右下左。
而margin:20px 0;则和margin:20px 0 20px 0;是等价的哟~只不过是更加精简而已，这样写CSS加载速度会更快。
我们接着将问题延伸，怎样才能让红色区域水平定位于浏览器的正中间，无论浏览器窗口的大小，显示器分辨率的大小。
也很简单，刚刚加的两句话"margin-top:20px;margin-left:20px;"修改为
margin:0 auto;
怎么样，有意思吧，红色区域是不是位于浏览器的正中间了~
好~！到这里第一节课结束，是不是很简单，或者太简单了!!!KwooJan可以保证,后面的课程照样很简单，当你看完教程，肯定会说XHTML+CSS就这么简单！easy！
如果你有看不懂的，赶紧点击文章最上面的课程关键词，只要你看了这些关键词，相信你绝对能明白！
大家应该明白Float的作用了吧，就是为了消除块状元素“霸权主义”的一把利器！
页面布局有两种方式
1）浮动Float
2）定位Position
今天就来一个小小的练习，让大家理解Float的含义
【例子】
要求：
1）两个方块，一个红色#900，一个蓝色#009；
2）红色方块宽度和高度均为200像素，蓝色方块
宽度为300像素，高度为200像素；
3）红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素；页面效果如下：
源代码如下：
/* CSS Document */
body,div{padding:0; margin:0;}
#redBlock{
width:200px;
height:200px;
background:#900;
margin-top:20px;
margin-left:20px;
}
#blueBlock{
width:300px;
height:200px;
background:#009;
margin-top:20px;
margin-left:20px;
}
大家应该注意到了，虽然红色方块的宽度并不是100%，但是蓝色并未和红色处于同一行，这就是块状元素比较“霸道”的一点，（即使块状元素的宽度不是100%，它也不允许其他元素和他同在一行）为了消除这种“霸权”，让红色和蓝色方块都处在一行，如图：
此时就需要拿出我们的利器Float！只需要在红色方块的CSS里面加上“float:left;”，这时候在IE6中可以看到蓝色方块的确跑到红色方块的后面了，并且处于一行了，但是在FireFox中却变成了如下效果：
这时候就需要注意了，FF中如果前面的区域浮动了，后面的那个区域很有可能就会和前面的区域发生重叠并错位。
怎么才能解决这个问题，解决这个浏览器兼容的问题，很容易，只需要在蓝色方块的CSS 代码中也加入“Float:left;”，问题就解决了，加上试试，看看在FF中蓝色方块是不是和红色方块处于一行了~
到这里，大家应该明白Float的作用了吧，就是为了消除块状元素“霸权主义”的一把利器！在布局页面的时候有时候是需要消除块状元素霸权主义才能布局好哟.
细心的同学会注意到，在IE6中红色方块距离浏览器的左边距并不是CSS代码中定义的20像素，而是40像素，如下图：
其实这是IE6的一个BUG，(IE6双倍边距BUG)，只要满足下面3个条件才会出现这个BUG:
1）要为块状元素；
2）要左侧浮动；
3）要有左外边距(margin-left)；
解决这个BUG很容易，只需要在相应的块状元素的CSS树形中加入“display:inline;”，代码如下：
#redBlock{
width:200px;
height:200px;
background:#900;
margin-top:20px;
margin-left:20px;
float:left;
display:inline;
}
现在再看看，是不是IE6和FF显示一样了呢~
呵呵，这节课也比较容易吧，如果大家有不明白的可以留言，我会做进一步解释。
下节课，我们讲讲“浮动清除(Clear)”问题！
最终代码如下：
/* CSS Document */
body,div{padding:0; margin:0;}
#redBlock{
width:200px;
height:200px;
background:#900;
margin-top:20px;
margin-left:20px;
float:left;
display:inline;
}
#blueBlock{
width:300px;
height:200px;
background:#009;
margin-top:20px;
margin-left:20px;
float:left;
}
目的就是为了清除蓝色方块的浮动对下面绿色方块的影响！是影响哟~是清除影响，而不是清楚蓝色方块的浮动，或者说清除蓝色方块的浮动对下面区域块产生的作用！
还记得第二课我们做的例子的效果么？最后效果是，红色方块和蓝色方块都处于一行，我们使用“Float:left”，打击了块状元素的“霸道”即块状元素不允许其他元素和它处于同一行。我们将红色方块的CSS代码中加入了“Float:left;”后，红色方块终于允许蓝色方块和它处于同一行。如图：
我们换一种方法表达上面的意思，因为红色方块的“左侧浮动”，才导致蓝色方块上移至红色方块的尾后；
在上个例子中，为了达到浏览器兼容性，我们分别在红色蓝色方块CSS代码中分别加了“Float:left;”，这样IE和FF中显示效果一样，如果此时我们还想放一个宽度400像素，高度100的绿色方块，并让其处于第二行，效果如下图：
可是这时候不管怎么放，在IE中的效果始终是
导致绿色拍到蓝色的后面这种情况就是因为蓝色方块CSS代码中含有"Float:left;"，但是为了浏览器兼容性，又不能去掉(什么？这句话看不明白，只能说明第二节课你没有好好学，好好品味！)，怎么办？
好办~！只要在CSS代码中加入下面这段代码：
.clear{clear:both;}
并在HTML代码中加入下面代码：
上面这句话究竟加在那个位置呢，要加在蓝色方块和绿色方块中间，然后看看效果是不是我们想要的了~^_^
目的就是为了清除蓝色方块的浮动对下面绿色方块的影响！是影响哟~是清除影响，而不是清楚蓝色方块的浮动，或者说清除蓝色方块的浮动对下面区域块产生的作用！（仔细品品我说的这句话！）
如果还是不明白，你就在红色方块和蓝色方块中间加上“
”，看看效果变成什么样子，然后再品品我刚才说的话！这节课就到这里，下节课我们做一个导航条，很实用的哟！一定要把前
三节吃透，不然第四节会跟不上理解不透！
第三课全代码如下：
其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY ！！！
课程开始：
前三节课，我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款，经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以再它的基础上修改而来哟~，厉害吧~！其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对，EASY ！！！
OK！我们要做的导航条的效果如下：
鼠标移动上去背景变黑，并且字体颜色变成白色
其实做这款导航条很容易的，你只需要动动鼠标敲敲键盘，跟着KwooJan做就是了，呵呵
【第一步】我们要先做一个容器（要求：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代码：
#nav ul{
width:960px;
height:35px;
}
效果作出来了没有，下面是在IE6和FF中显示效果(其他浏览器效果大家自己测试，总结规律)：
效果不一样吧，没关系，IE6中盒子被撑大，FF中却没有，但是我们的“酒杯”却出来了，还有我们不希望我们的酒杯纵向排列，而是横向排列，怎么办呢？给大家一分钟时间想~~~ 想出来了没有？什么没有？
没关系，我带着大家想想，因为
对喽~用浮动Float！可是让谁浮动呢，当然是
#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了
现在在瞅瞅，两种浏览器的显示效果是不是和下图一样了呢~
如果你做到这里的效果和我说的不一样，没关系，我把做到目前第二步的代码发出来，你对着上面说的再看看，绝对可以学会，代码如下：
html代码：
CSS代码：
/* 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;
}
#nav ul li{
float:left;
list-style:none;
}
【第三步】
第二步的效果还不是我们想要的，所有的“酒杯”都没有保持“车距”，后面的文字全部贴着前面的文字。
好~！我们现在就将他们分开！设置
CSS代码：
#nav ul li{
width:100px;
float:left;
list-style:none;
}
为了便于观察我们暂且将