DIV+CSS布局入门

1、第五章 DIV+CSS布局入门5.1 定义DIV5.2 可视化模型5.3 CSS布局方式5.4 CSS 3.0中盒模型的新增属性5.5 商业案例设计制作咖啡店网站页面5.6 课后作业制作个人网站页面5.7 本章小结5.1 定义DIV 5.1.1 CSS的特点 5.1.2 插入DIV 5.1.3 DIV的嵌套和固定格式div 是什么 div的全称: division (区分) 使用方法： 职责：负责页面的结构 特性： 容器性质 可内嵌table，还可嵌文本和其它的html代码温馨提示： DIV 标签只是一个标识，作用是把内容标识一个区域，并不负责其他事情，DIV 只是CSS 布局工作的第一步，需

2、要通过DIV 将页面中的内容元素标识出来，而为内容添加样式则由CSS来完成。 DIV对象除了可以直接放入文本和其他标签，也可以多个DIV标签进行嵌套使用，最终的目的是合理的标识出页面的区域头部内容区头部内容区导航菜单区导航菜单区广告栏区广告栏区左侧内容区左侧内容区右侧内容区右侧内容区底部内容区底部内容区版权内容区版权内容区 DIV对象在使用的时候，同其他XHTML 对象一样，可以加入其他属性，而在CSS 布局方面，为了实现内容与表现分离，不应当将align(对齐)属性，与style(行间样式)属性编写在页面的DIV标签中，因此DIV 代码只可能拥有以下两种形式 1、内容 2、 内容 使用id属

3、性，为当前这个DIV指定一个id 名称，在CSS中使用id选择符进行样式编写。同样可以使用class属性，在CSS中使用class选择符进行样式编写。 提示：同一名称的id值在当前页面中只允许使用一次，不管是应用到DIV 还是其他对象的id中。而 class名称则可以重复使用。表格布局将表格与DIV 进行比较。用表格布局时，使用表格设计的左右分栏或上下分栏，都能够在浏览中直接看到分栏效果，图一为有分栏效果。 如图二为无分栏效果图：DIV 对象本身就是占据整行的一种对象，不予续其他对象与它在一行中并列显示。图一图二XHTML中的所有对象几乎都默认为两种类型。 1、block 块状对象：指的是当前

4、对象显示为一个方块，默认的显示状态下，将占据整行，其他对象在下一行显示。 2、in-line 行间对象：正好和block相反，它本身在一行中显示。由于DIV 与样式分离，最终样式则由CSS来完成。这样与样式无关的特性，使得DIV 在设计中拥有巨大的可伸缩性，可以根据自己的想法改变DIV的样式，不再拘泥于单元格固定模式的束缚。5.1.3 DIV的嵌套和固定格式设计一个网页，需要有整体布局，就会产生头部、中部和底部，中部，中部也可以分为左右或左中右等固定格式。这些格式都可以用DIV 进行多层嵌套来实现。嵌 套的目的是为了实现更为复杂的页面排版，这也许会产生一个复杂的DIV结构。 1、网页头部 2、

5、 3、左边部分 4、右边部分 5、 6、网页尾部DIV的嵌套bottomtopmain垂直排列布局垂直排列布局bottomtopleftright嵌套布局嵌套布局5.2 可视化模型5.2.1 盒模型盒模型： 1.content（内容） 2.border（边框） 3.padding（填充) 4.margin(边界)填充、边框和边界上、右、下、左四个方向 CSS内定义的宽（width）和高（height）指的是除去边界、边框、填充剩下的内容范围，因此一个元素的实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界（P76图5-6）关于盒模型还有以下几点需呀注意的地方： 1.浮动元素 （

6、无论左浮动还是右浮动）链接不压缩，且如果浮动元素不声明宽度，则其宽度趋向于0。 2.内联元素定义上下边界不会影响到行高。 3.边框默认的样式可以设置为不显示。 4.填充值不可以为负。 5.如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0%，因此不会被显示，此处在采取层布局的时候需要特别注意。5.2.2视觉可视化模型 块级元素（块框） 行内元素 CSS中的3种定位机制：普通流、浮动和绝对定位 无名框5.2.3相对定位 Position的参数：static、relative、absolute、fixed、inherit5.2.4绝对定位 相对定位的元素是普通流的一部分，元素的位置

7、相对于它在普通流中的位置。 与之相反，绝对定位中的元素的位置与文档流无关，因此不占据空间，普通文档流中其他元素的布局就像绝对定位的元素不存在一样。5.2.5浮动定位（float）：left、right、none5.2.6空白边叠加 空白边叠加：当2个垂直空白边相遇时，它们将形成一个空白边。这个空白边的高度是2个发生叠加 的空白边中的高度的较大者。 当一个元素包含另一元素中时（假设没有填充或边框将空白边隔开），它们的顶和底空白边也会发生叠加。 行内框，浮动框或相对定位框之间的空白边是不会叠加的。5.3 CSS布局方式 5.3.1 居中的布局设计 5.3.2 浮动的布局设计 5.3.3 高度自适应

