CSS + DIV布局.ppt

1、CSS + DIV布局及实例分析,CSS + DIV布局 一、任务分析 前面掌握了CSS的基础知识，下面将学习CSS + DIV布局。 二、相关知识 1. 结构（DIV）与表现（CSS）的分离 所有HTML和XHTML页面都由“内容、结构、表现和行为”这几方面组成。即根据内容设计结构和表现，最后再对其加点“行为”控制。如下图所示。,内容: 是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正信息”，是指纯粹的数据信息本身。 结构: 是由文档中的主体部分，再加上结构化标记。 表现: 是你赋予内容的一种样式，就是文档看起来的样子。 行为: 行为就是对内容的交互及操作效果。 C

2、SS+DIV布局中，CSS作为一种表现而单独存在，它实现了表现与结构的分离。对于网页的修改，可以只对CSS的修改而带来网页样式的变化。,Java/VB脚本,CSS,DIV, 标签定义（from w3cschoool),定义和用法 可定义文档中的分区或节（division/section）。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。 注意：在CSS定义中属于一个行内元素，而是块级元素，我们可能通俗地理解为为大容器，, 是一个块级元素。这意味着它的内容自动地开始一个新行。

3、实际上，换行是 固有的唯一格式表现。可以通过 的 class 或 id 应用额外的样式。 不必为每一个 都加上类或 id，虽然这样做也有一定的好处。 可以对同一个 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。,（1）深入理解CSS盒子模型 盒子模型是CSS的核心概念之一，它指定元素如何显示以及如何相互交互。页面中所有元素都可以看成一个盒子，占据着一定的页面空间。一个页面就是由很多这样的盒子组成,这些盒子之间会互相影响，共同构成复杂的网页效果。 在C

4、SS中，一个独立的盒子（DIV）模型由margin(外边距)、border(边框)、padding(内边距)、content（内容）4个部分组成，如下所示。,内容,内边距,外边距,边框,margin(外边距)：指层边框以外留的空白（相对于所在容器），用于页边距或与其它层之间的间距。如magin:10px 10px 10px 10px分别表示上右下左四个外边距值为10px，如四个外边距一样，可缩写成magin:10px；如上下一样，左右一样，可缩写成magin:10px 5px，表示上下外边距为10px；左右边距为5px；marign是透明元素。在IE中body默认margin是20px。 bo

5、rder(边框)：和margin一样，有上右下左四个边框的值。border:solid 定义边框为实线；border:dotted定义边框为虚线。单独定义某一边可以写成border-left:2px; border-color:#FF0000定义边框为红色。 padding(内边距)：是指层的边框到层的内容之间的空白。和margin一样，分别指定上右下左边框到内容的距离。如果都一样，可以缩写成padding:10px;单独定义左边可以写成padding-left:10px; padding也是透明元素，不能定义颜色。对于td而言padding默认值为1，对其他对象的默认值为0。,/ 72,8,

6、深入理解CSS盒子模型 .box1 border:1px solid #666666; height:50px; background:#CCCC00; margin:30px; .box2 margin:20px 10px 20px -30px; border:1px dotted #ff0000; padding:10px 10px 10px 50px; color:#ffffff; background-color:#000066 盒子box1 盒子box2 ,要将box2放入box1中，标记中的代码修改如下： 这里是盒子模型box1 这里是盒子模型box2 则显示效果如下。,层的特点：

7、透明的胶卷 实例,与table比较,CSSDIV网站设计的优势(prons)首先，CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽（速度加快）；而且众所周知，搜索引擎喜欢清洁的代码（其真正意义在于，增加了有效关键词占网页总代码的比重），因此使用CSSDIV的web标准制作的网站具有搜索引擎友好的一定优势。其次，CSS+DIV制作的网站使得网站改版相对简单，很多问题只需要改变CSS而不需要改动程序，从而降低了网站改版的成本。,CSSDIV网站设计的劣势(cons)第一，CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个l外部文件中，这一个或几个文

8、件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。第二，对于CSS网站设计的浏览器兼容性问题比较突出。基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题，但CSS+DIV设计的网站在IE浏览器里面正常显示的页面，到火狐浏览器（FireFox）中却可能面目全非（这也是为什么建议网络营销人员使用火狐浏览器的原因所在）。CSS+DIV还有待于各个浏览器厂商的进一步支持。,总结,两者没有严格的优劣之分，都有其可取之处 当前的流行做法： 用div做框架做布局，table用来储存数据,/ 72,14,2. 布局的构思 制作网页前我们需要对网

