CSS布局和美化.ppt

第7章 CSS布局与美化 赵 锋 frashman@ Teaching Objectives 通过本章学习，应该掌握以下内容： 理解CSS定位及Div布局理念 理解CSS盒模型理论 掌握DIV+CSS常见布局设计技巧 利用CSS美化网页元素 7.1 CSS定位与DIV布局 CSS布局采用Div来定位，通过Div的margin（边界）、padding（填充）、border（边框）等属性来控制板块的间距 7.1.1 创建DIV标签 7.1.2 Float浮动属性 7.1.3 Position定位属性 DIV标签 Div（division）是一个区块容器标签，即div与/div之间相当于是一个容器，可以容纳段落、标题、图像、动画等各种HTML元素 Div标签是整个CSS布局的最基本技术 在代码中通过CSS对div块的控制，完成了一个宽400px、高200px、背景色为#CCFFFF的区块，并对文字效果进行了相应的设置，在IE中的浏览效果如图7-1所示 【7_1.html】 注意：DOCTYPE声明、名字空间声明及定义语言编码的相关代码在教材以后的代码中做了省略处理 在Dreamweaver中使用【属性】面板设置Div标签的属性 在实际应用过程中，Div在有些地方的确不如表格方便 ，主要是布局思维方式与传统表格布局不一样 如所有辅助图片一般都用背景来实现 float浮动属性 作为块级元素，div在水平方向上会自动伸展，直到包含它的元素的边界；而在垂直方向上和其他同级元素一次排列，并能并排，但在使用float浮动属性后，块级元素的表现就会有所不同 float浮动属性值可以设置为left、right及默认值none 如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧，同时默认情况下，元素的宽度不再伸展，而是收缩，根据其内容决定宽度 【图7-2】 Div1左浮动、Div2左浮动 【图7-3】 Div1左浮动、Div2默认值 *以上设置IE7以上有效 Clear清除浮动 浮动是一种非常先进的布局技术，能改变页面中对象的前后流动顺序。在CSS中，包括div在内的所有元素都可以以浮动方式进行显示 clear（清除）属性用于清除上一个元素的float设置对下一个元素的浮动影响，取值可以为“clear:left” 、“clear:right” 及“clear:both” 【图7-4】两侧均受影响 【图7-5】清除左侧影响 【图7-6】清除两侧影响 position定位属性 position从字面意思上看就是指定块的位置，它用于定位一个元素是否absolute（绝对）、relative（相对）、static（静态）或者fixed（固定） 配合position属性使用的，还有top、right、bottom、left这4个CSS属性值，分别表示块元素距离页面或父元素边框（position取值为absolute时）的距离，或各个边界离原来位置（position取值为relative时）的距离 这4个属性只有当position属性设置为absolute或则relative时才能生效 Absolute Relative absolute（绝对定位） 绝对定位使块元素从HTML标准流中分离出来，并把它送到一个完全属于自己的定位中。使用绝对定位的Div元素前面的或者后面的元素会认为Div并不存在，丝毫不影响它们的布局 在IE浏览器中，仅仅只有top和left两个位置发挥了作用，如果设置了bottom和right值，可能会导致冲突需要进行调整 探讨以下情况的显示效果（基于IE7） Div1不设置、 Div2absolute Div1absolute、 Div2不设置 Div1absolute、 Div2absolute Div2嵌套于Div1中， Div1不设置、 Div2absolute Absolute Relative relative（相对定位） 当将块的position属性设置为relative时，与设置为absolute完全不同，这时子块是相对于其父块来偏移定位的，偏移的方向及幅度由top、right、bottom、left属性联合指定 探讨以下情况的显示效果（基于IE7） Div1 relative 、 Div2不设置 Div1 relative 、 Div2 relative Div2嵌套于Div1中， Div1 relative 、 Div2absolute 7.2 盒模型理论 盒模型（Box Model）是从CSS诞生之时便产生的一个概念，是关系到设计中布局排版和定位的关键问题。任何一个选择符都遵循盒模型规范 所谓“盒模型”，就是把每个HTML元素看作一个装了东西的盒子