美化我的网页----------css+div布局页面（教案）
实训目的：
1、学会css 样式的创建、编辑和应用
2、学会AP div的创建和参数的设置
3、学会使用css+div布局和美化网页。
实训步骤：
1、将素材库chaprter3 中的SX7文件夹复制到D：\根目录下。运行dreamweaver cs5 ,新建站点“网页特效制作”，站点文件夹为D:\SX7。打开站点根目录新建空白文档index.html,修改标题为“CSS+DIV布局网页”。
2、制作基本结构
（1）选择文档工具栏中的“拆分”视图下的
标签，将所有页面用一个大的页面层容器
（2）在#container 块中写入div 的基本结构，将页面层容器文字替换为如下代码，如图3—2所示：
（3）选择“窗口→CSS 样式”命令或按【shift+f11】组合键打开“CSS样式”面板，如图3—3所示，
◆图3—3“CSS样式”面板
单击“CSS样式面板右下方”的“新建CSS规则”按钮，打开新建CSS规则对话框。在选择器类型中选择“标签（重新定义html元素）“，在选择器名称“文本框中输入”body”,在”规则定义“项中选择”仅限该文档“，如图3—4所示，单击”确定“按钮，弹出”body的CSS规则定义“对话框，如图3—5 所示
◆图3—4 新建CSS规则对话框
◆图3—5 新建CSS规则对话框
在body的CSS规则定义对话框的分类列表中选择方框，设置“填充“全部为0，边界全部为0，设置完成后单击确定按钮。视图如图3—6所示。
（4）定义#container 块的样式。单击“CSS样式面板“右下方的“新建CSS 规则”按钮，打开“新建CSS规则”对话框。在选择器类型中选择“复合内容（基于选择的内容）”，在选择器名称文本框中输入“#container”，在“规则定义”项中选择“仅限于该文档”，如图3—7所示，单击确定按钮，弹出“#container的CSS规则定义对话框。
◆图3—7 新建CSS规则对话框
在“#container的CSS规则定义对话框中的分类列表框中选择方框选项，设置padding全部为0，margin的left为-350ＰＸ，如图３－８所示分类列表框中选择定位选项，设置ｐｏｓｉｔｉｏｎ为ｒｅｌａｔｉｖｅ，ｌｅｆｔ为５０％，如图３－９所示，设置完成后，单击确定按钮，添加＃ｃｏｎｔａｉｎｅｒ样式后的拆分视图如图３－１０所示。
设置
项设置
图３－１０添加＃ｃｏｎｔａｉｎｅｒ样式后的拆分视图
4、充实内容
（1）在banner层中插入图片并编辑CSS样式表。
①在“设计”视图中将“横幅图片”文字删除。
②选择“插入→图像”命令或按【ctrl+alt+I】组合键，打开“选择图
像源文件”对话框，选择“images”文件夹中的banner.gif,单击“确
定”按钮。
③参照步骤2（4），新建#banner的CSS样式表，在“#banner的CSS规
则定义”对话框中的“分类”列表框中选择“方框”选项，设置“padding”
全部值为0，“margin”的全部为0，如图3—11所示。设置完成后，单
击“确定”按钮，完善banner层后的“拆分”视图如图3-12所示。
◆图3—11 #banner的CSS规则定义对话框
◆图3—12完善banner层后的拆分视图
（2）在leftbar层中插入图片文字并编辑CSS样式表。
①在“设计”视图中将“侧边栏”文字删除。
②选择“插入→图像”命令或按【ctrl+alt+I】组合键，打开“选择图
像源文件”对话框，插入“图像”，在”选择图像源文件“对话框中选择“images”文件夹中的selfpic.jpg和selfpic2.jpg,单击“确定”按钮。
③分别在插入图像下方输入leftbar.txt中的文字，如图3-13所示
◆图3—13在leftbar层中插入图片和文字后的拆分视图
④参照步骤2（4），新建#leftbar和#leftbar p的CSS样式表。
新建#leftbar的CSS样式表，在#leftbar的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项，设置‘width“为150px,”float”
为left，“padding”的值分别为20px,0，30px,0,“margin”的全部为0，在分类列表框中选择“类型”选项，设置“font-size”为12px;在分类列表框中选择”区块”选项，设置”text-align”为center.设置完成后，单击“确定”按钮。
新建#leftbar p的CSS样式表，在#leftbar的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项，设置“padding”的left值为12px, “padding”的right 值为30px,设置完成后，单击“确定”按钮。添加#leftbar p和#leftbar样式后的“拆分”视图如图3-14所示。
◆图3—14添加##leftbar和#leftbar p样式后的拆分视图
（3）在content层中插入文字并编辑CSS样式表
①在“设计”视图中将“页面主体”文字替换成content.txt,并编
排格式，如图3-15所示。
◆图3—15 在content层中插入文字后的“拆分”视图
②参照步骤2（4），新建#content、#content p和#content h4的CSS
样式表。
新建#content的CSS样式表，在#content的CSS规则定义”对话框中的“分类”列表框中选择“方框”选项，设置‘width“为550px,”float”为left，“padding”的值分别为20px,0，30px,0,“margin”的全部为0，在分类列表框中选择“类型”选项，设置“font-size”为12px;在分类列表框中选择”区块”选项，设置”text-align”为center.分类列表框中选择背景选项，设置“background-images”为”images/bg1.jpg,”background-repeat”为no-repeat,”background-position(x)”为right，”background-position(y)”为bottom,设置完成后，单击“确定”按钮。
新建#content p 和#content h4的CSS样式表，在CSS规则定义”对话框中的“分类”列表框中选择“方框”选项，设置“padding”的left值为20px, “padding”的right 值为15px,设置完成后，单击“确定”按钮。添加#content #content p和#content h4样式后的“拆分”视图
如图3-16所示。
◆图3—16添加#content、#content p和#content h4样式后的“拆
分”视图
（4）在#footer层中插入图像并编辑CSS样式表。
①在“设计”视图中将“页面底部”文字删除。
②选择“插入→图像”命令或按【ctrl+alt+I】组合键，打开“选择图
像源文件”对话框，插入“图像”，在”选择图像源文件“对话框中
选择“images”文件夹中的footer.gif,单击“确定”按钮。
③参照步骤2（4），新建#footer的CSS样式表，在“#footer的CSS规
则定义”对话框中的“分类”列表框中选择“方框”选项，设置“padding”
全部值分别为3px,0，3px,0，“margin”的全部为0，”width”为100%，”clear”
为both。设置完成后，单击“确定”按钮，添加#footer样式后的“拆分”
视图如图3-17所示。
◆图3—17 添加#footer样式后的“拆分”视图
5、div+CSS布局网页效果图
div+CSS布局网页效果图如图3-18所示。
◆图3—18 div+CSS布局网页效果图
第一个例子只是告诉大家如何让页面居中，这个代码的用处一般用来做背景图，示例：http://www.smarter.co.jp/，外围是灰色的，当中页面的正文底是白色的，非常大气。这个例子主要讲上下两列，这是最常见的，也是最简单的页面表现形式，头部放logo和banner，下面是主体内容。 CSS代码如下： body { font-family:Verdana; font-size:14px; margin:0;background:#E9E9E9;} #container {margin:0 auto; width:900px;background:#FFFFFF;padding:15px;} #header { height:100px; background:#6cf; margin-bottom:5px;} #mainContent { height:300px; background:#cff;} 页面代码如下：
DIV+CSS：网站首页布局实例教程 第一步：页面布局与规划 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/
├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 第二步：写入整体层结构和CSS 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：
DIV+CSS网页布局技巧实例1：设置网页整体居中的代码
DIV+CSS网页布局技巧实例4：使用css缩写 使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，css缩写的主要规则如下： 颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如： #000000可以缩写为#000;#336699可以缩写为#369; 注意:在同一个CSS配置节中，不要交错使用全写和缩写的颜色配置，在系统资源极低时，会导致浏览器渲染失败。 盒尺寸 通常有下面四种书写方法: ?property:value1; 表示所有边都是一个值value1； ?property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 ?property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 ?property:value1 value2 value3 value4; 四个值依次表示top,right,bottom, left 方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：margin:1em 0 2em 0.5em;
边框(border) 边框的属性如下： ?border-width:1px; ?border-style:solid; ?border-color:#000; 可以缩写为一句：border:1px solid #000; 语法是border:width style color; 背景(Backgrounds) 背景的属性如下： ?background-color:#f00; ?background-image:url(background.gif); ?background-repeat:no-repeat; ?background-attachment:fixed; ?background-position:0 0; 可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0; 语法是background:color image repeat attachment position; 你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：?color: transparent ?image: none
网页设计基础：Div+CSS布局入门教程 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML 基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图：
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 以下为引用的内容： DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/
│├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CS S布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容： 以下为引用的内容：
第十天div+css网页标准布局实例教程（一） 今天学习《十天学会web标准(div+css)》的最后一个章节，本章节把前面学习的零碎内容串联起来，组织成一个网站，将根据本人这些年来的从业经验，从建立站点到一个完整的div+css网页的完成，整个流程下来，希望能对各位有所帮助。由于本节内容较多，将分三部分来讲解。 建立站点 结构分析 搭建框架 切割效果图 布局页面——头部和导航 布局页面——侧边栏 布局页面——主体部分 底部和细节调整 相对路径和相对于根目录路径 一、建立站点 前面的课程都是零碎讲解一些相关知识，那么要做一个网站，首先需要建立一个站点。那么什么是站点，为什么要建立一个站点呢？因为网站不同于其它文件，比如一个图片，放到哪个盘哪个目录下都可以访问。而网站是许多文件相互关联的，所以要专门一个目录把它们分门别类存放起来。如果搞过视频编辑的朋友都知道，需要先建立一个工程，把原始的视频文件、图片素材分类放好，也是这个道理。下面以在D盘建立一jiaocheng文件夹为例，在dreamweaver(简称DW)里创建一个站点指向这个文件夹，然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。
保存后，一个站点就建立起来了，我用的是DW cs5版本，不同版本界面有所不同。如果要连接FTP，需要设置服务器选项（后面会涉及到）。站点建立好后，我们先建立一个images和css文件夹，分别用来存放图片和css文件。直接在windows的资源管理器下建立或者在dw里建立都是可以的；在dw建立需要在文件面板列表的根目录上点击右键，选择新建文件夹后更改名字即可。
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图: 根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#H eader {} /*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/ 至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：
目录 div＋css布局入门 (4) XHTML下css+div布局总结 (6) 网页设计DIV+CSS——第1天:选择什么样的DOCTYPE (9) 第一天 (9) 什么是DOCTYPE (10) 我们选择什么样的DOCTYPE (10) 补充 (10) 网页设计DIV+CSS——第2天:什么是名字空间 (10) 网页设计DIV+CSS——第3天:定义语言编码 (11) 网页设计DIV+CSS——第4天:调用样式表 (11) 外部调用样式表 (11) 双表法调用样式表 (12) 网页设计DIV+CSS——第5天:head区的其他设置 (12) 收藏夹小图标 (12) 为搜索引擎准备的内容 (12) 网页设计DIV+CSS——第6天:XHTML代码规范 (12) 1.所有的标记都必须要有一个相应的结束标记 (13) 2.所有标签的元素和属性的名字都必须使用小写 (13) 3.所有的XML标记都必须合理嵌套 (13) 4.所有的属性必须用引号""括起来 (13) 5.把所有<和&特殊符号用编码表示 (13) 6.给所有属性赋一个值 (13) 7.不要在注释内容中使“--” (13) 网页设计DIV+CSS——第7天:CSS入门 (14) 1.基本语法规范 (14) 2.颜色值 (14) 3.定义字体 (14)
5.派生选择器 (14) 6.id选择器 (14) 6.类别选择器 (15) 7.定义链接的样式 (15) 网页设计DIV+CSS——第8天:CSS布局入门 (15) 1.定义DIV (15) 2.CSS2盒模型 (16) 3.辅助图片一律用背景处理 (17) 网页设计DIV+CSS——第9天:第一个CSS布局实例 (17) 1.确定布局 (18) 2.定义body样式 (18) 3.定义主要的div (18) 4.100%自适应高度? (20) 网页设计DIV+CSS——第10天:自适应高度 (20) 网页设计DIV+CSS——第11天:不用表格的菜单 (21) 1.不用表格的菜单(纵向) (21) 2.不用表格的菜单(横向) (22) 网页设计DIV+CSS——第12天:校验及常见错误 (24) 1.XHTML校验 (24) 2.CSS2校验 (25) CSS的十八般技巧 (25) WEB打印实例教程 (30) Div+CSS布局入门教程 (37)
网页设计-页面布局篇(Css+Div) >>目录<< 第一步：规划网站，本教程将以图示为例构建网站； 第二步：创建html模板及文件目录等； 第三步：将网站分为五个div，网页基本布局的基础； 第四步：网页布局与div浮动等； 第五步：网页主要框架之外的附加结构的布局与表现； 第六步：页面内的基本文本的样式(css)设置； 第七步：网站头部图标与logo部分的设计； 第八步：页脚信息(版权等)的表现设置； 第九步：导航条的制作(较难)； 第十步：解决各种浏览器之间的兼容性(暂不讨论)
第一步：规划网站，本教程将以图示为例构建网站1.规划网站，本教程将以下图为例构建网站。
其基本布局见下图： 主要由五个部分构成： 1.Main Navigation导航条，具有按钮特效。Width: 760px Height: 50px 2.Header网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px 3.Content网站的主要内容。Width: 480px Height: Changes depending on content 4.Sidebar边框，一些附加信息。Width: 280px Height: Changes depending on 5.Footer网站底栏，包含版权信息等。Width: 760px Height: 66px 第二步：创建html模板及文件目录等 1.创建html模板。代码如下：
实验四 Div+CSS网页布局 一、站点规划 在网页制作中，有许多的术语，例如： HTML、CSS、DIV等等。下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。 所有的设计第一步就是构思，构思好了，一般来说还需要制作的界面布局简单的构画出来。 下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分： 1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片； 2、内容部分又可分为侧边栏、主体内容； 3、底部，包括一些版权信息。 有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:
根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。 DIV结构如下： │body {}/*这是一个HTML元素，具体我就不说明了*/ └#Container {}/*页面层容器*/ ├#Header {}/*页面头部*/ ├#PageBody {}/*页面主体*/ │├#Sidebar {}/*侧边栏*/ │└#MainBody {}/*主体内容*/ └#Footer {}/*页面底部*/
至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。 接下来我们在桌面新建一个文件夹，命名为“DIV+CSS页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容： 这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。 下面，我们在
标签对中写入DIV的基本结构，代码如下：单行一列 以下是引用片段： body { margin: 0px; padding: 0px; text-align: center; } #content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 两行一列 以下是引用片段： body { margin: 0px; padding: 0px; text-align: center;} #content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;} #content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;} 三行一列 以下是引用片段： body { margin: 0px; padding: 0px; text-align: center; } #content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } #content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } #content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 单行两列 以下是引用片段： #bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; } #bodycenter #dv1 {float: left;width: 280px;} #bodycenter #dv2 {float: right;width: 410px;} 两行两列 以下是引用片段： #header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;} #bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } #bodycenter #dv1 { float: left; width: 280px;} #bodycenter #dv2 { float: right;width: 410px;} 三行两列 以下是引用片段： #header{ width: 700px;margin-right: auto; margin-left: auto; } #bodycenter {width: 700px; margin-right: auto; margin-left: auto; } #bodycenter #dv1 { float: left;width: 280px;} #bodycenter #dv2 { float: right; width: 410px;} #footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; } 单行三列 绝对定位
CSS布局实例：用CSS布局网站首页 第一步 下面是我们将要动手制作的设计图。如前所述，你可以阅读PSDTUTS上的这篇教程来学习如何做出这样的设计图。在这篇教程里我们只制作首页，不过你可以以此为基础用相同的布局制作内页。 第二步 首先要做的是确定页面结构。随着你对CSS布局的逐步学习，这个过程会变得越来越简单。通过运用大量绝对定位和大幅背景图片，我们可以非常简单地完成这个设计。 什么是绝对定位？
一个HTML元素（比如
表格与DIV+CSS的布局设计分析 摘要：网页的布局是给浏览者的第一印象，往往决定着网站的可看性。在网页中应用不同的布局技术所能呈现的效果也不尽相同，它们各有其自己的优点，使用表格进行布局是传统的网页布局显示技术，仍是现在最常见的网页制作方法，而div+css布局是一种新的排版布局理念，可以使页面载入得更快，修改设计时更有效率而代价更低。 关键词：网页布局表格 div+css 中图分类号：tp393.092 文献标识码：a 文章编号：1007-9416(2011)12-0191-01 随着互联网应用的日渐普遍，网络应用进入了人们生活的多个层面，进而人们对网站需求的增大，市场对网页制作人员的需求也大大增加。对于一个网站来说,要要给用户带来好的享受，就必须提高网页布局设计的美观度。网页就好比一张图纸，通过排版布局之间的对比才凸显它的美，网页布局的效果直接影响到网页设计的质量。目前常见的网页布局技术有表格技术和div+css技术。 1、表格布局技术 1.1 表格布局技术的特点 表格是网页的一个非常重要的元素，表格主要由行、列和单元格组成。在使用表格布局时，设计者一般会先根据页面版式的设计需要将整个网页以水平切割的方式分解成多张独立的表格，而表格的行、列数则由该表格中所包含的版块数目来决定。对于复杂的版块，
还必须在里面插入嵌套表格来完成。 1.2 表格布局技术的优势 对于初学者来说，表格可能是最好的布局方式，容易上手。表格布局能对不同对象加以处理，而又不用担心不同对象之间的影响；而且表格在定位图片和文本上比起用css更加方便。网上绝大部分的页面都是使用表格来美化的，因为表格有很好的兼容性，可被绝大部分的浏览器所支持，而且使用表格会使页面结构清晰、布局整齐。 1.3 表格布局技术的缺陷 使用table布局会生产很多冗余代码，会影响浏览速度以及占用过多服务器空间。而且，表格结构单一，难以体现出层次感，无法将设计的美感流畅地通过网页表现出来。 2、div+css布局技术 2.1 div+css布局技术介绍 div+css的布局技术其实涉及到了网页的两个重要组成部分：结构和表现。比如，在一个网页中，其内容可以包含很多，如各种级别的标题、正文段落、图片等，通过div，我们可以将网页中的这些内容元素放置到各个div中，构成网页的“结构”；然后，我们再根据页面的设计需要运用css样式表文件设置其中的文字、图片和列表等元素的“表现”效果。 在div+css的布局技术中，设计者运用html来确定网页的结构和内容，而用css来控制网页中内容的表现形式，很好地实现了内容与形式的分离。
实验名称DIV+CSS样式应用 实验3 DIV+CSS样式应用 1实验目的 1)了解页面常用布局结构； 2)掌握使用CSS盒子模型浮动与定位的方法 3)掌握DIV的使用方法； 4)掌握DIV+CSS布局的基本方法； 2实验内容及要求 1)制作一个简单的如下图框架的首页，不需要填写具体内容，使用背景色标 出区域；
3 实验原理 浮动边框可以向左或向右移动，直到外边缘碰到包含框或另一个浮动框的边框为止。 通过float或margin来让元素产生位置移动。 4仪器与材料 安装有Windows7或以上操作系统的计算机，Dreamweaver 5实验内容 5.1CSS 布局入门 CSS 布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF 图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin、padding、border 等属性来控制版块的间距。 定义DIV，分析一个典型的定义div 例子：
说明如下： 1)层的名称为sample，在页面中用就可以调用这个样式； 2)margin 是指层的边框以外留的空白，用于页边距或者与其它层制造一个 间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距，如果都一样，可以缩写成"margin: 10px;"。如果边距为零，要写成"margin: 0px;"； 3)注意：当值是零时，除了rgb 颜色值0%必须跟百分号，其他情况 后面可以不跟单位"px"。margin 是透明元素，不能定义颜色； 4)padding 是指层的边框到层的内容之间的空白。和margin 一样，分 别指定上右下左边框到内容的距离。如果都一样，可以缩写成 "padding:0px"。单独指定左边可以写成"padding-left: 0px;"。padding 是透明元素，不能定义颜色； 5)border 是指层的边框，"border-right: #ccc 2px solid;"是定义层的右边 框颜色为"#ccc"，宽度为"2px"，样式为"solid"直线。如果要虚线样式可以用"dotted"； 6)background 是定义层的背景。分2 级定义，先定义图片背景，采用 "url(../images/bg_logo.gif)"来指定背景图片路径；其次定义背景色 "#fefefe"。"no-repeat"指背景图片不需要重复，如果需要横向重复用 "repeat-x",纵向重复用"repeat-y",重复铺满整个背景用"repeat"。后面的
DIV+CSS布局中的几个重难点属性 1、组织元素（span和div） span和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。 在这一课中，我们将进一步探究span和div的用法，因为这两个HTML元素对于CSS是很重要的。用span组织元素 span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果。 让我们用一句本杰明·弗兰克林（Benjamin Franklin）的名言来举个例子： 以下是代码片段： 早睡早起使人健康、富裕又聪颖。 假设我们想用红色来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处，我们可以用标签来标记上述每一点好处。然后，我们将这几个span设置为相同的class。这样，我们稍后就可以在样式表里针对这个class定义特定的样式。 以下是代码片段： 早睡早起使人健康、富裕和聪颖。 相应的CSS代码如下： 以下是代码片段： span.benefit { color:red; } 当然，你也可以采用id来为span元素添加样式。如果采用id的话，你必须为这三个span元素各自分别指定一个唯一的id。 用div组织元素 如前面例子所示，span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。除去这点区别，div和span在组织元素方面相差无几。让我们来看一个例子。我们将历届美国总统按其所属的政营分别组织为两个列表：
Div+css 一，什么是CSS CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。 二．DIV+CSS 简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。首先认识DIV 是用于搭建html网页结构（框架）标签，像、、等html标签一样，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。 表格 以前html直接设置高度width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。 例子：
分别设置了高度为100px和50px的两行表格 DIV的布局方法 CSS 代码 .yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;} Html body内代码： 我的高度为100px 我高度为50px https://www.doczj.com/doc/e44919848.html,演示，内容 测试内容高度超出演示实例，divcss5实例 完整CSS html最小高度实例代码：
div css布局不同于table布局，它主要是按列来计算，而table是嵌套实现。这里列举了最常见的 几种布局代码： 单行一列 以下是引用片段： body { margin:0px; padding:0px; text-align:center; } #content { margin-left:auto; margin-right:auto; width:400px; width:370px; } 两行一列 以下是引用片段： body { margin:0px; padding:0px; text-align:center;} #content-top{ margin-left:auto; margin-right:auto; width:400px; width:370px;} #content-end {margin-left:auto; margin-right:auto; width:400px; width:370px;} 三行一列 以下是引用片段： body { margin:0px; padding:0px; text-align:center; } #content-top{ margin-left:auto; margin-right:auto; width:400px; width:370px; } #content-mid{ margin-left:auto; margin-right:auto; width:400px; width:370px; } #content-end{ margin-left:auto; margin-right:auto; width:400px; width:370px; } 单行两列 以下是引用片段： #bodycenter { width:700px;margin-right:auto; margin-left:auto;overflow: auto; } #bodycenter#dv1 {float:left;width:280px;} #bodycenter#dv2 {float:right;width:410px;} 两行两列 以下是引用片段： #header{ width:700px; margin-right:auto;margin-left:auto; overflow:auto;} #bodycenter { width:700px; margin-right:auto; margin-left:auto; overflow: auto; } #bodycenter#dv1 { float:left; width:280px;} #bodycenter#dv2 { float:right;width:410px;} 三行两列 以下是引用片段： #header{ width:700px;margin-right:auto; margin-left:auto; } #bodycenter {width:700px; margin-right:auto; margin-left:auto; } #bodycenter#dv1 { float:left;width:280px;} #bodycenter#dv2 { float:right; width:410px;} #footer{ width:700px; margin-right:auto; margin-left:auto; overflow:auto; }
固定宽度CSS 版式布局 红色字符和背景标识的为比较实用的结构 1列固定宽度居中 1列固定宽度居中 +头部 1列固定宽度居中 +头部+尾部 1列固定宽度居中 +头部+导航+尾部 2列固定宽度居中左 窄右宽型 2列固定宽度居中右 窄左宽型 2列固定宽度居中平分型 2列固定宽度左窄右 宽型+头部 2列固定宽度右窄左 宽型+头部 2列固定宽度左窄右宽型+头部+尾部 2列固定宽度右窄左宽型+头部+尾部 2列固定宽度左窄右宽型+头部+导航+尾 2列固定宽度居中平 分型 2列固定宽度右窄左宽型+头部+导航+尾 部 2列固定宽度左窄右宽型+头部+导航+尾 部 3列固定宽度居中 3列固定宽度居中+ 头部 3列固定宽度居中+ 头部+尾部
自适应(弹性)宽度CSS版式布局红色字符和背景标识的为比较实用的结构 3列固定宽度居中+ 头部+导航 3列固定宽度居中+ 头部+导航+尾部 2列左窄右宽、高度 自适应+头部+导航+ 尾部 2列右窄左宽、高度 自适应+头部+导航+ 尾部 2列左窄右宽高度自 适应且未知高度底 部平齐、型+头部+导 航+尾部 2列右窄左宽、高度 自适应且未知高度 底部平齐+头部+导 航+尾部 1列自适应宽度居中1列自适应宽度+头 部 1列自适应宽度居中 +头部+尾部 1列固定宽度居中+ 头部+导航+尾部 2列左侧固定，右侧 自适应宽度，中间无 缝型 2列右侧固定，左侧 自适应宽度，中间无 缝型 2列左侧固定，右侧 自适应宽度 2列右侧固定，左侧 自适应宽度 2列左侧百分比右侧 自适应 2列左侧固定，右侧 自适应宽度+头部 2列右侧固定左侧自 适应宽度+头部 2列左侧固定右侧自 适应宽度+头部+尾 部
单行一列 body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;width:400px;width:370px;} 两行一列 body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;} #content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;} 三行一列 body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:370px;} #content-mid{margin-left:auto;margin-right:auto;width:400px;width:370px;} #content-end{margin-left:auto;margin-right:auto;width:400px;width:370px;} 单行两列 #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} #bodycenter#dv1{float:left;width:280px;} #bodycenter#dv2{float:right;width:410px;} 两行两列 #header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} #bodycenter#dv1{float:left;width:280px;} #bodycenter#dv2{float:right;width:410px;} 三行两列 #header{width:700px;margin-right:auto;margin-left:auto;} #bodycenter{width:700px;margin-right:auto;margin-left:auto;} #bodycenter#dv1{float:left;width:280px;} #bodycenter#dv2{float:right;width:410px;} #footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} //https://www.doczj.com/doc/e44919848.html, 单行三列绝对定位