DIVCSS布置基础学习.ppt

《DIVCSS布置基础学习.ppt》由会员分享，可在线阅读，更多相关《DIVCSS布置基础学习.ppt（57页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第五章 DIV+CSS布局入门,5.1 定义DIV 5.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属性，为当前这个DIV指定一个id

3、名称，在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、 3、左边部分 4

5、、右边部分 5、 6、网页尾部,DIV的嵌套,bottom,top,main,垂直排列布局,bottom,top,left,right,嵌套布局,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、inherit,5.2.4绝对定位,相对定位的元素是普通流的一部分，元素的位置相

7、对于它在普通流中的位置。 与之相反，绝对定位中的元素的位置与文档流无关，因此不占据空间，普通文档流中其他元素的布局就像绝对定位的元素不存在一样。,5.2.5浮动定位（float）：left、right、none,5.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 sol

10、id #66F 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、两列固定宽度居中布局,两列固定宽度居中布局 为分栏的两个DIV加上了一个id名为box的容

11、器，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; 18. ,3、两列宽度自适应

12、布局,设置 自适应主要通过宽度的百分比值设置，因此在两列宽度自适应布局也同样是对百分比宽度值设定，才、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. ,4、两列右列宽度自适应布局

13、,左栏固定宽度，右栏根据浏览器窗口的大小自动适应。在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: 250px; 1

15、2. 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:100%; 8.

16、 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| scroll,visible: 不剪切内容，也不添加滚动条。如果显示声明该默认值，对象将被剪切为包含对象的window或frame的大小，并且clip属性设置将失效。,aut

17、o：该属性值为body对象和textarea的默认值，在需要时剪切内容并添加滚动条。,hidden：不显示超出对象尺寸的内容。,scroll：总是显示该滚动条。,提示： 设置textarea对象为hidden值可以隐藏其滚动条。 对于table来说，如果table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性，如果设置为hidden、scroll、auto，那么超出td尺寸的内容将被剪切。 如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格。,19. p、h1、div等元素常常称为块级元素。这就

18、意 味着这些 元素显示为一块内容，即“块框”。与之相反strong和span等元素称为行内元素，因为它们的内容显示在行中，即“行内框”。可以使用display属性改变生成的框的类型，通过将display属性设置为block，可以让行内元素表现得像块级元素一样。还可以将display属性设置为none，让生成的元素根本没有框。这样，这个框及其所有内容就不显示，不占用文档中的空间。 20. 21. ,该页面在IE浏览器中预览效果，如下图：,5.4.2实战2： overflow-x,定义：用于设置当对象的内容超过其指定的宽度时应如何处理。,定义语法：overflow-x: visible| auto

19、| hidden| scroll,Overflow-x属性的用法和兼容性与overflow属性的用法和兼容性完全相同。例如：,Overflow属性的兼容性，例如：,1. 2. 3. 4. 5. overflow 6. 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. overflow 6. 7.

20、#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，可以让

21、行内元素表现得像块级元素一样。还可以将display属性设置为none，让生成的元素根本没有框。 20. 21. ,该页面在IE浏览器中预览效果，如下图：,5.4.3实战3： overflow-y 定义：用于设置当对象的内容超过其指定的高度时应如何处理。 定义语法：overflow-x: visible| auto| hidden| scroll Overflow-y属性的用法和兼容性与overflow属性的用法和兼容性完全相同。例如：,19. p、h1、div等元素常常称为块级元素。这就意味着这些元素显示为一块内容，即“块框”。与之相反strong和span等元素称为行内元素，因为它们的内容

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

23、y标签样式，如图 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-4-3所示： 2、返还设计页面，在该DIV中输入相应的文章内容，如图5-4-4所示：,#box margin: 20px auto 0px 20px; border: 5px solid #CCCCCC;

24、 padding: 10px; -webkit-border-radius: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 background-color: #EFEFEF

25、; color: #FF0000; padding-left:50px; ,图5-4-5 CSS样式代码,图5-4-6页面效果,步骤四：保存页面，在Chrome浏览器中预览页面，可以看到使用CSS3.0所实现的鼠标经过变换效果，如图5-4-7所示。,图5-4-7 在chrome浏览器中预览效果,5.5商业案例设计制作咖啡店网站页面,设计制作咖啡店网站，首先要了解经营者的设想和目标，其次需要深入了解这家咖啡店的特色。 根据咖啡店的特色确定网站的风格、主色调、主次布局和经营者的目标自由想象设计，形成图纸，并用设计软件实现。,5.5.1设计分析-以网站首页为例,以古典的浅黄色为主色，咖啡色描边，突出

