第八章CSSDIV布局.pptVIP

相关回顾 有哪3种引入css样式表的方式？ 1)外部样式表 link rel=stylesheet type=text/css href=a.css / 2)内嵌样式表 style type=text/css 3)内联样式表 p style=color:red 相关回顾 样式表中有哪些选择器？ 元素选择器 ID选择器 类选择器 …… 预习检查 1、Web2.0标准分为哪三个方面？ 2、DIV中的定位方式有哪几种？ 3、设置和清除DIV浮动分别使用什么属性？ 预习检查 4、盒子模型的有那些属性？ 5、常见的网页布局有哪些？ 本章任务 本章任务 用CSS+DIV的布局完成如图功能 本章目标 什么是Web标准 Web2.0标准的构成 W3C 结构标准语言 结构标准语言 结构标准语言 表现标准语言 行为标准语言 小结1 认识DIV DIV的三种定位方式 DIV的绝对定位 DIV的相对定位 DIV的固定定位 何时选用绝对与相对定位 小结2 DIV的浮动 DIV的浮动 浮动的清除 小结3 常见的网页布局 1、一列固定宽度 2、一列宽度自动适应 3、一列固定宽度居中 4、二列固定宽度 5、二列宽度自动适应 6、二列左列固定右列宽度自适应 7、二列固定宽度居中 8、三列中间列宽度自动适应 常见的网页布局 1、一列固定宽度: 一列式布局是一种固定宽度的布局样式，XHTML代码相当简单，我们只需要编写一个DIV。 一列宽度自动适应 自适应布局是网页设计中常见的布局形式，自适应的布局能够根据浏览窗口的大小自动改变其宽度和高度的值，是一种非常灵活的布局方式。以百分比的形式 一列固定宽度居中 .页面整体居中是网页设计中最普遍应用的形式，在传统表格布局中， 我们使用表格的align=“center”属性实现。Div本身也align=“center ”也可以让Div呈现居中状态。 二列固定宽度 .有了一列固定宽度作为基础，实现两个列的固定宽度。 二列宽度自动适应 .就是使左右栏宽度能够做到自适应。设置自适应主要通过设置宽度的百 分比。 二列左列固定右列宽度自适应 .就使左栏固定宽度，右栏根据浏览窗口大小自动适应。 右栏不设置任何宽度值，并且右栏不浮动。 二列固定宽度居中 .使两个固定宽度的DIV居中，外面要用到设置居中的父容器。 三列中间列宽度自动适应 .三列式布局：其中左栏要求固定宽度，并居左显示，右栏要求固定宽度 并居右显示，而中间栏需要在左栏和 右栏的中间，根据左右栏的间距变 化自动适应。 小结4 下面的样式代码是种什么布局 CSS+DIV布局实例 结合前面所学的布局示例，来完成一个三行三列的网页布局结构 总结 总结 常用的布局结构有哪些？ 一列固定宽度、一列宽度自动适应和一列固定宽度居中布局结构 二列固定宽度、二列宽度自动适应、二列左列固定、右列宽度自适应和二列固定宽度居中布局结构。 三列浮动中间列宽度自动适应布局结构。 div id=“layout”一列定宽度/div #layout { border:2px soild #A9C9E2; backgroud-color:#E8F5FE; Height:200px; width:300px; } #layout { border:2px soild #A9C9E2; backgroud-color:#E8F5FE; Height:200px; Width:80%; } #layout { border:2px soild #A9C9E2; backgroud-color:#E8F5FE; Height:200px; Width:300px; margin:0px auto; } div id=“left”左列/div div id=“right”右列/div #left{ border:1px soild #A9C9E2 ;backgroud-color:#E8F5FE; Height:200px; Width:300px;float:left;} # right{ border:1px soild #A9C9E2 ;backgroudcolor:#E8F5FE; Height:200px; Width:300px;float:left;} div id=“left”左列/div div id=“right”右列/div #left{ border:1px soild #A9C9E2 ;backgroud-color:#E8F5FE; Height:200px; Width:20%;float:left;}