第五章网页布局中央广播电视大学出版社精选.ppt

第五章 网页布局 5.1web标准化布局概述 5.2创建符合web标准化布局的网页结构 5.3CSS的浮动布局 5.4CSS的定位布局 5.1web标准化布局概述 WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构、表现和行为,对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS 1.加载网页快 2.对搜索引擎优好 5.2创建符合web标准化布局的网页结构 5.2.1 根据语意选择正确的标签 5.2.2 CSS语义化布局 5.2.3 CSS盒模型 5.2.4 web标准化布局的类型 5.2.1 根据语意选择正确的标签 1.div 分隔 层 2.span 范围 3.ol 排序列表 4.ul不排序列表 5.li列表项目 5.2.2 CSS语义化布局 1.左边放置导航 left-bar 右边放置导航right-content 2.左侧命名 sidebar 右侧命名main 5.2.3 CSS盒模型 盒模型主要定义 内容，内补丁，边框，外补丁 5.2.4 web标准化布局的类型 1.自然布局 2.浮动布局 3.定位布局 5.3CSS的浮动布局 5.3.1 浮动布局概述 5.3.2 常见的3列布局形式 层 diV 制作6种不同的不同的形式 1 2 3 3 2 1 1 3 2 3 1 2 2 1 3 2 3 1 5.3.1 浮动布局概述 Float属性包含3个值：left 浮向左 Right浮向右侧 None 禁止浮动 5.3.2 常见的3列布局形式 1.顺序为???的3列布局 2.顺序为???的3列布局 3.顺序为???的3列布局 4.顺序为???的3列布局 5.顺序为???的3列布局 6.顺序为???的3列布局 5.4CSS的定位布局 5.4.1 定位布局概述 5.4.2 静态定位 5.4.3 绝对定位 5.4.4 相对定位 5.4.1 定位布局概述 CSS所提供的possition属性是精确布局的核心和关键，中文为“位置”，该属性的功能就是用来确定元素的位置的。 5.4.2 静态定位 5.4.4 绝对定位 5.4.4 相对定位