8、5.3.1 居中的布局设计使用自动空白边让设计居中 使容器中的divbox在屏幕上水平居中。 1. 2. 3. 定义DIV的宽度，然后将水平空白边设置为auto，CSS样式定义如下： 1.box 2. width:960px; 3. margin:0 auto; 4. 使用定位和负值空白边让设计居中 定义容器的宽度，然后将容器的position属性设置为relative，将left属性设置为50%，就会把容器的左边缘定位在页面的中间。 1. #box 2. width:960px; 3. position :relative; 4. left：50% 5. 不希望让容器边缘居中，而是让容器的中

9、间居中，只要对容器的左边应用一个负值空白边； 1. #box 2. width:960px; 3. position :relative; 4. left：50% 5. margin-left：-480px 6. 5.3.2 浮动的布局设计两列固定宽度布局，XHTML代码： 1. 左边 2. 右边为id名为left与right的DIV设置CSS样式，让俩个DIV在水平行中并排显示，从而两列式布局，CSS代码 1. #left 2. width:300px; 3. height :300px; 4. background-color：#6CF; 5. border：2px solid #66F

10、6. float:left; 7. 8. #right 9. width:300px; 10. height :300px; 11. background-color：#6CF; 12. border：2px solid #66F 13. float:left; 14. 1、两列固定宽度布局两列固定宽度布局两列固定宽度居中布局可以使用DIV的嵌套方式来完成，用一个居中的DIV作为容器，将两列分栏的两个DIV放置在容器中，从而实现两列的居中显示。XHTML代码： 1. 2. 左边 3. 右边 4.2、两列固定宽度居中布局两列固定宽度居中布局两列固定宽度两列固定宽度居中居中布局布局为分栏的两个DI

11、V加上了一个id名为box的容器，CSS代码： 1. #box 2. width: 448px; 3. margin：0px auto； 4. 5. #left 6. width:300px; 7. height :300px; 8. background-color：#6CF; 9. border：2px solid #66 10. float:left; 11. 12. #right 13. width:300px; 14. height :300px; 15. background-color：#6CF; 16. border：2px solid #66F 17. float:left;

12、 18. 3、两列宽度自适应布局 设置 自适应主要通过宽度的百分比值设置，因此在两列宽度自适应布局也同样是对百分比宽度值设定，才、CSS代码： 1. #left 2. width: 30%; 3. height : 250px; 4. background-color：#6CF; 5. border：2px solid #66F 6. float:left; 7. 8. #right 9. width: 60% 10. height :250px; 11. background-color：#6CF; 12. border：2px solid #66F 13. float:left; 14.

13、4、两列右列宽度自适应布局左栏固定宽度，右栏根据浏览器窗口的大小自动适应。在CSS中只需要设置左栏设置宽度，右栏不设置任何宽度值，并且右栏不浮动，CSS代码： 1. #left 2. width: 200px; 3. height : 250px; 4. background-color：#6CF; 5. border：2px solid #66F 6. float: left; 7. 8. #right 9. height :250px; 10. background-color：#6CF; 11. border：2px solid #66F 12. 5、三列浮动中间列宽度自适应布局三列中间

14、栏左右栏的间距变化适应，单纯的使用float属性与百分比属性不能实现，就要用绝对定位来表现，只需要设置对象的top、right、bottom及left四个方面即可，XHTMLD代码： 1. 左边 2. 中间 3. 右边 使用绝对定位将左列与右列进行位置控制，CSS代码： 1. #left 2. width: 200px; 3. height : 250px; 4. background-color：#6CF; 5. border：2px solid #66F 6. position：absolute； 7. top:0px 8. left:0px 9. 10. #right 11. width

15、: 250px; 12. height :250px; 13. background-color：#6CF; 14. border：2px solid #66F 15. position：absolute； 16. top:0px 17. right:0px 18. 5.3.3高度自适应高度值同光可以使用百分比进行设置，不同的是直接用height:100%不会显示效果的，这与浏览器的解析方式有一定关系，实现高度自适应的CSS代码： 1. html,body 2. margin:0px; 3. height:100%; 4. 5. #left 6. width：250px; 7. height:

