51CTO下载-2天轻松驾驭div+css实战版

来源：网络收集时间：2026-09-11

导读：很好的学习资料,相信他在p布局上能够给你很多帮助。当你看完教程，肯定会说XHTML+CSS就这么简单！easy！【例子】要求： 1）宽度、高度均是200像素； 2）颜色为红色#900；自己做做，看看能不能作出来？先不要看我的代码，如果真的做不出来，就下载下来，

很好的学习资料,相信他在p布局上能够给你很多帮助。

当你看完教程，肯定会说XHTML+CSS就这么简单！easy！

【例子】要求：

1）宽度、高度均是200像素； 2）颜色为红色#900；

自己做做，看看能不能作出来？先不要看我的代码，如果真的做不出来，就下载下来，跟着我下面说的一步一步修改。下面是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://doc.guandang.net/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://doc.guandang.net/1999/xhtml"> <head>

<body>

</body> </html>

/* CSS Document */ #redBlock{ width:200px; height:200px; background:#900; }

在IE6和FF中显示效果如下图：

很好的学习资料,相信他在p布局上能够给你很多帮助。

怎么样，比较容易吧~，但是你们有没有发现，红色区域离浏览器的顶部和左边的边距IE6和FF的不一样，有没有发现？这样的话，我们作出来的页面浏览器就不兼容了，效果不一样了？为什么会这样？

这是因为每个浏览器都有一个内置的CSS文件，当你没有对某个标签的属性设置的时候，浏览器就会应用内置的CSS文件，怎么才能做到浏览器兼容？不着急，你只需要在CSS文件中，将我们目前应用到得标签body和p置零就OK了，代码这么写 body,p{padding:0; margin:0;}

当把这句话加上之后，是不是两款浏览器显示效果一样了吧~如下图

很好的学习资料,相信他在p布局上能够给你很多帮助。

好，我们接着来，现在再加一个条件

让红色区域与浏览器的顶部和左边距离为20像素；怎么样，有没有思路？没有思路没关系，继续向下看

我们，只需要设置红色方块的外边距就可以了，添加如下CSS代码： margin-top:20px; margin-left:20px; 效果如下图

很好的学习资料,相信他在p布局上能够给你很多帮助。

这样就使红色区域定位于页面坐标(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！

如果你有看不懂的，赶紧点击文章最上面的课程关键词，只要你看了这些关键词，相信你绝对能明白！

很好的学习资料,相信他在p布局上能够给你很多帮助。

大家应该明白Float的作用了吧，就是为了消除块状元素“霸权主义”的一把利器！

页面布局有两种方式 1）浮动Float 2）定位Position

今天就来一个小小的练习，让大家理解Float的含义【例子】要求：

1）两个方块，一个红色#900，一个蓝色#009； 2）红色方块宽度和高度均为200像素，蓝色方块宽度为300像素，高度为200像素；

3）红色方块蓝的上外边距(margin-top)和左外边距(margin-left)均为20像素；页面效果如下：

很好的学习资料,相信他在p布局上能够给你很多帮助。

源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://doc.guandang.net/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://doc.guandang.net/1999/xhtml"> <head>

很好的学习资料,相信他在p布局上能够给你很多帮助。

<body>

</body> </html>

/* CSS Document */

body,p{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%，它也不允许其他元素和他同在一行）为了消除这种“霸权”，让红色和蓝色方块都处在一行，如图：

很好的学习资料,相信他在p布局上能够给你很多帮助。

此时就需要拿出我们的利器Float！只需要在红色方块的CSS里面加上“float:left;”，这时候在IE6中可以看到蓝色方块的确跑到红色方块的后面了，并且处于一行了，但是在FireFox中却变成了如下效果：

这时候就需要注意了，FF中如果前面的区域浮动了，后面的那个区域很有可能就会和前面的区域发生重叠并错位。

怎么才能解决这个问题，解决这个浏览器兼容的问题，很容易，只需要在蓝色方块的CSS代码中也加入“Float:left;”，问题就解决了，加上试试，看看在FF中蓝色方块是不是和红色方块处于一行了~

到这里，大家应该明白Float的作用了吧，就是为了消除块状元素“霸权主义”的一把利器！在布局页面的时候有时候是需要消除块状元素霸权主义才能布局好哟.

细心的同学会注意到，在IE6中红色方块距离浏览器的左边距并不是CSS代码中定义的20像素，而是40像素，如下图：

很好的学习资料,相信他在p布局上能够给你很多帮助。

其实这是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; }

很好的学习资料,相信他在p布局上能够给你很多帮助。

现在再看看，是不是IE6和FF显示一样了呢~

< …… 此处隐藏：5389字，全部文档内容请下载后查看。喜欢就下载吧 ……

51CTO下载-2天轻松驾驭div+css实战版.doc 将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印

下载这篇word文档

本文链接：https://www.jiaowen.net/fanwen/1815858.html（转载请注明文章来源）

上一篇：公司员工文明行为规范1
下一篇：第二章马克思主义中国化理论成果的精髓

资料大全

热门排行