26、咖啡店的风格 新鲜的绿色传达出健康生活理念 布局上简约 文字与图片相融合 导航的设计增添网站的趣味性,5.5.2布局分析,布局类型,上型,中型,下型,box,main,5.5.3制作流程1,1.需要通过对话框的形式对CSS样式进行设置 2.在该DIV中分别插入相应的DIV来完成页面上、中、下部分内容的制作,单击“分类”列表中的区块选项，对相关选项进行设置，单击确定，既可以看到效果,在页面中插入名称为box的DIV，位置点选择“在插入点”,打开“css”面板并选择div.css，新建css规则，在选择类型器中选择ID（仅用于一个HTML元素，在选择名称中输入box）,在弹出的“CSS规则定义”对

27、话框中，分别选择“区块”和“方框”选项，对相关选项进行设置。,删除多余的文本，点击“插入Div标签”，在该Div中插入名称为top的DIV,以相同的方法新建css规则，对“背景”和“方框”的相关选项进行设置，并删除多余的文本,插入FLASH动画，并将该动画的Wmode属性为“透明”，保存页面并保存外部样式表文件,在名为top的DIV后插入名为main的DIV，并用相同方法新建css规则，对“背景”和“方框”的相关选项进行设置,在名为left的DIV中插入图像，并在该DIV后插入名为right的DIV，并以相同的方式建立css规则，其中选择器名称为right,css规则定义，分别选择“类型”、“

28、背景”、“方框”的相关选项进行设置,在名为right的DIV文件中输入相应的文本内容，并以同法新建css规则，在选择器类型中选择“类”（可用于任何HTML元素），选择名称为font01,css规则定义，对“类型”的相关选项进行设置，选中相应的文本，在“属性”中的类选择刚定义的样式表font01,新建css规则，设置选择器名称为“font2”，在“css规则定义”中对“方框”的相关选项进行设置,选中相应的文本内容，在“属性”的“类”中应用样式表font2，相同方法，完成页面版底信息部分内容的制作,完成整个页面制作，保存并保存相关的外部样式表,5.5.4制作流程2,分别新建一个空白的HTML文件和

29、两个CSS文件，并保存,切换到5-5.html文件，打开“CSS样表”面版，单击“附加样式表”按钮，在“链接外部样式表”中，将刚刚新建的两个CSS文件链接到文件,选中CSS.CSS样式表，新建CSS规则，并在弹出的对话框的选择器类型下拉表选择“标签（重新定义HTML元素）”，在选择器名称处输入*,在“CSS规则定义”对话框的“分类”列表中选择“方框”，设置Padding和Margin均为0，然后选择边框选项并设置width为0,用相同的方法新建css规则，在选择器名称中选择body标签，单击确定,在弹出的“CSS规则定义”对话框中，在“分类”列表中分别选择“类型”和“背景”选项，对相关选项进行

30、设置,5.5.5案例小结,本实例中主要学习了DIV+CSS布局方法，制作过程中要熟练掌握插入DIV的方法和建立CSS规则，以及通过CSS“规则定义”对话框设置常见的CSS属性。通过CSS规则控制页面中文字的格式和对齐方式，为以后直接书写CSS代码做好铺垫,5.6 课后作业制作个人网站页面,5.6.1案例分析,制作过程:1、制作出页面的背景效果,2、 制作页面的主题内容及信息,在制作过程中，注意对导航菜单图像的处理方法,效果图如下：,5.6.2技能剖析,1、,剖析步骤：,2、,3、,本章小结,本章主要讲解了DIV+CSS布局在网页制作过程中的运用，前面的基础部分讲解如何使用DIV+CSS布局和这种布局方法对一个网站页面的设计制作的重要性，网页布局的好坏，对网页加载速度会有很大的影响。 后面通过实例讲解了DIV+CSS布局的具体应用，帮助读者深刻体会DIV+CSS在网页制作上的优势。读者在完成本章内容的学习后，希望能够掌握使用DIV+CSS对网页进行布局的常见方法，在实际设计制作中能够使用DIV+CSS对网站页面进行布局制作。,