16、100%; 8. background-color：#6CF; 9. float: left; 10. 5.4 CSS 3.0中盒模型的新增属性中盒模型的新增属性 在css 3.0中新增了3种盒模型的控制属性，分别是overflow、overflow-x、overflow-y.5.4.1 实战实战1：overflow定义：定义：用于设置当对象的内容超过其指定的高度和宽度时应如何处理。用于设置当对象的内容超过其指定的高度和宽度时应如何处理。定义语法：定义语法：overflow: visible| auto| hidden| scrollvisible: 不剪切内容，也不添加滚动条。不剪切内容，也

17、不添加滚动条。如果显示声明该默认值，对象将被剪切为包如果显示声明该默认值，对象将被剪切为包含对象的含对象的window或或frame的大小，并且的大小，并且clip属性设置将失效。属性设置将失效。auto：该属性值为该属性值为body对象和对象和textarea的默认值，在需要时剪切内容并添加滚动条。的默认值，在需要时剪切内容并添加滚动条。hidden：不显示超出对象尺寸的内容。不显示超出对象尺寸的内容。scroll：总是显示该滚动条。总是显示该滚动条。提示：提示：设置设置textarea对象为对象为hidden值可以隐藏其滚动条。值可以隐藏其滚动条。 对于对于table来说，如果来说，如果t

18、able-layout属性设置为属性设置为fixed，则则td对象支持带有默认值为对象支持带有默认值为hidden的的overflow属性，属性，如果设置为如果设置为hidden、scroll、auto，那么超出，那么超出td尺寸尺寸的内容将被剪切。的内容将被剪切。如果设为如果设为visible，将导致额外的文本溢出到右边或，将导致额外的文本溢出到右边或左边（视左边（视direction属性设置而定）的单元格。属性设置而定）的单元格。19. p、h1、div等元素常常称为块级元素。这就意等元素常常称为块级元素。这就意 味着这些味着这些 元素显示为一块内容，即元素显示为一块内容，即“块框块框”。

19、与之相反。与之相反strong和和span等元素称为行内元素，等元素称为行内元素，因为它们的内容显示在行中，即因为它们的内容显示在行中，即“行内框行内框”。可以使用。可以使用display属性改变生成的框属性改变生成的框的类型，通过将的类型，通过将display属性设置为属性设置为block，可以让行内元素表现得像块级元素一，可以让行内元素表现得像块级元素一样。还可以将样。还可以将display属性设置为属性设置为none，让生成的元素根本没有框。这样，这个，让生成的元素根本没有框。这样，这个框及其所有内容就不显示，不占用文档中的空间框及其所有内容就不显示，不占用文档中的空间。20. 21.

20、该页面在该页面在IE浏览器中预览效果，如下图：浏览器中预览效果，如下图：5.4.2实战实战2： overflow-x定义：定义：用于设置当对象的内容超过其指定的宽度时应如何处理。用于设置当对象的内容超过其指定的宽度时应如何处理。定义语法：定义语法：overflow-x: visible| auto| hidden| scrollOverflow-x属性的用法和兼容性与属性的用法和兼容性与overflow属性的用法和兼容属性的用法和兼容性性完全相同完全相同。例如：例如：Overflow属性的兼容性，例如：属性的兼容性，例如：1. 2. 3. 4. 5. overflow6. 7. #box 8.

21、font-size: 12px;9.line-height: 24px;10.width:700px;11.height: 80px;12. padding: 10px;13.background: #FFFF00;14.overflow: scroll;15.16. 17.18.1. 2. 3. 4. 5. overflow6. 7. #box 8.font-size: 12px;9.line-height: 24px;10.width:700px;11.height: 80px;12. padding: 10px;13.background: #FFFF00;14.overflow-x:

22、scroll;15.16. 17. 18. 19. p、h1、div等元素常常称为块级元素。这就意味着这些元素显示为一块内容，即“块框”。与之相反strong和span等元素称为行内元素，因为它们的内容显示在行中，即“行内框”。可以使用display属性改变生成的框的类型，通过将display属性设置为block，可以让行内元素表现得像块级元素一样。还可以将display属性设置为none，让生成的元素根本没有框。20. 21. 该页面在该页面在IE浏览器中预览效果，如下图：浏览器中预览效果，如下图：5.4.3实战实战3： overflow-y定义：定义：用于设置当对象的内容超过其指定的高度时

23、应如何处理。用于设置当对象的内容超过其指定的高度时应如何处理。定义语法：定义语法：overflow-x: visible| auto| hidden| scrollOverflow-y属性的用法和兼容性与属性的用法和兼容性与overflow属性的用法和兼容性属性的用法和兼容性完全完全相同相同。例如：例如：19. p、h1、div等元素常常称为块级元素。这就意味着这些元素显示为一块内容，即“块框”。与之相反strong和span等元素称为行内元素，因为它们的内容显示在行中，即“行内框”。可以使用display属性改变生成的框的类型，通过将display属性设置为block，可以让行内元素表现得像