9、页整体的结构做一 个版块的划分，版块划分的合理性很大程度上决 定了网页布局的复杂程度。如右所示：,分析：整个图片分为以下几个部分 顶部：包括logo和一个背景图片 导航栏 内容部分分为侧边栏和主体内容 底部页脚包括一些版权信息,实际布局图如下所示：,3. 块级元素与内联元素 block块状元素：该元素是矩形的，有自己的高度和宽度。默认情况下，在父容器中占据一行，同一行无法容纳其他元素及文本。其他的元素将显示在其下一行，可以看作被块级元素“挤”下去的。块状元素就是一个矩形容器，CSS设置了高度和宽度后，形状无法被改变。 ，等都是块级元素。 in-line内联元素：和块级元素相反，内联元素没有固定

10、形状，也无法设置宽度和高度。内联元素形状由其内容决定，所以在宽度足够的情况下，一行能容纳多个内联元素。 ，等都是内联元素。,块级元素和内联元素之间的转换：用display:inline可将块级元素转换为内联元素；用display:block可将内联元素转换为块级无形素。如下所示：,/ 72,18,4. 让设计居中 不管是table布局, 还是CSS+DIV布局，设计居中总是必须的。随着显示器尺寸越来越大，不居中的网页也被视为布局的错位。table布局中经常使用align=“center”，而CSS+DIV中一般使用自动空白边的方法让设计居中。为此，只需定义box的宽度，然后将水平空白边设为au

11、to，代码如下： #box margin:auto; text-align:right; width:200px; background:#00ff00; abcde ,5. float浮动布局 在前面我们利用float属性实现了定位，实际上当你把它用到标签上时，浮动就变成了一个强大的网页布局工具。基于浮动的布局利用了float属性来并排定位元素，我们只需设定一个宽度，将元素设为左浮动和右浮动就可以了。 CSS允许任何元素浮动float，不论是图像，段落还是列表。无论先前元素是什么状态，浮动后都成为块级元素。浮动元素的宽度默认为auto。 注意： 浮动元素的外边缘不会超过其父元素的内边缘。 浮

12、动元素不会互相重叠。 浮动元素不会上下浮动。 如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块，则它下降到低于先前任何浮动元素的位置（即被顶到下一行）。,6. 两列的浮动布局 将两个DIV块放在另外一个DIV块中，分别设置左右浮动来实现。例如： #container margin: 0px auto; padding: 10px; width: 450px; height: 260px; border: 1px solid #000000; #box1 width: 300px; height: 260px; border: 1px solid #000000; float: lef

13、t; #box2 width: 140px; height: 260px; border: 1px solid #000000; float: right; 这里是box1 这里是box2 ,由此例可以看出，我们将盒子box1和盒子box2分别放在了container容器中。Container容器设置居中显示，box1设置为左浮动，box2设置为右浮动，从而形成了两列的浮动布局。,在基于浮动的布局时，将两列同时朝一个方向进行浮动（比如同时左浮动），然后通过设定内外边距在两列之间形成一个隔离带也是一种布局的方法。但在本例中，列在可用空间内包得很紧,没有喘息的空间，而在实际环境中各种浏览器标准不完

14、全统一，很容易导致某些浏览器中这种严密的布局因为之间没有缝隙而出现错位，迫使一列到另一列的下一行。因此，为了防止发生这种情况，需要避免浮动布局在包含它们的元素中太挤，可以不使用内外边距来建立隔离带，而是将一个元素左浮动，另一元素右浮动。同时要注意左右浮动的对象宽度一定要略小于外围包含它们的容器的宽度。,/ 72,23,#container margin:0px auto; padding:10px; width:470px; height:190px; border:1px solid #000000; #box1 width:300px; height:160px; border:1px s

15、olid #000000; float:left; #box2width:140px; height:160px; border:1px solid #000000; float:right;,#box3 margin-top:10px; width:100%; border:1px solid #000000; height:30px; background:#f9aaaa; 这里是box1 这里是box2 这里是box3 ,以上介绍了两列浮动的布局，下面我们在box1、box2形成两列布局的同时，在下面新增一行box3：,24,上面的代码在IE浏览器下显示是正常的，但在火狐浏览器里就不正常

16、了,如下图所示:,由于box1和box2设置了浮动，Box3将自动上升到容器顶端。解决这个问题只需给box3再加一个清除浮动样式就可以了： #box3 margin-top: 10px; width: 100%; border: 1px solid #000000; height: 30px; background: #f9aaaa; clear: both; ,第1列 第2列 第3列 结果：第三列和第一列在一起,解决方法,第1列 第2列 第3列,7. 三列的浮动布局 三列的浮动布局和二列的浮动布局极为相似，它是将三列其中的两列合为一组放在一个容器内，从而与第三列形成两个div构成左右浮动的效

