HTML CSS网页布局与定位
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<body> <p>Some text</p> </body>
</html>
-
本PPT由曾乐设计，使用需征得许可 。
理解盒子模型- Padding
• 内容与边框之间的空白间隔。
示例： padding:50px;等于padding 50px 50px 50px 50px；
<html> <head> <title>CSS padding 属性示例</title> <style type="text/css"> p{ padding:50px; border:thick solid green; } </style> </head> <body> <p>定义了段落的边内补白为
清除浮动
• 容器的内容中有浮动（float为left或right）的元素，在 这种情况下，容器的高度不能自动伸长以适应内容的高度 ，使得内容溢出到容器外面而影响（甚至破坏）布局的现 象。这个现象叫浮动溢出，为了防止这个现象的出现而进 行的CSS处理，就叫CSS清除浮动。
.clear{clear:both;}
-
本PPT由曾乐设计，使用需征得许可 。
理解表现和结构分离
-
本PPT由曾乐设计，使用需征得许可 。
结构（DIV）与表现（CSS）的分离 所有HTML和XHTML页面都由
内容
wenku.baidu.com结构
这几方面组成。
-
表现
本PPT由曾乐设计，使用需征得许可 。
结构（DIV）与表现（CSS）的分离
➢ 内容层：是页面实际要传达的真正信息，包含数据、文档或者图片等 。注意着里强调的“真正信息”是指纯粹的数据信息本身。
50px,padding:50px;所以内容与边框间会有50px的间隔. </p>
</body> </html>
-
本PPT由曾乐设计，使用需征得许可 。
掌握如何使用浮动定位
-
本PPT由曾乐设计，使用需征得许可 。
浮动布局
➢我们利用float属性实现了定位，实际上当你把它用到<div>标签上 时，浮动就是变成一个强大网页布局工具。基于浮动的布局利用了 float属性来并排定位元素，我们只需要设定一个宽度，将元素设为 左浮动和右浮动就可以了。
-
本PPT由曾乐设计，使用需征得许可 。
-
本PPT由曾乐设计，使用需征得许可 。
理解盒子模型- Margin
• Margin(外边距)：指边框以外留的空白（相对所在的容器）。
例如： margin:50px; 等于 margin 50px 50px 50px 50px；
<html> <head> <title>CSS margin 属性</title> <style type="text/css“> p{ margin:50px; border:thick solid green; } </style> </head> <body> <p>定义了段落的边外补白为
➢CSS允许如果元素浮动float，不论是图片，段落还是列表。无论先 前元素是什么状态，浮动后都成为块级元素。浮动元素的宽度默认 为auto。
-
本PPT由曾乐设计，使用需征得许可 。
两列的浮动布局（示例）
• 将两个DIV块放在另一个DIV块中，分别设置左右浮动实现。
-
本PPT由曾乐设计，使用需征得许可 。
DIV+CSS
• Div是XHTML中指定的，专门用于 布局设计的容器对象。Div的布局它需 要依赖于CSS层叠样式表。
-
本PPT由曾乐设计，使用需征得许可 。
Div网页布局
➢ 制作网页前我们需要对网页整体结构做一个版块的划分， 版块划分的合理性很大程度上决定了网页布局的复杂程度。 如：
➢ 分析：整个图片分为以下几个部分 ① 顶部：包括Logo和一个背景图片 ② 导航栏 ③ 内容部分分为侧边栏和主体内容 ④ 底部页脚包括一些版权信息
Div的使用形式： <div id=“main”>内容区域</div> <div id=“head”> <div>姓名</div> <div> 性别</div> <div>年龄</div> </div> <div class =“body”></div> </div>
-
本PPT由曾乐设计，使用需征得许可 。
CSS网页布局与定位
-
本PPT由曾乐设计，使用需征得许可 。
CONTENTS
1 理解表现和结构分离 2 掌握如何使用DIV 3 掌握如何使用盒子模型 4 掌握如何使用浮动定位
-
本PPT由曾乐设计，使用需征得许可 。
01 • 理解表现和结构分离
-
本PPT由曾乐设计，使用需征得许可 。
如何优化网页
50px,margin:50px;所以段落之间会有50px的 间隔. </p>
<p>我是接下来的第二段</p>
</body> </html>
-
本PPT由曾乐设计，使用需征得许可 。
理解盒子模型- Border
• border 简写属性在一个声明设置所有的边框属性。
<html> <head> <style type="text/css"> p { border: medium double green } </style> </head>
导航菜单
内容区域
底部
-
头部 侧边栏
本PPT由曾乐设计，使用需征得许可 。
常见网页Div布局
-
本PPT由曾乐设计，使用需征得许可 。
常见网页Div布局
-
本PPT由曾乐设计，使用需征得许可 。
常见网页Div布局
-
本PPT由曾乐设计，使用需征得许可 。
掌握如何使用盒子模型
-
本PPT由曾乐设计，使用需征得许可 。
• 内容 • 结构 • 表现
-
本PPT由曾乐设计，使用需征得许可 。
-
本PPT由曾乐设计，使用需征得许可 。
什么是Div？
-
本PPT由曾乐设计，使用需征得许可 。
Div介绍
• Html标签：<div></div> Div标签中可以直接放入文本，也可以放入其他的标签，也可以多个Div标签进行嵌套使用。
理解盒子模型
• 盒子模型是CSS的核心概念之一，它指定元素如何显示以及如何相互交互。页面中所 有元素都可以看成一个盒子，占据着一定的页面空间。一个页面就是由很多这样的盒 子组成，这些盒子之间会互相影响，共同构成复杂的页面效果。
在CSS中，一个独立的盒子（ DIV）模型由 margin（外边距）、 border（边框）、 padding（内边距）、 content（内容）4个部分组 成。如图：