24、块级元素一样。还可以将display属性设置为none，让生成的元素根本没有框。20. 21. 该页面在该页面在IE浏览器中预览效果，如下图：浏览器中预览效果，如下图：5.4.4 使用使用CSS3.0实现鼠标经过变换效果实现鼠标经过变换效果本实例中将通过使用本实例中将通过使用CSS3.0中新增的中新增的border-radius和和transition属性来实属性来实现鼠标经过变换效果。现鼠标经过变换效果。步骤一：步骤一：1、执行、执行“文件文件新建新建”命令，新建空白文档，保存命令，新建空白文档，保存“光盘光盘/源文件源文件/第第5章章/5-4-4.html 2、转换到代码视图中，在页面头部

25、加入内部样式表，并定义、转换到代码视图中，在页面头部加入内部样式表，并定义body标签样式，如图标签样式，如图 5-4-1所示：所示：body width: 750px;font-family: 宋体宋体;font-size: 14px;font-weight: bold;margin: 0px;图图5-4-1CSS样式代码样式代码3、返还到设计视图，在页面中插入一个名为、返还到设计视图，在页面中插入一个名为box的的DIV,如如5-4-2所示所示步骤二：步骤二：1、转换到代码视图中，在内部样式中定义一个名为、转换到代码视图中，在内部样式中定义一个名为#box的的CSS样式。样式。 如图如图5

26、-4-3所示：所示： 2、返还设计页面，在该、返还设计页面，在该DIV中输入相应的文章内容，如图中输入相应的文章内容，如图5-4-4所示：所示：#box margin: 20px auto 0px 20px;border: 5px solid #CCCCCC;padding: 10px;-webkit-border-radius:10px;-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms;图图 5-4-3 CSS样式代码样式代

27、码图图5-4-4 页面效果页面效果步骤三：步骤三：1、转换到代码视图中，在内部样式中定义一个名为、转换到代码视图中，在内部样式中定义一个名为#box: hover的的CSS样式，如图样式，如图5-4-5所示。所示。 2、返还设计页面，页面效果如图、返还设计页面，页面效果如图5-4-6所示所示#box:hover background-color: #EFEFEF;color: #FF0000;padding-left:50px;图图5-4-5 CSS样式代码样式代码图图5-4-6页面效果页面效果步骤四：保存页面，在步骤四：保存页面，在Chrome浏览器中预览页面，可以看浏览器中预览页面，可以看

28、到使用到使用CSS3.0所实现的鼠标经过变换效果，如图所实现的鼠标经过变换效果，如图5-4-7所示。所示。图图5-4-7 在在chrome浏览器中预览效果浏览器中预览效果5.5商业案例设计制作咖啡店网站页面 设计制作咖啡店网站，首先要了解经营者的设想设想和目标目标，其次需要深入了解这家咖啡店的特色特色。 根据咖啡店的特色确定网站的风格、主色调、主次布风格、主色调、主次布局和经营者的目标局和经营者的目标自由想象设计，形成图纸，并用设计软件实现。5.5.1设计分析-以网站首页为例 以古典的浅黄色为主色，咖啡色描边，突出咖啡店的风格 新鲜的绿色传达出健康生活理念 布局上简约 文字与图片相融合 导航的

29、设计增添网站的趣味性5.5.2布局分析布局类型上型中型下型boxmain5.5.3制作流程1 1.需要通过对话框的形式对CSS样式进行设置 2.在该DIV中分别插入相应的DIV来完成页面上、中、下部分内容的制作单击“分类”列表中的区块选项，对相关选项进行设置，单击确定，既可以看到效果在页面中插入名称为box的DIV，位置点选择“在插入点”打开“css”面板并选择div.css，新建css规则，在选择类型器中选择ID（仅用于一个HTML元素，在选择名称中输入box）在弹出的“CSS规则定义”对话框中，分别选择“区块”和“方框”选项，对相关选项进行设置。删除多余的文本，点击“插入Div标签”，在该

30、Div中插入名称为top的DIV以相同的方法新建css规则，对“背景”和“方框”的相关选项进行设置，并删除多余的文本插入FLASH动画，并将该动画的Wmode属性为“透明”，保存页面并保存外部样式表文件在名为top的DIV后插入名为main的DIV，并用相同方法新建css规则，对“背景”和“方框”的相关选项进行设置在名为left的DIV中插入图像，并在该DIV后插入名为right的DIV，并以相同的方式建立css规则，其中选择器名称为rightcss规则定义，分别选择“类型”、“背景”、“方框”的相关选项进行设置在名为right的DIV文件中输入相应的文本内容，并以同法新建css规则，在选择器类型中选择“类”（可用于任何HTML元素），选择名称为font01css规则定义，对“类型”的相关选