下载文档原格式
第三天二列和三列布局今天学习《十天学会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">此处显示id "side" 的内容</div><div id="main">此处显示id "main" 的内容</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 { background: #99FF99; height: 300px; width: 120px; float: left; }#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }</style></head><body><div id="content"><div id="side">此处显示id "side" 的内容</div><div id="main">此处显示id "main" 的内容</div></div></body></html>提示：可以先修改部分代码后再运行四、xhtml的块级元素(div)和内联元素(span)块级元素：就是一个方块，像段落一样，默认占据一行出现；内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。
第一章XHTML CSS基础知识学习本系列教程需有一定html和css基础，也就是指您之前做过网页，会用表格布局。
如果您刚开始学习网页制作，不知道什么是表格布局及html和css，建议您先去充电，否则学习本教程会非常吃力或者根本就听不懂。
由于时间关系，本教程只讲解一些基础知识，让您从原来的表格布局跨入到web标准（div+css）布局，会使用web标准制作出常见的页面，这也达到了本教程的目的。
本教程多以实例形式循序渐进讲解，实例涉及到哪些关键点或难点就讲解什么，较少讲解概念。
因为概念这些东西很难说明白，或者说明白你也不一定能听懂，听懂了也不一定能理解。
所以把概念留给大家以后再深入研究。
由于章节关系，没有把css和css hack单独分出，只是在用到的时候穿插入讲解了。
html 基础和css基础只在第一节中介绍了几点重要的。
下面我们开始第一章的学习一、xhtml css基础知识首先说一下我们这节课的知识点文档类型语言编码html标签css样式css优先级css盒模型组成1）文档类型当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML 的语法。
许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。
2）语言编码接下来我们还会发现这样一句话：<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />它标示文档的语言编码。
div+css两列布局与三列布局⼀、两列布局：1.左边定宽，右边⾃适应。
⽅法⼀：采⽤position：absollute;并设置margin-left的值。
例：#left{position:absolute;width:300px;top:0px;left:0px;background:#F00;}#right{background:#0FC;margin-left:300px;}<div id="left">左边定宽</div><div id="right">右边⾃适应</div>⽅法⼆：采⽤float;并设置overflow:auto;(隐藏溢出的内容)例：#left {float: left;width: 300px;background-color: blue;}#right {overflow: auto;background-color: red;}<div id="left">左边⾃适应</div><div id="right">右边定宽</div>⼆、三列布局：⽅法⼀：与两列布局类似，左右两边设置position：absolute；和top:0;left:0;right:0;中间设置margin-left和margin-right即可.*{padding:0px;margin:0px;}#left,#right{position:absolute;width: 300px;top:0;background-color: #0FC;}#left{left:0;}#right{right:0;}#main{margin:0 300px;background-color:#999;}<div id="left">左边定宽</div><div id="main">中间⾃适应</div><div id="right">右边定宽</div>⽅法⼆：左右采⽤float,中间设置 overflow:auto;和margin:0 300px;*{padding:0px;margin:0px;}#left,#right{float:left;width: 300px;background-color: #0FC;}#right{overflow:auto;float:right;}#main{margin:0 300px;background-color:#999;}<div id="left">左边定宽</div><div id="right">右边定宽</div> <div id="main">中间⾃适应</div> ps:欢迎指正优化。
DIV+CSS一列式布局实例任务目标：1、学会如何运用DIV+CSS设计一列式布局，效果如图2、学会如何设置布局的自适应效果和固定宽度效果。
实施步骤：步骤1：建立站点，准备素材用DW创建一个web站点，在站点内建立文件夹images和首页index.html，将素材放到文件夹images中。
步骤2：设计整体页面属性在对整个页面布局之前，首先来设置整体网页的页面属性，打开index.html，单击菜单栏的【窗口】|【CSS样式】命令，调出CSS样式面板，单击“新建CSS规则”按钮，弹出“新建CSS规则”对话框。
进行如图所示选择。
单击“确定”按钮，弹出“保存样式表文件”对话框，输入文件名“layout”，如图单击“确定”按钮，弹出“body的CSS规则定义”对话框，选择【分类】|【方框】，在填充和边界中输入“0”，如图选择【分类】|【类型】，大小选择“12像素”，行高选择为“150%”，修饰选择为“无”，单击“应用”、“确定”按钮。
步骤3：创建网页头部不跟header在设置好页面整体属性之后，接下来要创建网页的整体布局框架，首先涉及网页的header框架，header一般包括logo（网站标志），nav（网站导航）两个部分，创建时首先建立一个header的DIV，然后在里面分别创建一个logo的DIV和一个nav的DIV。
1）设置header在index.html中，选择工具栏中的“布局”，单击插入DIV标签按钮，弹出“插入DIV 标签”对话框，在对话框中单击“新建CSS样式”按钮，弹出“新建CSS规则”对话框，进行如图所示选择和输入。
单击“确定”按钮，弹出“#header的CSS规则定义”对话框，在CSS定义页面中，选择【分类】|【方框】，输入宽为“800像素”，高为“129像素”，选择【分类】|【背景】，单击“浏览”按钮，选择文件夹images里的header.gif文件，如图：单击“确定”按钮，返回“插入DIV标签”对话框，单击“确定”按钮。
____________________________________________________________________________________________ DIV+CSS网页设计布局教程DIV+CSS网页设计布局技巧如何实现DIV+CSS网页设计布局在网页设计过程中，DIV+CSS工具的使用非常广泛。
DIV+CSS不仅可以优化网站的布局和标签、做出精美的页面，还有助于搜索引擎抓取网页内容、提高网站排名。
下面就从网页的页面布局角度，和大家分享一下Div+CSS的使用技巧。
一、如何应用Div+CSS布局？网页设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks 等图片处理软件将需要制作的界面布局简单的构画出来，以下是已经构思好的界面布局图：下面，需要根据构思图来规划一下页面的布局，仔细分析之后不难发现，图片大致分为以下几个部分：1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；____________________________________________________________________________________________3、底部，包括一些版权信息。
有了以上的分析，就可以很容易的布局了，设计层如下图:根据上图，可以再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了：DIV结构如下：│body {}/*这是一个HTML元素源码天空，具体我就不说明了*/____________________________________________________________________________________________ └#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {}/*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/至此，页面布局与规划已经完成。
学习DIV+CSS⼀个最简单的布局⼀⾏三列DIV代码!CSS代码如下：body{text-align:center;margin:0px;padding:0px;}#father{position:relative;width:750px;text-align:center;}#banner{height:96px;background-color:#999;text-align:left; padding:0px;margin:0px;}#b-left{width:159px;margin:0px;padding:0px;float:left;}#b-center{margin:0px;float:left;}#b-right{text-align:left;marign:0px;padding:0px;width:108px;background-color:#00ffff;height:96px;float:right;}HTML代码如下：<div id=banner><div id=b-left> <img src="images/51.gif" /> </div><div id=b-center><img src="images/tupian26.gif" /></div><div id=b-right><ul style="list-style-type:none;"><br /><li>设为⾸页</li><li>加⼊收藏</li><li>联系我们</li></ul></div></div>现在总结⼀下：⼀⾏三列的布局有以下⼏种思想：第⼀都做成绝对的布局，设定每⼀个块和周围的距离第⼆就是利⽤嵌套的⽅法，把任意两个先当成⼀个，然后再把他们和第三个⼀起设！不过我这⾥好像直接把三个块都是分开设的，好像也没有问题！呵呵！。
