HTML CSS网页布局与定位ppt课件 .ppt

CSS网页布局与定位 CONTENTS 掌握如何使用浮动定位 2 理解表现和结构分离 01 3 如何优化网页 内容结构表现 4 5 什么是Div 6 Div介绍 Html标签 Div标签中可以直接放入文本 也可以放入其他的标签 也可以多个Div标签进行嵌套使用 Div的使用形式 内容区域姓名性别年龄 7 DIV CSS Div是XHTML中指定的 专门用于布局设计的容器对象 Div的布局它需要依赖于CSS层叠样式表 8 Div网页布局 制作网页前我们需要对网页整体结构做一个版块的划分 版块划分的合理性很大程度上决定了网页布局的复杂程度 如 分析 整个图片分为以下几个部分顶部 包括Logo和一个背景图片导航栏内容部分分为侧边栏和主体内容底部页脚包括一些版权信息 头部 导航菜单 内容区域 侧边栏 底部 9 常见网页Div布局 10 常见网页Div布局 11 常见网页Div布局 12 掌握如何使用盒子模型 13 理解盒子模型 盒子模型是CSS的核心概念之一 它指定元素如何显示以及如何相互交互 页面中所有元素都可以看成一个盒子 占据着一定的页面空间 一个页面就是由很多这样的盒子组成 这些盒子之间会互相影响 共同构成复杂的页面效果 在CSS中 一个独立的盒子 DIV 模型由margin 外边距 border 边框 padding 内边距 content 内容 4个部分组成 如图 14 15 理解盒子模型 Margin Margin 外边距 指边框以外留的空白 相对所在的容器 例如 margin 50px 等于margin50px50px50px50px CSSmargin属性p margin 50px border thicksolidgreen 定义了段落的边外补白为50px margin 50px 所以段落之间会有50px的间隔 我是接下来的第二段 16 理解盒子模型 Border border简写属性在一个声明设置所有的边框属性 p border mediumdoublegreen Sometext 17 理解盒子模型 Padding 内容与边框之间的空白间隔 示例 padding 50px 等于padding50px50px50px50px CSSpadding属性示例p padding 50px border thicksolidgreen 定义了段落的边内补白为50px padding 50px 所以内容与边框间会有50px的间隔 18 掌握如何使用浮动定位 19 浮动布局 我们利用float属性实现了定位 实际上当你把它用到标签上时 浮动就是变成一个强大网页布局工具 基于浮动的布局利用了float属性来并排定位元素 我们只需要设定一个宽度 将元素设为左浮动和右浮动就可以了 CSS允许如果元素浮动float 不论是图片 段落还是列表 无论先前元素是什么状态 浮动后都成为块级元素 浮动元素的宽度默认为auto 20 两列的浮动布局 示例 将两个DIV块放在另一个DIV块中 分别设置左右浮动实现 21 清除浮动 容器的内容中有浮动 float为left或right 的元素 在这种情况下 容器的高度不能自动伸长以适应内容的高度 使得内容溢出到容器外面而影响 甚至破坏 布局的现象 这个现象叫浮动溢出 为了防止这个现象的出现而进行的CSS处理 就叫CSS清除浮动 clear clear both 22 理解表现和结构分离 23 结构 DIV 与表现 CSS 的分离 所有HTML和XHTML页面都由 这几方面组成 24 结构 DIV 与表现 CSS 的分离 内容层 是页面实际要传达的真正信息 包含数据 文档或者图片等 注意着里强调的 真正信息 是指纯粹的数据信息本身 结构层 是由文档中的主体部分 再加上结构化标记 表现层 是你赋予内容的一种样式 就是文档看起来的样子 25 CSS DIV网站设计的优势 首先 CSS的极大优势表现的简洁的代码 对于一个大型网站来说 可以节省大量带宽 速度加快 而且从所周知 搜索引擎喜欢清洁的代码 其真正意义在于 增加了有效关键词占网页代码的比重 因此使用CSS DIV的web标准制作的网站具有搜索引擎好的一定优势 其次 CSS DIV制作的网站使得网站改版相对简单 很多问题只需要改变CSS而不需要改变程序 从而降低了网站改版的成本 26 三列的浮动布局 示例2 27 总结 网站可以分为内容 表现