DIV+CSS网页布局初级入门系列教程2.docx
- 文档编号：24090161
- 上传时间：2023-05-24
- 格式：DOCX
- 页数：57
- 大小：1.27MB
DIV+CSS网页布局初级入门系列教程2.docx
《DIV+CSS网页布局初级入门系列教程2.docx》由会员分享，可在线阅读，更多相关《DIV+CSS网页布局初级入门系列教程2.docx（57页珍藏版）》请在冰豆网上搜索。
DIV+CSS网页布局初级入门系列教程2
第三天二列和三列布局
今天学习《十天学会web标准（div+css）》的二列和三列布局，将涉及到以下内容和知识点
▪二列自适应宽度
▪二列固定宽度
▪二列固定宽度居中
▪xhtml的块级元素（div）和内联元素（span）
▪float属性
▪三列自适应宽度
▪三列固定宽度
▪三列固定宽度居中
▪IE6的3像素bug
一、两列自适应宽度
下面以常见的左列固定右列自适应为例，因为div为块状元素，默认情况下占据一行的空间，要想让下面的div跑到右侧，就需要做助css的浮动来实现。
首先创建html代码如下：
按照如图所示的创建方法，把两个div都创建出来，或手工写出代码。
div创建完成后，开始创建css样式表，代码如下：
#side{background:
#99FF99;height:
300px;width:
120px;float:
left;}
#main{background:
#99FFFF;height:
300px;width:
70%;margin-left:
120px;}
先创建#side的样式，为了便于查看，设置了背景色。
注意，side的浮动设置为向左浮动；
然后创建#main样式，注意这里设置#main的左边距为120px。
预览结果如下：
当我们拖动浏览器窗口变大变小时，#main的宽度也会跟着改变。
这里设置margin-left:
120px;正好让出#side占去的120px宽度，如果这里设置为122px的话，中间将出现2px的空隙，大家可以试一下。
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">