第6章DIV+CSS课件

1、Learning HTML&CSSLearning HTML&CSS第六章第六章Company Logo课程要求与目标课程要求与目标理解表现和结构分离理解表现和结构分离掌握如何使用掌握如何使用DIV掌握如何使用盒子模型掌握如何使用盒子模型掌握如何使用浮动定位掌握如何使用浮动定位u业界对DIV+CSS的标准化设计关注uDIV+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准 u传统的网页布局是使用表格DIV+CSS布局这个布局中，div承载的是内容，而css承载的是样式。布局优势：精简代码，减少重构难度。网页访问速度SEO优化浏览器兼容性结构（结构（DIVDIV）与表现（）与表现（C

2、SSCSS）的分离）的分离(1-1)(1-1) 所有所有HTML和和XHTML页面都由页面都由内容内容结构结构表现表现行为行为 -这几方面组成。这几方面组成。即根据内容设计结构和表现，最后再对其加点即根据内容设计结构和表现，最后再对其加点“行为行为”控制。控制。结构（结构（DIVDIV）与表现（）与表现（CSSCSS）的分离）的分离(1-2)(1-2) 内容：是页面实际要传达的真正信息，包含数据、文档或者图片等。内容：是页面实际要传达的真正信息，包含数据、文档或者图片等。注意着里强调的注意着里强调的“真正信息真正信息”是指纯粹的数据信息本身。是指纯粹的数据信息本身。 结构：是由文档中的主体部分

3、，再加上结构化标记。结构：是由文档中的主体部分，再加上结构化标记。 表现：是你赋予内容的一种样式，就是文档看起来的样子。表现：是你赋予内容的一种样式，就是文档看起来的样子。 行为：行为就是对内容的交互及操作效果。行为：行为就是对内容的交互及操作效果。 CSS+DIV布局中，布局中，CSS作为一种表现而单独存在，它实现了表现与结作为一种表现而单独存在，它实现了表现与结构的分离，对于网页的修改，可以只对构的分离，对于网页的修改，可以只对CSS的修改而带来页面样式的的修改而带来页面样式的变化变化CSS盒模型第二节 div与span DIVdiv1. DIV 全称 division 意为“区分”使用

4、DIV 的方法跟使用其他 tag 的方法一样。 2. 如果单独使用 DIV 而不加任何 CSS，那么它在网页中的效果和使用 是一样的。 3. DIV本身就是容器性质的，你不但可以内嵌table还可以内嵌文本和其它的HTML代码 4. 注意：标签可以用来组合其它的HTML元素，但不能嵌套在段落元素中，例如，aabbcc的结果是不确定的。注释注释： 是一个是一个块级元块级元素，素，也就是也就是说，浏说，浏览器通览器通常会在常会在 div div 元元素前后素前后放置一放置一个换行个换行符。符。Company Logo使用使用和和标签标签v和和只是作为一个容器来使用只是作为一个容器来使用v一般用来创

5、建层一般用来创建层 我是第一层我是第一层我是下面一层我是下面一层 层标签关键代码 Z-index=1，我是第一层，我是容器，包含图片段落 Z-index=2，我是第二层，包含图片和段落 使用 Z index指定是哪一层是块级容器标签，可以包含图片、标题、段落、文字等 图片段落topleft SPANspanspanpan标记指行内元素，主要用于文本的容器。标记指行内元素，主要用于文本的容器。相对相对divdiv容器，容器，spanspan容器的文本或图片要小些。容器的文本或图片要小些。不能用宽度属性不能用宽度属性widthwidth设置设置spanspan标记内对象的宽标记内对象的宽度。度。何

6、时使用何时使用spanspan？在一行文本中，想对其中的文字？在一行文本中，想对其中的文字设置样式，而又不要该行文本换行的条件下，可选设置样式，而又不要该行文本换行的条件下，可选择择spanspan。注释注释：span span 没有固没有固定的格定的格式表现。式表现。当对它当对它应用样应用样式时，式时，它才会它才会产生视产生视觉上的觉上的变化。变化。Company Logo12标签标签功夫经历：功夫经历：课堂上听话的好乖乖，遇上妙妙老师，从此放学以课堂上听话的好乖乖，遇上妙妙老师，从此放学以后，多了一项作业，那就是修炼功夫小子的格斗天赋。可是，他的每门后，多了一项作业，那就是修炼功夫小子的格