17、果。如下图所示：,由上图看到，我们将box1和box2先进行了合组，放在了黄色的容器内，黄色块共同与绿色块形成两列的浮动布局，而黄色块内的box1、box2也符合两列的浮动布局方式。此方法也可以衍生到四列或多列的布局方式。, TEST DIV ,在对三列中的两列进行合组时，一般将主内容合在一起，次要内容形成单独一列。实现上图效果的样式代码如下：,#container margin:0px auto; padding:10px; width:360px; height:180px; border:1px solid #000000; #yellow width:230px; height:150

18、px; padding:10px; background:#e4ff00; border:1px solid #000000; float:left; #green width:100px; height:170px; background:#9ff850; border:1px solid #000000; float:right;,#box1 width:100px; height:150px; border:1px solid #000000; background:#ffffff; float:left; #box2 width:100px; height:150px; border:

19、1px solid #000000; background:#ffffff; float:right; box1 box2 box3 ,8. 高度自适应 在布局网页的过程中，经常遇到高度自适应的问题，比如产品的列表、新闻内容等等，因此，掌握一定的高度自适应知识是非常必要的。 单个div高度的自适应 单个div高度自适应比较简单，只要设置单个div高度值就可以了。 二列浮动布局高度的自适应; 在两列浮动布局中，我们通常采用清除浮动clear:both的方法来实现。例如: #container margin:0px auto; width:230px; padding:10px; backgrou

20、nd-color:#CCC; overflow:hidden #box1 margin:0;width:100px; padding:4px; background-color:#F90; color:#FFFFFF; float:left; ,#box2 margin:0;width:100px; background-color:#F90; color:#FFFFFF; float:right; padding:4px; #clearclear:both; height:0px box1 这里是box2,通过清除浮方法来进行高度自适应布局 ,9. CSS网站导航 CSS网站导航的基本写法如

21、下: ul是CSS中使用得很广泛的一种元素，主要用来描述列表型内容。每一个标记的内容为一个列表块，块中的每一条列表数据用标记来描述。 导航也是种列表，CSS导航可以理解为导航列表，每一个列表数据就是导航中的一个导航频道；CSS导航同样可以使用二层嵌套的div来实现，但相对ul列表显得过于复杂。因此，在简单的文字导航中，使用ul就显得更为轻巧灵活。,/ 72,33,例如: 主页 DIV+CSS教程 常用代码 水晶图标 幻灯图片 软件下载 CSS2.0实用手册 当不加任何样式时，显示效果如图所示：,下面将赋予其样式： 为ul定义一个id； 指定li左浮动 float:left; 使其导航频道改变纵

22、向呈横排显示； 使用display:block将a链接对象由内联元素改为块级元素； 赋予其内边距、外边距等属性； 给a链接加上伪类样式：hover 代码如下: #navwidth:780px; #nav ul min-width:780px; #nav li float:left; list-style-type:none; #nav li a color:#ffffff; text-decoration:none; padding-top:4px; width:90px; height:22px; text-align:center; background:#FF0000; margin-l

23、eft:2px; font-size:12px; display:block; #nav li a:hover background-color:#000000; color:#ffffff; font-size:12px; ,/ 72,35, 主页 DIV+CSS教程 常用代码 水晶图标 幻灯图片 软件下载 CSS2.0实用手册 ,10. CSS hack （1）什么是CSS hack 由于不同的浏览器，比如IE6、IE7, Firefox等，对CSS的解析识别不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这时就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不

24、同的浏览器，这个针对不同的浏览器写不同的CSS代码的过程，就叫CSS hack。 （2）CSS hack的原理 由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中优先级的关系，我们就可以据此来针对不同的浏览器编写不同的CSS。 比如IE6能识别下划线_和星号 * ，IE7能识别星号 * ，但不能识别下划线_，而firefox两个都不能识别。例如： div background:orange; *background:green; _background:blue; ,运行后，在IE6中看到是蓝色的，在firefox中看到是橙色的。 再比如针对 * 和 !important： IE6

25、能识别*，但不能识别 !important; IE7能识别*，也能识别!important; FF不能识别*，但能识别!important。 我们可以这样写: div background:orange; background:green !important; *background:blue; 另外，根据浏览器优先级别:FFIE7IE6; 我们书写CSS hack的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。,三、任务实施 【任务场景】张先生的网页设计图已放在素材包内，现在我们需要用CSS+DIV布局方式对该网页进行布局。 【操作环境】Windows XP、Dreamweaver 【操作步骤】 （）分析网页，将网页分区分块； 第一步：分析馨香园茶产品有限公司网站首页，该首页最佳浏览分辨率为1024*768;是一个典型的上中下结构图；因此，可以将网页分为四部分header(页眉部分)、flash(动画部分)、content(内容部