HTML CSS网页布局与定位

1、CSS网页布局与定位网页布局与定位本PPT由曾乐设计，使用需征得许可。理解表现和结构分离1掌握如何使用DIV2掌握如何使用盒子模型34CONTENTS掌握如何使用浮动定位本PPT由曾乐设计，使用需征得许可。 理解表现和结构分离理解表现和结构分离01本PPT由曾乐设计，使用需征得许可。 如何优化网页 内容 结构 表现本PPT由曾乐设计，使用需征得许可。本PPT由曾乐设计，使用需征得许可。什么是Div？本PPT由曾乐设计，使用需征得许可。DIV介绍Html标签：Div标签中可以直接放入文本，也可以放入其他的标签，也可以多个Div标签进行嵌套使用。Div的使用形式：内容区域姓名 性别年龄本PPT由曾

2、乐设计，使用需征得许可。DIV+CSS本PPT由曾乐设计，使用需征得许可。DIV网页布局 制作网页前我们需要对网页整体结构做一个版块的划分，制作网页前我们需要对网页整体结构做一个版块的划分，版块划分的合理性很大程度上决定了网页布局的复杂程度。版块划分的合理性很大程度上决定了网页布局的复杂程度。如：如： 分析：整个图片分为以下几个部分分析：整个图片分为以下几个部分 顶部：包括顶部：包括Logo和一个背景图片和一个背景图片 导航栏导航栏 内容部分分为侧边栏和主体内容内容部分分为侧边栏和主体内容 底部页脚包括一些版权信息底部页脚包括一些版权信息头部头部导航菜单导航菜单内容区域内容区域侧边栏侧边栏底部

3、底部本PPT由曾乐设计，使用需征得许可。常见网页DIV布局本PPT由曾乐设计，使用需征得许可。常见网页DIV布局本PPT由曾乐设计，使用需征得许可。常见网页DIV布局本PPT由曾乐设计，使用需征得许可。掌握如何使用盒子模型掌握如何使用盒子模型本PPT由曾乐设计，使用需征得许可。理解盒子模型 盒子模型是CSS的核心概念之一，它指定元素如何显示以及如何相互交互。页面中所有元素都可以看成一个盒子，占据着一定的页面空间。一个页面就是由很多这样的盒子组成，这些盒子之间会互相影响，共同构成复杂的页面效果。在在CSS中，一个独立的盒子中，一个独立的盒子（DIV）模型由）模型由 margin（外边距）、（外边

4、距）、border（边框）、（边框）、padding（内边距）、（内边距）、content（内容）（内容）4个部分组个部分组成。如图：成。如图：本PPT由曾乐设计，使用需征得许可。本PPT由曾乐设计，使用需征得许可。理解盒子模型- MARGIN Margin(外边距)：指边框以外留的空白（相对所在的容器）。例如： margin:50px; 等于 margin 50px 50px 50px 50px； CSS margin CSS margin 属性属性 p p margin:50px; margin:50px; border:thick solid green; border:thick so

5、lid green; 定义了段落的边外补白为定义了段落的边外补白为50px,margin:50px;50px,margin:50px;所以段落之间会有所以段落之间会有50px50px的的间隔间隔. . 我是接下来的第二段我是接下来的第二段 本PPT由曾乐设计，使用需征得许可。理解盒子模型- BORDERp border: medium double greenSome text本PPT由曾乐设计，使用需征得许可。理解盒子模型- PADDING CSS padding 属性示例 p padding:50px; border:thick solid green; 定义了段落的边内补白为50px,p

6、adding:50px;所以内容与边框间会有50px的间隔. 本PPT由曾乐设计，使用需征得许可。掌握如何使用浮动定位掌握如何使用浮动定位本PPT由曾乐设计，使用需征得许可。浮动布局我们利用float属性实现了定位，实际上当你把它用到标签上时，浮动就是变成一个强大网页布局工具。基于浮动的布局利用了float属性来并排定位元素，我们只需要设定一个宽度，将元素设为左浮动和右浮动就可以了。CSS允许如果元素浮动float，不论是图片，段落还是列表。无论先前元素是什么状态，浮动后都成为块级元素。浮动元素的宽度默认为auto。本PPT由曾乐设计，使用需征得许可。两列的浮动布局（示例）本PPT由曾乐设计，

7、使用需征得许可。清除浮动本PPT由曾乐设计，使用需征得许可。理解表现和结构分离本PPT由曾乐设计，使用需征得许可。结构（DIV）与表现（CSS）的分离 所有所有HTML和和XHTML页面都由页面都由内容结构表现这几方面组成。这几方面组成。本PPT由曾乐设计，使用需征得许可。结构（DIV）与表现（CSS）的分离 内容层：是页面实际要传达的真正信息，包含数据、文档或者图片等内容层：是页面实际要传达的真正信息，包含数据、文档或者图片等。注意着里强调的。注意着里强调的“真正信息真正信息”是指纯粹的数据信息本身。是指纯粹的数据信息本身。 结构层：是由文档中的主体部分，再加上结构化标记。结构层：是由文档中

8、的主体部分，再加上结构化标记。 表现层：是你赋予内容的一种样式，就是文档看起来的样子。表现层：是你赋予内容的一种样式，就是文档看起来的样子。本PPT由曾乐设计，使用需征得许可。CSS+DIV网站设计的优势 首先，CSS的极大优势表现的简洁的代码，对于一个大型网站来说，可以节省大量带宽（速度加快）；而且从所周知，搜索引擎喜欢清洁的代码（其真正意义在于，增加了有效关键词占网页代码的比重），因此使用CSS+DIV的web标准制作的网站具有搜索引擎好的一定优势。 其次，CSS+DIV制作的网站使得网站改版相对简单，很多问题只需要改变CSS而不需要改变程序，从而降低了网站改版的成本。本PPT由曾乐设计，使用需征得许可。三列的浮动布局（示例2）本PPT由曾乐设计，使用需征得许可。总结