7、斗天赋。可是，他的每门功课都还是全班功课都还是全班第一第一。 是行级容器标签，可以包含图片、文字内容,SPAN 的前后是不会换行的。 标签所有韩款童装10元/件起拍喽uCSS的定位与显示属性可以把一个HTML元素定位在网页中的任何位置u定位与布局密切相关uCSS中有三种基本的定位机制普通流：显示的位置由元素在HTML文件中的位置决定浮动：可以左右移动，直到碰到包含框或其它浮动框绝对定位：可以直接将元素定位在页面上地任何位置u层叠顺序进行CSS定位时，有可能发生多个元素的重叠需要设置元素在Z轴上的层叠顺序u与定位相关的属性主要有14个普通流定位机制B按照元素的类型和在HTML源文件中的出现顺序进

8、行定位就是block元素（如p、h、div）（块级框）从上到下一个接一个的排列inline元素（如span、strong元素）在行中水平布置除非特殊的指定，否则所有的框都在普通流中定位浮动（float）浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘u 当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，占据空间，但是会缩短行框，产生文字环绕的效果产生文字环绕的效果如果水平位置没有空间了，则box3会跑到下面去如果box2

9、的高度没有box1高度大，box1减去box2的高度的部分会把box3拦住浮动定位机制float: none | left |right 注意：B 浮动元素的外边缘不会超过其父元素的内边缘。B 浮动元素不会互相重叠。B 浮动元素不会上下浮动。B 如果某个浮动元素在另一个浮动元素之后显示，而且会超出容纳块，则它下降到低于先前浮动元素的位置（即被顶到下一行）。Clear属性u 如果要为浮动元素留出垂直空间，使其它的元素不在其两侧显示，如果要为浮动元素留出垂直空间，使其它的元素不在其两侧显示，可以可以对其周围的元素对其周围的元素使用清理属性使用清理属性添加了clear属性的元素，通过自动增加空白边，

10、达到留出垂直空间的效果clear: none | left |right|both Float浮动布局-两列的浮动布局（两列的浮动布局（示例示例1 1） 将两个将两个DIV块放在另一个块放在另一个DIV块中，分别设置左右浮动实现。块中，分别设置左右浮动实现。 #container margin:0px auto; padding:10px; width:450px; height:260px; border:1px solid #000;#box1width:300px; height:260px; border:1px solid #000; float:left;#box2width:12

11、0px; height:260px; border:1px solid #000; float:right; 这里是box1这里是box2 v 每个板块都是一个，这里直接使用 CSS 中的 id 来表示各个板块。v 页面的所有 Div 块都属于 container，一般的 Div 排版都会在最外面加上这个父 Div ， 便于对页面的整体进行调整。v 对于每个 Div 块，还可以再加入各种元素或行内元素。Float浮动布局-三列的浮动布局（三列的浮动布局（示例示例2 2）clear:both;float:left;float:right;相对定位-relativeu 相对于元素在普通文本流中的初

12、始位置如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动#style1 position: relative;left:20px;top:20px 绝对定位机制position:relative |absolute|fixed |static绝对定位-absoluteu 可以把某个元素精确的定位在某个地方 绝对定位使元素的位置与文档流无关，因此不占据普通流中的空间，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样 绝对定位的元素的位置是相对于最近的父元素而言的固定定位u 是绝对定位的一个

13、特殊情况 与绝对定位相似，唯一不同的是绝对定位是相对于父元素的某一个位置，而固定定位则是固定在浏览器的视框位置 这样当窗口滚动时，固定定位的元素不会随之滚动，总是出现在屏幕的固定位置 #style1 position:absolute;left:20px;top:20px #style1 position:fixed;left:20px;top:20px Overflow、Visibility、display、Z-index属性uOverflow内容超过层大小时 overflow:visible | auto | hidden | scroll uZ-index设置层叠顺序当定位多个元素并将它

