HTMLCSS网页布局与定位.ppt

《HTMLCSS网页布局与定位.ppt》由会员分享，可在线阅读，更多相关《HTMLCSS网页布局与定位.ppt（29页珍藏版）》请在三一办公上搜索。

1、CSS网页布局与定位,CONTENTS,掌握如何使用浮动定位,理解表现和结构分离,01,如何优化网页,内容结构表现,什么是Div？,Div介绍,Html标签：Div标签中可以直接放入文本，也可以放入其他的标签，也可以多个Div标签进行嵌套使用。Div的使用形式：内容区域姓名 性别年龄,DIV+CSS,Div是XHTML中指定的，专门用于布局设计的容器对象。Div的布局它需要依赖于CSS层叠样式表。,Div网页布局,制作网页前我们需要对网页整体结构做一个版块的划分，版块划分的合理性很大程度上决定了网页布局的复杂程度。如：,分析：整个图片分为以下几个部分顶部：包括Logo和一个背景图片导航栏内容部

2、分分为侧边栏和主体内容底部页脚包括一些版权信息,头部,导航菜单,内容区域,侧边栏,底部,常见网页Div布局,常见网页Div布局,常见网页Div布局,掌握如何使用盒子模型,理解盒子模型,盒子模型是CSS的核心概念之一，它指定元素如何显示以及如何相互交互。页面中所有元素都可以看成一个盒子，占据着一定的页面空间。一个页面就是由很多这样的盒子组成，这些盒子之间会互相影响，共同构成复杂的页面效果。,在CSS中，一个独立的盒子（DIV）模型由 margin（外边距）、border（边框）、padding（内边距）、content（内容）4个部分组成。如图：,理解盒子模型-Margin,Margin(外边距

3、)：指边框以外留的空白（相对所在的容器）。例如：margin:50px;等于 margin 50px 50px 50px 50px；,CSS margin 属性 p margin:50px;border:thick solid green;定义了段落的边外补白为50px,margin:50px;所以段落之间会有50px的间隔.我是接下来的第二段,理解盒子模型-Border,border 简写属性在一个声明设置所有的边框属性。,p border:medium double greenSome text,理解盒子模型-Padding,内容与边框之间的空白间隔。示例：padding:50px;等于p

4、adding 50px 50px 50px 50px；,CSS padding 属性示例 p padding:50px;border:thick solid green;定义了段落的边内补白为50px,padding:50px;所以内容与边框间会有50px的间隔.,掌握如何使用浮动定位,浮动布局,我们利用float属性实现了定位，实际上当你把它用到标签上时，浮动就是变成一个强大网页布局工具。基于浮动的布局利用了float属性来并排定位元素，我们只需要设定一个宽度，将元素设为左浮动和右浮动就可以了。CSS允许如果元素浮动float，不论是图片，段落还是列表。无论先前元素是什么状态，浮动后都成为块

5、级元素。浮动元素的宽度默认为auto。,两列的浮动布局（示例）,将两个DIV块放在另一个DIV块中，分别设置左右浮动实现。,清除浮动,容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。.clearclear:both;,理解表现和结构分离,结构（DIV）与表现（CSS）的分离,所有HTML和XHTML页面都由,这几方面组成。,结构（DIV）与表现（CSS）的分离,内容层：是页面实际要传达的真正信息

6、，包含数据、文档或者图片等。注意着里强调的“真正信息”是指纯粹的数据信息本身。结构层：是由文档中的主体部分，再加上结构化标记。表现层：是你赋予内容的一种样式，就是文档看起来的样子。,CSS+DIV网站设计的优势,首先，CSS的极大优势表现的简洁的代码，对于一个大型网站来说，可以节省大量带宽（速度加快）；而且从所周知，搜索引擎喜欢清洁的代码（其真正意义在于，增加了有效关键词占网页代码的比重），因此使用CSS+DIV的web标准制作的网站具有搜索引擎好的一定优势。其次，CSS+DIV制作的网站使得网站改版相对简单，很多问题只需要改变CSS而不需要改变程序，从而降低了网站改版的成本。,三列的浮动布局（示例2）,总结,网站可以分为内容、表现、结构三部分DIV是Xhtml中指定的，专门用于布局设计的容器对象盒模型主要属性：内容（content）边框距（padding）边界（border）边距（margin）,THANK YOU.,