第12讲综合运用网页布局知识.ppt

3.2.2 Padding填充距属性 Padding：padding-top、padding-right、padding-bottom、padding-left，内边距指文本边框与文本之间的距离，顺序依次是上、右、下、左 3.2.3 border边框属性 3.2.4 Float浮动属性 float 属性定义元素浮动到左侧或右侧。 在 CSS 中，任何元素都可以浮动，浮动元素会生成一个块级元素。 元素对象设置了float属性之后，将不再独自占据一行，浮动块可以向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。 float值： Left 和Right ：分别浮动元素到各自的方向 None (默认的) ：使元素不浮动 Inherit ：将会从父级元素获取float值 3.2.5 Clear清除属性 设定是否允许浮动元素之存在，一般和float配合使用； Clear取值： clear:left;清除左浮动 clear:right;清除右浮动 clear:none;左右都可以有浮动 clear:both;左右都不可以有浮动 3.2.6 Display显示属性 控制对象的形状或类型以及是否显示 取值： block：对象被指定为块元素，作为一个新段落，换行显示 none：不显示 inline：对象以内嵌方式显示在当前段落，不换行 list-item：对象以列表形式显示，换行 实验任务1：DIV+CSS基础练习 实验任务2：DIV+CSS基础练习 实验任务3：DIV+CSS基础练习 实验任务3：DIV+CSS基础练习 实验任务3：DIV+CSS基础练习 3.2.7 位置 位置属性就是指定元素的位置，它是CSS-P（Cascading Style Sheets Positioning）中的内容，CSS-P是CSS的一个扩展，它可用来控制任何网页元素在游览器文档窗口中的位置。 position static：静态，默认值 relative：相对定位，需要通过top、bottom、left、right配合 absolute：绝对定位，将对象元素定位在页面任意位置，以浏览器左上角的距离为参照物 left right top bottom z-index position: absolute; visibility: visible; z-index: 5; overflow: scroll; clip: rect(1px 2px 3px 4px); left: auto; top: 5px; right: 5px; bottom: 5px; height: 400px; width: 600px; 课 堂 小 结 本课堂主要介绍了CSS样式的创建与应用，通过CSS样式的使用，使得网页样式更加丰富多彩。 1．CSS的概念： CSS样式、样式的分类、CSS的语法结构等。 2．CSS样式的创建 3．CSS样式的应用 学习情境5综合运用网页布局知识 主讲教师:张劲勇 教学部门：计算机工程系 课程大纲 1 2 3 传统布局与CSS布局 XHTML与CSS基础 4 CSS网页布局与定位 实例：三栏居中式布局 1.1.1 传统Table布局 传统Table布局方式只是利用了HTML的table元素所具有的零边框特性 因此，Table布局的核心是： 设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格使用透明gif图片实现，最终的结构是一个复杂的表格（有时候会出现多次嵌套），显然，这样不利于设计和修改。 1.1.2 传统Table布局示意图 1.1.3 Table布局的缺点 设计复杂，改版时工作量巨大 表现代码与内容混合，可读性差 不利于数据调用分析 网页文件量大，浏览器解析速度慢 2.2.0 Web标准的构成（选） 表现：用于对已经被结构化的信息进行显示上的修饰，包括版式颜色大小等.. 主要技术就是CSS 行为：是指对整个文档内部的一个模型进行定义及交互行为的编写 主要技术有：DOM(文档对象模型)、ECMAScript(JavaScript脚本语言) 结构：用来对网页中的信息进行整理与分类， 常用的技术有：HTML、XHTML、XML 1.2.1 Web标准布局 基于Web标准的网站设计的核心目的： 如何使网页的表现与内容分离！ 这样做的好处： 高效率的开发与简单维护 信息跨平台的可用性 降低服务器成本；加快网页解析速度 更良好的用户体验 那么，CSS2.0从真正意义实现了设计代码与内容分离 1.2.2 DIV+CSS布局示意图 真正的表现与内容完全分离，代码可读性强，样式可重复应