14、们相互重叠时，可以使当定位多个元素并将它们相互重叠时，可以使用该属性设置元素在用该属性设置元素在Z Z轴的层叠顺序轴的层叠顺序 属性值越大表示在越上层属性值越大表示在越上层z-index : number Overflow、Visibility、display、Z-index属性display-设置对象显示方式(可以各种不同的方式显示对象)dispaly:block | none | inline | inline-block |list-item Visibility设置对象是否可见 定义这个层级是不是要在画面上显示出功能来，最常利用java script来动态控制某个层级的显示状况，进而达

15、到动态的效果 默认值是visible，不显示则设定成hiddenvisibility:inherit | visible | hidden display=none;与visibility=hidden;是不一样的后者为隐藏的对象保留其占据的物理空间，而前者则不保留u使用CSS布局技术可以完成页面整体布局，实现各种布局样式uCSS布局技术都基于三个基本概念：定位、浮动和空白边操纵u基本布局方式有很多按外观分，有单列布局、两列布局、三列布局等按实现技术分，有基于自动空白边的布局、浮动布局等按适应性分，有固定宽度布局、流式布局，弹性布局等Company Logo网页布局网页布局 制作网页前我们需要

16、对网页整制作网页前我们需要对网页整体结构做一个版块的划分，版体结构做一个版块的划分，版块划分的合理性很大程度上决块划分的合理性很大程度上决定了网页布局的复杂程度。如：定了网页布局的复杂程度。如： 分析：整个图片分为以下几个部分分析：整个图片分为以下几个部分顶部：包括顶部：包括Logo和一个背景图片和一个背景图片导航栏导航栏内容部分分为侧边栏和主体内容内容部分分为侧边栏和主体内容底部页脚包括一些版权信息底部页脚包括一些版权信息headermenucontentsidebarFooterCompany Logo实际布局图如下：实际布局图如下：4.1 将页面用Div分块4.2 设计DIV块位置#co

17、ntainerHTML框架代码框架代码containerheader menu contentsidebar footer 整理好页面的框架后，就可以利用整理好页面的框架后，就可以利用CSSCSS对各个板块进行定对各个板块进行定位，实现对页面的整体规划，然后再往各个板块中添加内容位，实现对页面的整体规划，然后再往各个板块中添加内容。1）对 body 标记的设置，CSS代码为： body margin:10px; text-align:center 4.3 用CSS定位2）对 container 标记的CSS设置： #container width:800px;border:1px solid

18、black;padding:10px;margin-left:auto;margin-right:auto; margin-left:auto;margin-right:auto;使container块水平居中3）对 header 标记的CSS设置： #header margin-bottom:5px;padding:10px;background-color:#a2d9ff;border:1px solid #000;text-align:center; 4.3 用CSS定位同样对同样对menu标记进行标记进行CSS设置设置4）利用 float 方法将content移动到左侧。 #conte

19、nt float:left;width:570px;height:300px;border:1px solid #000;text-align:center; 4.3 用CSS定位5）利用 float 方法将 sidebar 移动到页面右侧 #sidebar float:right; width:200px; height:300px;border:1px solid black; text-align:center; 6）由于content和sidebar对象都设置了浮动属性，因此footer需要设置clear属性，使其不受浮动的影响。 #footer clear:both;padding:

20、10px;border:1px solid black; 4.3 用CSS定位 这样页面的整体框架便搭建好了，这里需要指出的是content块中不能放宽度太长的元素，如很长的图片或不折行的英文等，否则links将再次被挤到content的下方。但可用overflow进行设置。 特别地，如果后期维护时希望content的位置与sidebar对调，仅仅只需要将content和sidebar属性中的left和right改变。这是传统的排版方式所不可能简单实现的，也正是CSS排版的魅力之一。4.3 用CSS定位Div+CSS常见错误总结1. 检查HTML元素是否有拼写错误、是否忘记结束标记 2. 检查

21、CSS是否正确 3. 确定错误发生的位置如果错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。4. 利用border属性确定出错元素的布局特性使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。5. float元素的父元素不能指定clear属性MacIE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。这是MacIE的著名的bug，倘若不知道就会走弯路。6. float元素务必指定width属性很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定