div+css布局教程
DIV+CSS网页布局初级入门系列教程-2要点
第三天二列和三列布局今天学习《十天学会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)块级元素：就是一个方块，像段落一样，默认占据一行出现；内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。
CSS+Div布局全
8.5.1 练习案例-电子产品
4．利用#menu样式为menu的<div>标签添加图像背景。在#nav标签 中，输入文字“公司介绍 产品展示 客户服务 人员招募 互动社区”， 并设置#nav样式，字体大小为16px，行高度为30px，颜色为#FFF。 5．设置#nav a:link，#nav a:visited样式属性，颜色为#FFF，文字装 饰为无，设置#nav a:hover样式属性，文字装饰为下划线，完成导 航条的制作。 6．在ID名称为info的<div>标签中，插入1*3表格，宽度为100%，将 三个图像分别插入到单元格中，设置#info样式背景为黑色。 素材所在位置：光盘/案例素材/ch08/练习案例-电子产品。 案例布局要求如图8-67所示，案例效果如图8-68所示。
无浮动
8.2.3 浮动方式
#box1 { height: 100px; width: 150px; background-color:
#F90; }
#box2 { height: 100px;
width: 200px; background-color: #C30; } #box3 { height: 100px; width: 250px; background-color: #3FF; }
8.1.2 盒子属性
在CSS样式中， 将盒子模型的 内边距、边框 和外边距，按 top、bottom、 left、right的四 个方向，分别 进行定义和设 置，描述盒子 属性。
8.1.2 盒子属性
例如，在网页中创建一个<div>标签，ID标识为 Div1，并在其中插入一个图像，代码如下：
#apDiv1 { position:absolute;
Div+CSS网站布局应用教程第6章 设置页面背景图像
6.4.1
背景图像显示区域background-origin属性
默认情况下，background-position属性总是以元素左上角原点作为背景 图像定位，使用CSS 3.0中新增的background-origin属性可以改变这种背景 图像定位方式，通过该属性可以大大改善背景图像的定位方式，能够更加灵 活的对背景图像进行定位。 background-origin属性的语法格式如下。 background-origin: border | padding | content
自测4——为网页设置背景图 像
自测4：为网页设置背景图像 最终文件：光盘\最终文件\第6章\6-3-1.hห้องสมุดไป่ตู้ml 视 频：光盘\视频\第6章\6-3-1.swf
6.3.2
background-repeat属性
为网页设置的背景图像默认情况下会以平铺的方式显示，在CSS中可以 通过background-repeat属性设置背景图像重复或不重复的样式，以及背景图 像的重复方式。 background-repeat属性的语法格式如下。 background-repeat: no-repeat | repeat-x | repeat-y | repeat;
自测1——设置网页背景颜色
自测1：设置网页颜色 最终文件：光盘\最终文件\第6章\6-1-1.html 视 频：光盘\视频\第6章\6-1-1.swf
6.1.2
为网页元素设置不同的背景颜色
通过background-color属性，不仅可以为页面设置背景颜色，而且还可 以设定HTML中几乎所有元素的背景颜色，因而，大多数页面都通过为元素 设定不同的背景颜色来为页面分块。
自测6——实现固定不动的 背景图像
经典div+css网页标准布局实例教程
第一章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" />它标示文档的语言编码。
用CSSDIV开发技术实现网页布局
三、高级技巧
除了基本的布局实践技巧外，CSS DIV开发技术还提供了一些高级技巧，可 以进一步提升网页布局的美感和效果。
1、背景图像
通过使用CSS的background-image属性，可以为网页元素添加背景图像，从 而增加页面的视觉效果。此外，background-size、background-repeat和 background-position等属性还可以控制背景图像的大小、重复和位置等。
参考内容
随着互联网的快速发展，网页布局技术也在不断演进。在过去的几年里， DIV CSS布局技术成为了网页设计的主流。本次演示将介绍DIV CSS网页布局技术， 包括其基本概念、优点、应用场景以及发展方向。
一、什么是DIV CSS布局技术？
DIV CSS布局技术是一种基于HTML和CSS的网页布局技术。它使用DIV标签和 CSS样式表来构建网页结构，实现网页元素的排版和样式设计。DIV CSS布局技术 将网页分成若干个DIV块，每个块由一个或多个HTML元素组成，再通过CSS样式表 来控制这些元素的排版、位置、颜色、字体等属性。
二、布局实践
在实践中，我们可以使用CSS DIV开发技术来实现各种复杂的网页布局。下 面介绍几种常见的布局实践技巧：
1、浮动布局
浮动布局是早期实现网页布局的方法之一，通过设置浮动属性float，可以 让元素左右浮动，从而实现在页面上的布局。例如，将侧边栏设置为浮动，使其 浮动在页面主体内容的右侧。
在布局实践中，我们可以采用浮动布局将主体内容和侧边栏浮动在一起，同 时使用定位布局将导航栏固定在页面的顶部。此外，我们还可以为网站添加背景 图像，以提升页面的视觉效果。
通过分析实际案例，我们可以看到CSS DIV开发技术在网页布局中的重要性 和广泛应用。在实际开发中，我们需要根据具体需求选择合适的布局技巧和方法， 以提高网页的可用性和吸引力。
div+css两列布局与三列布局
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布局快速入门.ppt
6.编写基本CSS代码
如何使页面居中？
将代码保存后可以看到，整个页面是居中显示的， 那么究竟是什么原因使得页面居中显示呢？ 是因为我们在#container中使用了以下属性：
margin:0 auto;
按照前面的说明，可以知道，表示上下边距为0， 左右为自动，因此该层就会自动居中了。 如果要让页面居左，则取消掉auto值就可以了， 因为默认就是居左显示的。 通过margin:auto我们就可以轻易地使层自动居中 了。
7.编写各部份详细的CSS代码
当我们写好了页面大致的DIV结构后，我们就 可以开始细致地对每一个部分进行制作了。
/*基本信息*/ body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} a:link,a:visited {font-size:12px;text-decoration:none;} a:hover{}
代码
/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;} /*页面层容器*/ #container {width:100%} /*页面头部*/ #Header {width:800px;margin:0 auto;height:100px;background:#FFCC99} /*页面主体*/ #PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00} /*页面底部*/ #Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}
div+CSS一列式布局
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工具的使用非常广泛。
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代码!
学习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>现在总结⼀下：⼀⾏三列的布局有以下⼏种思想：第⼀都做成绝对的布局，设定每⼀个块和周围的距离第⼆就是利⽤嵌套的⽅法，把任意两个先当成⼀个，然后再把他们和第三个⼀起设！不过我这⾥好像直接把三个块都是分开设的，好像也没有问题！呵呵！。