《DIVCSS布局入门ppt课件》由会员分享，可在线阅读，更多相关《DIVCSS布局入门ppt课件（57页珍藏版）》请在金锄头文库上搜索。
1、5.1定义DIV5.2可视化模型5.4CSS3.0中盒模型的新增属性5.5商业案例5.6课后作业5.7本章小结5.1 定义DIV5.1.1 CSS的特点5.1.2 插入DIV5.1.3 DIV的嵌套和固定格式div 是什么div的全称:division(区分)使用方法：职责：负责页面的结构特性：容器性质可内嵌table，还可嵌文本和其它的html代码温馨提示：DIV 标签只是一个标识，作用是把内容标识一个区域，并不负责其他事情，DIV 只是CSS 布局工作的第一步，需要通过DIV 将页面中的内容元素标识出来，而为内容添加样式则由CSS来完成。DIV对象除了可以直接放入文本和其他标签，也可以多个
2、DIV标签进行嵌套使用，最终的目的是合理的标识出页面的区域头部内容区头部内容区导航菜单区导航菜单区广告栏区广告栏区左侧内容区左侧内容区右侧内容区右侧内容区底部内容区底部内容区版权内容区版权内容区DIV对象在使用的时候，同其他XHTML 对象一样，可以加入其他属性，而在CSS 布局方面，为了实现内容与表现分离，不应当将align(对齐)属性，与style(行间样式)属性编写在页面的DIV标签中，因此DIV 代码只可能拥有以下两种形式 1、内容 2、 内容 使用id属性，为当前这个DIV指定一个id 名称，在CSS中使用id选择符进行样式编写。同样可以使用class属性，在CSS中使用class选
3、择符进行样式编写。 提示：同一名称的id值在当前页面中只允许使用一次，不管是应用到DIV 还是其他对象的id中。而 class名称则可以重复使用。表格布局将表格与DIV 进行比较。用表格布局时，使用表格设计的左右分栏或上下分栏，都能够在浏览中直接看到分栏效果，图一为有分栏效果。 如图二为无分栏效果图：DIV 对象本身就是占据整行的一种对象，不予续其他对象与它在一行中并列显示。图一图二XHTML中的所有对象几乎都默认为两种类型。 1、block 块状对象：指的是当前对象显示为一个方块，默认的显示状态下，将占据整行，其他对象在下一行显示。 2、in-line 行间对象：正好和block相反，它本身
4、在一行中显示。由于DIV 与样式分离，最终样式则由CSS来完成。这样与样式无关的特性，使得DIV 在设计中拥有巨大的可伸缩性，可以根据自己的想法改变DIV的样式，不再拘泥于单元格固定模式的束缚。5.1.3 DIV的嵌套和固定格式设计一个网页，需要有整体布局，就会产生头部、中部和底部，中部，中部也可以分为左右或左中右等固定格式。这些格式都可以用DIV 进行多层嵌套来实现。嵌 套的目的是为了实现更为复杂的页面排版，这也许会产生一个复杂的DIV结构。 1、网页头部 2、 3、左边部分 4、右边部分 5、 6、网页尾部DIV的嵌套bottomtopmain垂直排列布局垂直排列布局bottomtople
5、ftright嵌套布局嵌套布局5.2可视化模型5.2.1 盒模型盒模型： 1.content（内容） 2.border（边框） 3.padding（填充) 4.margin(边界)填充、边框和边界上、右、下、左四个方向CSS内定义的宽（width）和高（height）指的是除去边界、边框、填充剩下的内容范围，因此一个元素的实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界（P76图5-6）关于盒模型还有以下几点需呀注意的地方：1.浮动元素 （无论左浮动还是右浮动）链接不压缩，且如果浮动元素不声明宽度，则其宽度趋向于0。2.内联元素定义上下边界不会影响到行高。3.边框默认的样式可
6、以设置为不显示。4.填充值不可以为负。5.如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0%，因此不会被显示，此处在采取层布局的时候需要特别注意。5.2.2视觉可视化模型块级元素（块框）行内元素CSS中的3种定位机制：普通流、浮动和绝对定位无名框5.2.3相对定位Position的参数：static、relative、absolute、fixed、inheritstatic无特殊定位，静态relative相对，对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置absolute绝对，将对象从文档流中拖出 ，使用left，right，to
7、p，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位 fixed悬浮，使元素固定在屏幕的某个位置，其包含块 是可视区域本身inherit这个值从其上级元素继承得到5.2.4绝对定位相对定位的元素是普通流的一部分，元素的位置相对于它在普通流中的位置。与之相反，绝对定位中的元素的位置与文档流无关，因此不占据空间，普通文档流中其他元素的布局就像绝对定位的元素不存在一样。5.2.5浮动定位（float）：left、right、noneleft文本或图像会移至父元素中的左侧right文本或图像会移至父元素中的右侧none默认，文本或图像会显示于它在文档中出现的位置5.2.6空白边叠
8、加空白边叠加：当2个垂直空白边相遇时，它们将形成一个空白边。这个空白边的高度是2个发生叠加 的空白边中的高度的较大者。当一个元素包含另一元素中时（假设没有填充或边框将空白边隔开），它们的顶和底空白边也会发生叠加。行内框，浮动框或相对定位框之间的空白边是不会叠加的。5.3 CSS布局方式5.3.1 居中的布局设计5.3.2 浮动的布局设计5.3.3 高度自适应5.3.1 居中的布局设计使用自动空白边让设计居中 使容器中的divbox在屏幕上水平居中。 1. 2. 3. 定义DIV的宽度，然后将水平空白边设置为auto，CSS样式定义如下： 1.box 2. width:960px; 3. mar
9、gin:0 auto; 4. 使用定位和负值空白边让设计居中 定义容器的宽度，然后将容器的position属性设置为relative，将left属性设置为50%，就会把容器的左边缘定位在页面的中间。 1. #box 2. width:960px; 3. position :relative; 4. left：50% 5. 不希望让容器边缘居中，而是让容器的中间居中，只要对容器的左边应用一个负值空白边； 1. #box 2. width:960px; 3. position :relative; 4. left：50% 5. margin-left：-480px 6. 5.3.2 浮动的布局设计
10、两列固定宽度布局，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 6. float:left; 7. 8. #right 9. width:300px; 10. height :300px; 11. background-color：#6CF; 12. border：2px solid #66F 13.
11、float:left; 14. 1、两列固定宽度布局、两列固定宽度布局两列固定宽度居中布局可以使用DIV的嵌套方式来完成，用一个居中的DIV作为容器，将两列分栏的两个DIV放置在容器中，从而实现两列的居中显示。XHTML代码： 1. 2. 左边 3. 右边 4.2、两列固定宽度居中布局、两列固定宽度居中布局两列固定宽度居中布局两列固定宽度居中布局为分栏的两个DIV加上了一个id名为box的容器，CSS代码： 1. #box 2. width: 448px; 3. margin：0px auto； 4. 5. #left 6. width:300px; 7. height :300px; 8.
12、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; 18. 3、两列宽度自适应布局设置自适应主要通过宽度的百分比值设置，因此在两列宽度自适应布局也同样是对百分比宽度值设定，才、CSS代码：1.#left2.width:30%;3.height:250px;4.background-co
13、lor：#6CF;5.border：2pxsolid#66F6.float:left;7.8.#right9.width:60%10.height:250px;11.background-color：#6CF;12.border：2pxsolid#66F13.float:left;14.4、两列右列宽度自适应布局左栏固定宽度，右栏根据浏览器窗口的大小自动适应。在CSS中只需要设置左栏设置宽度，右栏不设置任何宽度值，并且右栏不浮动，CSS代码： 1. #left 2. width: 200px; 3. height : 250px; 4. background-color：#6CF; 5. bo
14、rder：2px solid #66F 6. float: left; 7. 8. #right 9. height :250px; 10. background-color：#6CF; 11. border：2px solid #66F 12. 5、三列浮动中间列宽度自适应布局三列中间栏左右栏的间距变化适应，单纯的使用float属性与百分比属性不能实现，就要用绝对定位来表现，只需要设置对象的top、right、bottom及left四个方面即可，XHTMLD代码：1.左边2.中间3.右边使用绝对定位将左列与右列进行位置控制，CSS代码： 1. #left 2. width: 200px; 3
15、. 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: 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高度自适应高度值同光可以使用百分比进行设置，不同
16、的是直接用height:100%不会显示效果的，这与浏览器的解析方式有一定关系，实现高度自适应的CSS代码： 1. html,body 2. margin:0px; 3. height:100%; 4. 5. #left 6. width：250px; 7. height: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定义：用
17、于设置当对象的内容超过其指定的高度和宽度时应如何处理。定义：用于设置当对象的内容超过其指定的高度和宽度时应如何处理。定义语法：定义语法：overflow: visible| auto| hidden| scrollvisible: 不剪切内容，也不添加滚动条。不剪切内容，也不添加滚动条。如果显示声明该默认值，对象将被剪如果显示声明该默认值，对象将被剪切为包含对象的切为包含对象的window或或frame的大小，并且的大小，并且clip属性设置将失效。属性设置将失效。auto：该属性值为：该属性值为body对象和对象和textarea的默认值，在需要时剪切内容并添加滚的默认值，在需要时剪切内容并
18、添加滚动条。动条。hidden：不显示超出对象尺寸的内容。：不显示超出对象尺寸的内容。scroll：总是显示该滚动条。总是显示该滚动条。提示：提示：设置设置textarea对象为对象为hidden值可以隐藏其滚动条。值可以隐藏其滚动条。 对于对于table来说，如果来说，如果table-layout属性设置为属性设置为fixed，则，则td对象支持带有默认值为对象支持带有默认值为hidden的的overflow属性，如果属性，如果设置为设置为hidden、scroll、auto，那么超出，那么超出td尺寸的内容将被剪切。尺寸的内容将被剪切。如果设为如果设为visible，将导致额外的文本溢出到
19、右边或左边（视，将导致额外的文本溢出到右边或左边（视direction属性设置而属性设置而定）的单元格。定）的单元格。19. p、h1、div等元素常常称为块级元素。这就意等元素常常称为块级元素。这就意 味着这些味着这些 元素显示为一块内容，即元素显示为一块内容，即“块框块框”。与之相反。与之相反strong和和span等元素称为行内元素，等元素称为行内元素，因为它们的内容显示在行中，即因为它们的内容显示在行中，即“行内框行内框”。可以使用。可以使用display属性改变生成的框属性改变生成的框的类型，通过将的类型，通过将display属性设置为属性设置为block，可以让行内元素表现得像块级
20、元素一样。，可以让行内元素表现得像块级元素一样。还可以将还可以将display属性设置为属性设置为none，让生成的元素根本没有框。这样，这个框及其，让生成的元素根本没有框。这样，这个框及其所有内容就不显示，不占用文档中的空间所有内容就不显示，不占用文档中的空间。20. 21. 该页面在该页面在IE浏览器中预览效果，如下图：浏览器中预览效果，如下图：5.4.2实战实战2： overflow-x定义：用于设置当对象的内容超过其指定的宽度时应如何处理。定义：用于设置当对象的内容超过其指定的宽度时应如何处理。定义语法：定义语法：overflow-x: visible| auto| hidden| s
21、crollOverflow-x属性的用法和兼容性与属性的用法和兼容性与overflow属性的用法和兼容性完全相同属性的用法和兼容性完全相同。例如：例如：Overflow属性的兼容性，例如：属性的兼容性，例如：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: scroll;15.16. 17.18.1. 2. 3. 4. 5. over
22、flow6. 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: scroll;15.16. 17. 18. 19. p、h1、div等元素常常称为块级元素。这就意味着这些元素显示为一块内容，即“块框”。与之相反strong和span等元素称为行内元素，因为它们的内容显示在行中，即“行内框”。可以使用display属性改变生成的框的类型，通过将display属性设置为block，可以
23、让行内元素表现得像块级元素一样。还可以将display属性设置为none，让生成的元素根本没有框。20. 21. 该页面在该页面在IE浏览器中预览效果，如下图：浏览器中预览效果，如下图：5.4.3实战实战3： overflow-y定义：用于设置当对象的内容超过其指定的高度时应如何处理。定义：用于设置当对象的内容超过其指定的高度时应如何处理。定义语法：定义语法：overflow-x: visible| auto| hidden| scrollOverflow-y属性的用法和兼容性与属性的用法和兼容性与overflow属性的用法和兼容性完全相同属性的用法和兼容性完全相同。例例如：如：19. p、h
24、1、div等元素常常称为块级元素。这就意味着这些元素显示为一块内容，即“块框”。与之相反strong和span等元素称为行内元素，因为它们的内容显示在行中，即“行内框”。可以使用display属性改变生成的框的类型，通过将display属性设置为block，可以让行内元素表现得像块级元素一样。还可以将display属性设置为none，让生成的元素根本没有框。20. 21. 该页面在该页面在IE浏览器中预览效果，如下图：浏览器中预览效果，如下图：5.4.4 使用使用CSS3.0实现鼠标经过变换效果实现鼠标经过变换效果本实例中将通过使用本实例中将通过使用CSS3.0中新增的中新增的border-r
25、adius和和transition属性来实现属性来实现鼠标经过变换效果。鼠标经过变换效果。步骤一：步骤一：1、执行、执行“文件文件新建新建”命令，新建空白文档，保存命令，新建空白文档，保存“光盘光盘/源文件源文件/第第5章章/5-4-4.html 2、转换到代码视图中，在页面头部加入内部样式表，并定义、转换到代码视图中，在页面头部加入内部样式表，并定义body标签样式，标签样式，如图如图 5-4-1所示：所示：body width: 750px;font-family: 宋体宋体;font-size: 14px;font-weight: bold;margin: 0px;图图5-4-1CSS样
26、式代码样式代码3、返还到设计视图，在页面中插入一个名为、返还到设计视图，在页面中插入一个名为box的的DIV,如如5-4-2所示所示步骤二：步骤二：1、转换到代码视图中，在内部样式中定义一个名为、转换到代码视图中，在内部样式中定义一个名为#box的的CSS样式。样式。 如图如图5-4-3所示：所示： 2、返还设计页面，在该、返还设计页面，在该DIV中输入相应的文章内容，如图中输入相应的文章内容，如图5-4-4所示：所示：#box margin: 20px auto 0px 20px;border: 5px solid #CCCCCC;padding: 10px;-webkit-border-r
27、adius:10px;-webkit-transition-property:color,background-color,padding-left;-webkit-transition-duration:500ms,500ms,500ms;图图 5-4-3 CSS样式代码样式代码图图5-4-4 页面效果页面效果步骤三：步骤三：1、转换到代码视图中，在内部样式中定义一个名为、转换到代码视图中，在内部样式中定义一个名为#box: hover的的CSS样式，如图样式，如图5-4-5所示。所示。 2、返还设计页面，页面效果如图、返还设计页面，页面效果如图5-4-6所示所示#box:hover bac
28、kground-color: #EFEFEF;color: #FF0000;padding-left:50px;图图5-4-5 CSS样式代码样式代码图图5-4-6页面效果页面效果步骤四：保存页面，在步骤四：保存页面，在Chrome浏览器中预览页面，可以看到使用浏览器中预览页面，可以看到使用CSS3.0所实现的鼠标经过变换效果，如图所实现的鼠标经过变换效果，如图5-4-7所示。所示。图图5-4-7 在在chrome浏览器中预览效果浏览器中预览效果5.5商业案例设计制作咖啡店网站页面设计制作咖啡店网站，首先要了解经营者的设想设想和目标目标，其次需要深入了解这家咖啡店的特色特色。根据咖啡店的特色确
29、定网站的风格、主色调、主次布局和经营者的目标风格、主色调、主次布局和经营者的目标自由想象设计，形成图纸，并用设计软件实现。5.5.1设计分析-以网站首页为例以古典的浅黄色为主色，咖啡色描边，突出咖啡店的风格新鲜的绿色传达出健康生活理念布局上简约文字与图片相融合导航的设计增添网站的趣味性5.5.2布局分析topbottombanner布局类型上型中型下型leftrightboxmain5.5.3制作流程11.需要通过对话框的形式对CSS样式进行设置2.在该DIV中分别插入相应的DIV来完成页面上、中、下部分内容的制作单击“分类”列表中的区块选项，对相关选项进行设置，单击确定，既可以看到效果在页面
30、中插入名称为box的DIV，位置点选择“在插入点”打开“css”面板并选择div.css，新建css规则，在选择类型器中选择ID（仅用于一个HTML元素，在选择名称中输入box）在弹出的“CSS规则定义”对话框中，分别选择“区块”和“方框”选项，对相关选项进行设置。删除多余的文本，点击“插入Div标签”，在该Div中插入名称为top的DIV以相同的方法新建css规则，对“背景”和“方框”的相关选项进行设置，并删除多余的文本插入FLASH动画，并将该动画的Wmode属性为“透明”，保存页面并保存外部样式表文件在名为top的DIV后插入名为main的DIV，并用相同方法新建css规则，对“背景”和
31、“方框”的相关选项进行设置在名为left的DIV中插入图像，并在该DIV后插入名为right的DIV，并以相同的方式建立css规则，其中选择器名称为rightcss规则定义，分别选择“类型”、“背景”、“方框”的相关选项进行设置在名为right的DIV文件中输入相应的文本内容，并以同法新建css规则，在选择器类型中选择“类”（可用于任何HTML元素），选择名称为font01css规则定义，对“类型”的相关选项进行设置，选中相应的文本，在“属性”中的类选择刚定义的样式表font01新建css规则，设置选择器名称为“font2”，在“css规则定义”中对“方框”的相关选项进行设置选中相应的文本内容
32、，在“属性”的“类”中应用样式表font2，相同方法，完成页面版底信息部分内容的制作完成整个页面制作，保存并保存相关的外部样式表5.5.4制作流程2分别新建一个空白的HTML文件和两个CSS文件，并保存切换到5-5.html文件，打开“CSS样表”面版，单击“附加样式表”按钮，在“链接外部样式表”中，将刚刚新建的两个CSS文件链接到文件选中CSS.CSS样式表，新建CSS规则，并在弹出的对话框的选择器类型下拉表选择“标签（重新定义HTML元素）”，在选择器名称处输入*在“CSS规则定义”对话框的“分类”列表中选择“方框”，设置Padding和Margin均为0，然后选择边框选项并设置width
33、为0用相同的方法新建css规则，在选择器名称中选择body标签，单击确定在弹出的“CSS规则定义”对话框中，在“分类”列表中分别选择“类型”和“背景”选项，对相关选项进行设置5.5.5案例小结本实例中主要学习了DIV+CSS布局方法，制作过程中要熟练掌握插入DIV的方法和建立CSS规则，以及通过CSS“规则定义”对话框设置常见的CSS属性。通过CSS规则控制页面中文字的格式和对齐方式，为以后直接书写CSS代码做好铺垫5.6 课后作业制作个人网站页面5.6.1案例分析案例分析制作过程制作过程:1、制作出页面的背景效果、制作出页面的背景效果 2、 制作页面的主题内容及信息制作页面的主题内容及信息
34、在制作过程中，注意对导航菜单图像的处理方法在制作过程中，注意对导航菜单图像的处理方法效果图如下：效果图如下：5.6.2技能剖析技能剖析实现效果实现效果 使用方法使用方法页面的背景图像页面的背景图像#box width：1005px height：726px background-image:url(./images/007.jpg)； background-repeat：no-repeat；1、剖析步骤：剖析步骤：2、实现效果实现效果使用技术使用技术 页面主体布局页面主体布局#left width：540px； height：681px； margin:10px 0px 0px 53px;通过
35、名为通过名为left的的DIV布局页面布局页面主体，在主体，在left种插入多个种插入多个DIV，通过，通过CSS样式进行控制，并样式进行控制，并分别在各分别在各DIV中制作相应的内中制作相应的内容。容。3、实现效果实现效果使用技术使用技术版底信息内容格式版底信息内容格式#bottom width：1005px； height：20px； txt-align：center； padding-top：15px;版式信息内容分隔版式信息内容分隔#bottom span margin:0px 5px 0px 5px本章小结本章主要讲解了DIV+CSS布局在网页制作过程中的运用，前面的基础部分讲解如何使用DIV+CSS布局和这种布局方法对一个网站页面的设计制作的重要性，网页布局的好坏，对网页加载速度会有很大的影响。后面通过实例讲解了DIV+CSS布局的具体应用，帮助读者深刻体会DIV+CSS在网页制作上的优势。读者在完成本章内容的学习后，希望能够掌握使用DIV+CSS对网页进行布局的常见方法，在实际设计制作中能够使用DIV+CSS对网站页面进行布局制作。
