JSP程序设计基础ppt课件.ppt

《JSP程序设计基础ppt课件.ppt》由会员分享，可在线阅读，更多相关《JSP程序设计基础ppt课件.ppt（115页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确CSS复习（思考）.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确CSS复习（思考）CSS思想(思想1）CSS定义自定义样式标签重定义高级样式文字图像超链接CSS引用外部文件内部引用DIV+CSS（思想2）.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确一、CSS思想（思想1）.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，

2、所提出的问题也很明确 图图1 仅使用仅使用HTML定定“结构结构”的页面效果的页面效果 .在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 图图2 使用使用CSS设定样式之后的效果设定样式之后的效果.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确“Web标准”概述 下面介绍关于网页的标准“Web标准”。网页主要由3个部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。图图3“结构结构”、“表现表现”和和“行为行为”的关系的关系.

3、在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 “结构”、“表现”和“行为”分别对应于3种非常常用的技术，即(X)HTML、CSS和JavaScript。也就是说，(X)HTML用来决定网页的结构和内容，CSS用来设定网页的表现样式，JavaScript用来控制网页的行为。.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确二、CSS定义及相关特性.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 构造构造CSS规则

4、规则1基本基本CSS选择器选择器2在在HTML中使用中使用CSS的方法的方法3复合选择器复合选择器4CSS的继承特性的继承特性5.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 通过上一章的学习，了解了在网页设计中引入CSS的意义。引入CSS的核心目的就是实现网页结构内容和表现形式的分离，将原来由HTML语言所承担的一些与结构无关的功能剥离出来，改由CSS来完成。.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确构造CSS规则在具体介绍CSS之前，先思考一个生活中的问题。张

5、飞 身高:185cm;体重:105kg;性别:男;性格:暴躁;民族:汉族;这个表实际上是由3个要素组成的，即姓名、属性和属性值。.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确构造CSS规则CSS的作用就是设置网页的各个组成部分的表现形式。因此，如果把上面的表格换成描述网页上一个标题的属性表，可以设想应该大致如下：2级标题 字体:宋体;大小:15像素;颜色:红色;装饰:下划线 h2 font-family:宋体;font-size:15px;color:red;text-decoration:underline;.在整堂课的教学中，

6、刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确构造CSS规则CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。因此，概括来说，CSS就是由3个基本部分“对象”、“属性”和“值”组成的。.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确2 基本CSS选择器在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称选择器（selector）。标记选择器类别选择器(自定义）ID选择器.在

7、整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确2.1 标记选择器 h1 color:red;font-size:25px;.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确2.2 类别选择器(自定义）图图5 类别选择器类别选择器.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确写一个自定义样式：分别定义段落1、2字体的颜色和大小.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，

8、所提出的问题也很明确 class选择器 .red color:red;/*红色*/font-size:18px;/*文字大小*/.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确.green color:green;/*绿色*/font-size:20px;/*文字大小*/class选择器1 class选择器2 h3同样适用 .在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确2.3 ID选择器图图6 ID选择器选择器.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的

9、设置具有一定的梯度，由浅入深，所提出的问题也很明确 ID选择器#bold font-weight:bold;/*粗体*/#green font-size:30px;/*字体大小*/color:#009900;/*颜色*/.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 ID选择器1 ID选择器2 ID选择器3 ID选择器4 .在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确2.4 复合选择器2.4.1 交集选择器图图7 标记类别选择器标记类别选择器.在整堂课的教学中，刘教师

10、总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 图图8 交集选择器示意图交集选择器示意图.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 p/*标记选择器*/color:blue;p.special/*标记.类别选择器*/color:red;/*红色*/.special/*类别选择器*/color:green;.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 普通段落文本（蓝色）普通标题文本（黑色）指定了.special类别的段落文本

11、（红色）指定了.special类别的标题文本（绿色）.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确2.4.2 并集选择器图图9 并集选择器示意图并集选择器示意图.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 h1,h2,h3,h4,h5,p/*并集选择器*/color:purple;/*文字颜色*/font-size:15px;/*字体大小*/h2.special,.special,#one/*集体声明*/text-decoration:underline;/*下画线

12、*/.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 示例文字h1 示例文字h2 示例文字h3 示例文字h4 示例文字h5 示例文字p1 示例文字p2 示例文字p3.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确2.4.3 后代选择器后代选择器p span/*嵌套声明*/color:red;/*颜色*/.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 span color:blue;/*颜色*/嵌套使用CSS（

13、红色）标记的方法 嵌套之外的标记（蓝色）不生效.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 后代选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类别选择器和ID选择器都可以进行嵌套。下面是一些典型的代码：.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确.special i color:red;/*使用了属性special的标记里面包含的*/#one li padding-left:5px;/*ID为one的标记里面包含的*/td.out.inside stro

14、ng font-size:16px;/*多层嵌套，同样实用*/上面的第3行使用了3层嵌套，实际上更多层的嵌套在语法上都是允许的。.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确三、文字、图像、背景CSS定义（对比、书写）.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确常用文字CSS控制名称名称属性值属性值font-familyfont-family黑体,Arial,“Times New Roman”;/*文字类型*/font-sizefont-sizePx /*文字大小*

15、/font-stylefont-styleItalic /*意大利体*/Oblique /*倾斜*/font-weightfont-weightBold /*加粗*/text-transformtext-transformCapitalize /*单词首字母大写*/Uppercase /*全部大写*/Lowercase /*全部小写*/text-decorationtext-decorationNone /*正常显示*/Underline /*为文字加下划线*/Text-indentText-indent2em /*设置段落首行缩进*/letter-spacingletter-spacingP

16、x /*控制字母间距*/word-spacingword-spacingPx /*控制单词间距*/.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确常用文字CSS控制名称名称属性值属性值line-heightline-height长度(数值，可以使用前面所介绍的尺度单位)倍数(font-size的设置值的倍数)百分比(相对于font-size的百分比)/*调整行与行之间的距离*/text-aligntext-alignLeftrightcenterjustify /*控制文本的水平位置*/ColorColor、backgroundba

17、ckground blue;#0000ff;rgb(0,0,255);rgb(0%,0%,100%);/*颜色*/.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确常用图像的CSS控制名称名称属性值属性值border-styleborder-styledashed;dotted;虚线、实线等border-widthborder-widthpxborder-colorborder-color颜色表达上下左右上下左右border-left、border-right、border-top和border-bottomwidthwidth%图片

18、缩放floatfloatLeft;center;right文字环绕图片vertical-alignvertical-aligntext-bottommiddletopbaseline.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确用CSS设置背景样式名称名称属性值属性值background-colorbackground-color颜色background-imagebackground-imagebackground-image:url(bg.gif);background-repeatbackground-repeatno-re

19、peatrepeat-xrepeat-y.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确CSS引用.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确3 在HTML中使用CSS的方法3.1 行内式 正文内容1 正文内容2 正文内容3 .在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确3.2 内嵌式 p color:#0000FF;text-decoration:underline;font-weight:bold;f

20、ont-size:25px;这是第1行正文内容 .在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确3.3 链接式 页面标题 CSS标题 这是正文内容 CSS标题 这是正文内容 .在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确02-08.css文件 h2 color:#0000FF;p color:#FF0000;text-decoration:underline;font-weight:bold;font-size:15px;.在整堂课的教学中，刘教师总是让学生带着问题来学

21、习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 四、DIV+CSS盒子模型(思想2).在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 “盒子盒子”与与“模型模型”的概念探究的概念探究4.1长度单位长度单位4.2边框边框4.3设置内边距设置内边距4.4设置外边距设置外边距4.5盒子之间的关系盒子之间的关系4.6盒子在标准流中的定位原则盒子在标准流中的定位原则4.7.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确4.1“盒子”与“模型”图图4.1 画框示意图画

22、框示意图.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确盒子思想所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容大。换句话说，可以通过调整盒子的边框和距离等参数，来调节盒子的位置和大小。一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两方面来理解。一是理解一个孤立的盒子的内部结构；二是理解多个盒子之间的相互关系。.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确研究什么独立的盒子相关的性质在

23、普通情况下盒子的排列关系多个盒子之间的关系-浮动和定位图图4.2 盒子模型盒子模型.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确4.2 长度单位相对类型px:根据显示器分辨率多少而表示不同的长度em:以font-size属性为参考的长度。如没有，按默认字体大小。绝对类型in(英寸)、cm(厘米)、mm(毫米)、pt(点数)、pc(印刷单位).在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确4.3 边框图图4.3 border图图4.4 padding示意图示意图Margi

24、n示示意意图图.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确边框border内距padding间距margin名称名称属性值属性值borderborder2px green dashedBorder-colorBorder-colorRed green两个属性Border-widthBorder-width1px 2px 3px三个属性Border-styleBorder-styledotted dashed solid double四个属性Border-left(righttopbottom)-colorBorder-left(

25、righttopbottom)-colorredBorder-left(righttopbottom)-widthBorder-left(righttopbottom)-width1pxBorder-left(righttopbottom)-styleBorder-left(righttopbottom)-styledottedpaddingpaddingpxPadding-left(righttopbottom)Padding-left(righttopbottom)1pxmarginmarginpxmargin-left(righttopbottom)-colormargin-left(r

26、ighttopbottom)-color1px.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确不同个属性意思属性个数属性个数含义含义两个属性前者表示上下边框的属性，后者表示左右边框的属性三个属性前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性。四个属性依次表示上、右、下、左边框的属性，即顺时针排序.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确后面要用到的浮动和定位属性浮动属性浮动属性值值floatLeftright定位属性定位属性值值leftpx

27、rightpxtoppxbottompx.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确自我分析一个实例.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确#outerBoxwidth:200px;height:100px;border:2px black solid;border-left:4px green dashed;border-color:red gray orange blue;/*上 右 下 左*/border-right-color:purple;.在整堂课

28、的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确4.4 盒子之间的关系1 HTML与DOM“树”的概念图图4.5 家谱示意图家谱示意图.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确2DOM树(Document Object Model)文档对象模型图图4.6 打开新窗口打开新窗口.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确今日推荐七星瓢虫图案4件套，采用超柔和进口面料，手感极其柔软，舒适。缩水率以及退色率均符合国家

29、检测标准，绿色环保。30度以下水温洗衣机弱洗，中性洗涤剂，中温熨烫。.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确今日推荐七星瓢虫图案4件套，采用超柔和进口面料，手感极其柔软，舒适。缩水率以及退色率均符合国家检测标准，绿色环保。30度以下水温洗衣机弱洗，中性洗涤剂，中温熨烫。标准文档流.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确图图4.7 DOM树与页面布局的对应关系树与页面布局的对应关系pbodyh2aimgpbodyh2h2pimgap.在整堂课的教学中，刘教师

30、总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确产品分类0-1岁玩具2-3岁玩具4-6岁玩具0-1岁服装.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确产品分类0-1岁玩具2-3岁玩具4-6岁玩具0-1岁服装标准文档流.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确bodyliullililiaaaabodyullilililiaaaa图图4.8 DOM树与页面布局的对应关系树与页面布局的对应关系.在整堂课的教学中，刘教师总是让学生带着

31、问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确4.4.3 标准文档流“标准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。1块级元素（block level）li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。因此，这类元素称为“块级元素”（block level），即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。.在整堂课的教学中，

32、刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确标准文档流2行内元素（inline）对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”（inline）。比如标记，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。再比如，最常用的标记，也是一个行内元素。.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确换个角度看网页.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提

33、出的问题也很明确标准文档流结构.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确表现.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确divdivdivdivdivdivdivdivdiv盒子思想的表现.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确4.5 标记与标记（造盒思想）.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 div与span的区别di

34、v标记不同行：span标记同一行：.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 图图4.9 与与标记的区别标记的区别.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确4.6 盒子在标准流中的定位原则4.6.1 行内元素之间的水平margin图图4.10 行内元素之间的行内元素之间的margin.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确4.6 盒子在标准流中的定位原则4.6.2 块级元素之间的竖直marg

35、in如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图4.20所示。这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。图图4.11 块块元元素素之之间间的的margin.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确4.6 盒子在标准流中的定位原则4.6.3 嵌套盒子之间的margin除了上面提到的行内元素间隔和块级元素间隔这两种

36、关系外，还有一种位置关系，它的margin值对CSS排版也有重要的作用，这就是父子关系。当一个块包含在另一个块中时，便形成了典型的父子关系。其中子块的margin将以父块的内容为参考，如图4.22所示。图图4.12 父父子子块块的的margin.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确4.7 margin属性可以设置为负值上面提及margin的时候，它的值都是正数。当margin设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。图图4.13 父父子子块块设设置置margin为为负负数数.在整堂课的教学中，刘

37、教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 五、盒子的浮动与定位.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 盒子的浮动盒子的浮动5.1盒子的定位盒子的定位5.2.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确divdivdivdivdivdivdivdivdiv盒子思想的表现.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确div标准流-盒子思想的表现divdi

38、vdivdivdivdivdivdiv.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确原因如果仅仅按照标准流的方式进行排版，就只能按照仅有的几种可能性进行排版，限制太大。为了灵活地实现各种形式的排版要求。CSS引入float和position这两个重要属性的应用。.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确5.1 盒子的浮动在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。使用“浮动”方式后，块级元素的表现

39、就会有所不同。CSS中有一个float属性，默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定。.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确思考下面代码.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确Box-1Box-2Box-3这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围

40、的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确Box-1Box-2Box-3这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字，这里是浮动框外围的文字.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 5.1.

41、3 设置第1个浮动的div图图5.1 设置第设置第1个个div浮动时的效果浮动时的效果.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确5.1.3 设置第2个浮动的div图图5.2 设置前两个设置前两个div浮动时的效果浮动时的效果.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确.son1float:left;/*这里设置son1的浮动方式*/.son2float:left;/*这里设置son1的浮动方式*/.son3/*这里设置son1的浮动方式*/.在整堂课的教学中，刘

42、教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确5.1.4 设置第3个浮动的div图图5.3 设置第设置第3个个div浮动时的效果浮动时的效果.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确5.1.5 改变浮动的方向 图图5.4 改变浮动方向后的效果改变浮动方向后的效果 .在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确5.1.6 再次改变浮动的方向图图5.5 交换交换div位置时的效果位置时的效果.在整堂课的教学中，刘教师总是让学生

43、带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确5.1.8 使用clear属性清除浮动的影响 图图5.5 设置浮动后文字环绕的效果设置浮动后文字环绕的效果.father pborder:1px dashed#111111;background-color:#ff90ba;.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确Clear:left清除左浮动的影响.father pborder:1px dashed#111111;background-color:#ff90ba;clear:left;图图5.6 清除

44、浮动对左侧影响后的效果清除浮动对左侧影响后的效果.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确Clear:right清除右浮动的影响图图5.7 清除浮动对右侧影响后的效果清除浮动对右侧影响后的效果.father pborder:1px dashed#111111;background-color:#ff90ba;clear:right;.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确重新思考.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，

45、由浅入深，所提出的问题也很明确.mainContentfloat:left;width:540px;.sideBarfloat:right;width:186px;margin-right:10px;margin-top:20px;mainContentsideBarmainContentsideBar.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确再细节思考这个页面DIV布局.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确.在整堂课的教学中，刘教师总是让学生带着问题来学

46、习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确5.2 盒子的定位广义的“定位”：要将某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定位的问题。狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词翻译为中文也是定位的意思。然而要使用CSS进行定位操作并不仅仅通过这个属性来实现，因此不要把二者混淆。首先，对position属性的使用方法做一个概述，后面再具体举例子说明。position属性可以设置为以下4个属性值之一。.在整堂课的教学中，刘教师总是让学生带着

47、问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确盒子的定位static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。relative：称为相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确盒子的定位absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子

48、的定位没有影响，其他的盒子就好像这个盒子不存在一样。fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确5.2.1 静态定位图图5.8 没有设置没有设置position属性时的状态属性时的状态.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确5.2.2 相对定位1一个子块的情况 图图5.9 一个一个div设置为相对定定位后的效果设置为相对定定位后的

49、效果 .在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 图图5.10 以右侧和下侧为基准设置相对定定位以右侧和下侧为基准设置相对定定位.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确2两个子块的情况 图图5.11 设置为相对定位前的效果设置为相对定位前的效果.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 图图5.12 两个兄弟两个兄弟div的情况下，的情况下，其中一个设置为相对定位后的效果其中一个设置为相对定

50、位后的效果.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确两条关于“相对定位”的定位原则使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置。使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。.在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确 图图5.13 两个兄弟两个兄弟div都设置为相对定位后的效果都设置为相对定位后的效果 .在整堂课的教学中，刘教师总是让学生带着问题来学习，而问题的设置具有一定的梯度，由浅入深，所提出的问题也很明确