htmlcss网页布局与定位.pptVIP

CSS网页布局与定位 CONTENTS 掌握如何使用浮动定位 理解表现和结构分离 01 如何优化网页 内容 结构 表现 什么是Div？ Div介绍 Html标签：div/div Div标签中可以直接放入文本，也可以放入其他的标签，也可以多个Div标签进行嵌套使用。 Div的使用形式： div id=“main”内容区域/div div id=“head” div姓名/div div 性别/div div年龄/div /div div class =“body”/div /div DIV+CSS Div是XHTML中指定的，专门用于 布局设计的容器对象。Div的布局它需 要依赖于CSS层叠样式表。 Div网页布局 制作网页前我们需要对网页整体结构做一个版块的划分， 版块划分的合理性很大程度上决定了网页布局的复杂程度。 如： 分析：整个图片分为以下几个部分 顶部：包括Logo和一个背景图片 导航栏 内容部分分为侧边栏和主体内容 底部页脚包括一些版权信息 头部 导航菜单 内容区域 侧边栏 底部 常见网页Div布局 常见网页Div布局 常见网页Div布局 掌握如何使用盒子模型 理解盒子模型 盒子模型是CSS的核心概念之一，它指定元素如何显示以及如何相互交互。页面中所有元素都可以看成一个盒子，占据着一定的页面空间。一个页面就是由很多这样的盒子组成，这些盒子之间会互相影响，共同构成复杂的页面效果。 在CSS中，一个独立的盒子（DIV）模型由 margin（外边距）、border（边框）、padding（内边距）、content（内容）4个部分组成。如图： 理解盒子模型- Margin Margin(外边距)：指边框以外留的空白（相对所在的容器）。 例如： margin:50px; 等于 margin 50px 50px 50px 50px；  html head titleCSS margin 属性/title style type=text/css“ p{ margin:50px; border:thick solid green; } /style /head body p定义了段落的边外补白为50px,margin:50px;所以段落之间会有50px的间隔. /p p我是接下来的第二段/p /body /html 理解盒子模型- Border border 简写属性在一个声明设置所有的边框属性。 html head style type=text/css p { border: medium double green } /style /head body pSome text/p /body /html 理解盒子模型- Padding 内容与边框之间的空白间隔。 示例： padding:50px;等于padding 50px 50px 50px 50px； html head titleCSS padding 属性示例/title style type=text/css p{ padding:50px; border:thick solid green; } /style /head body p定义了段落的边内补白为50px,padding:50px;所以内容与边框间会有50px的间隔. /p /body /html 掌握如何使用浮动定位 浮动布局 我们利用float属性实现了定位，实际上当你把它用到div标签上时，浮动就是变成一个强大网页布局工具。基于浮动的布局利用了float属性来并排定位元素，我们只需要设定一个宽度，将元素设为左浮动和右浮动就可以了。 CSS允许如果元素浮动float，不论是图片，段落还是列表。无论先前元素是什么状态，浮动后都成为块级元素。浮动元素的宽度默认为auto。 两列的浮动布局（示例） 将两个DIV块放在另一个DIV块中，分别设置左右浮动实现。 清除浮动 容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。 .clear{clear:both;} 理解表现和结构分离 结构（DIV）与表现（CSS）的分离 所有HTML和XHTML页面都由 这几方面组成。 结