DIVCSS网页布局初级入门系列教程2要点.docxVIP

第三天 二列和三列布局 今天学习《十天学会 web 标准 (div+css) 》的二列和三列布局，将涉及到以下内容和 知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml 的块级元素 (div) 和内联元素 (span) float 属性 三列自适应宽度 三列固定宽度 三列固定宽度居中 IE6 的 3 像素 bug 一、两列自适应宽度 下面以常见的左列固定右列自适应为例，因为  div  为块状元素，默认情况下占据一行 的空间，要想让下面的  div  跑到右侧，就需要做助  css  的浮动来实现。首先创建  html  代码 如下： div id=side  此处显示  id side  的内容 /div div id=main  此处显示  id main  的内容 /div 按照如图所示的创建方法， 把两个 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 的空隙，大家可以试一下。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / style #side { background: #99FF99; height: 300px; width: 120px; float: left; } #main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; } /style /head body div id=side div id=main  此处显示此处显示  id side id main  的内容 /div 的内容 /div /body /html 提示：可以先修改部分代码后再运行 二、两列固定宽度 有了前面的基础， 两列固定宽度就容易多了， 只需要把 #main 的宽度由百分比改为固 定值，如下图： 三、两列固定宽度居中 两列固定宽度居中，需要在两列固定宽度的基础上改进，在学一列固定宽度居中时， 我们知道让它居中的方法，所以这里需要在这两个  div  之外再加一个父  div  ： div id=content div id=side  此处显示  id side  的内容 /div div id=main  此处显示  id main  的内容 /div /div 操作方法：在源代码里选中这两个  div  的代码后，点击工具栏上插入  div  按钮，填写 id  后确定，得到如上的代码 下面就需要设置  #content  的样式了，我们知道，  #side  的宽度为  120px  ，#main 宽度为  350px  ，那么 #content  的宽度应该为这两者之和，然后设置  #content  居中，那 么整体就居中了： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / style #content { width:470px; margin:0 auto;} #side { backg