《网页设计与制作》第7章课件PPT格式课件下载.ppt
- 文档编号:15553375
- 上传时间:2022-11-04
- 格式:PPT
- 页数:26
- 大小:3.31MB
《网页设计与制作》第7章课件PPT格式课件下载.ppt
《《网页设计与制作》第7章课件PPT格式课件下载.ppt》由会员分享,可在线阅读,更多相关《《网页设计与制作》第7章课件PPT格式课件下载.ppt(26页珍藏版)》请在冰豆网上搜索。
注意背景色在背景图注意背景色在背景图的下一层的下一层盒子属性:
margin(外边距/边界)border(边框)padding(内边距/填充)各属性又分为四个方向什么是盒子属性margin-right右边界右边界margin-left左边界左边界margin-top上边界上边界margin-bottom下边界下边界marginborderpadding可统一设置或四边分开设置margin属性marginmargin-topmargin-rightmargin-bottommargin-leftmargin外边距margin-right右边界右边界margin-left左边界左边界margin-top上边界上边界margin-bottom下边界下边界margin:
1px,2px,3px,4px;
margin:
1px,2px;
0pxauto;
margin-left:
1px;
分别代表什分别代表什么含义?
么含义?
水平居中水平居中border属性border-colorborder-widthborder-styleborder边框border-topborder-rightborder-bottomborder-leftborderborder-left修修饰饰属属性性四四个个方方向向缩缩写写形形式式border-style:
none;
border:
1pxredsolid;
border-right:
5pxbluedotted;
分别代表什么分别代表什么含义?
含义?
边框边框文本框边框文本框边框空白间隙空白间隙padding属性paddingpadding-toppadding-rightpadding-bottompadding-leftpadding内边距padding-left:
5px;
padding:
5px10px20px40pxpadding:
5px10px分别代表什么分别代表什么含义?
四个边可以一四个边可以一次设置,也可次设置,也可以分别设置以分别设置padding内边距内边距body,ul,lipadding:
0px;
margin:
元素的实际占位(实际宽、高)元素实际占位的高度=height属性+上下填充高度+上下边框高度元素实际占位的宽度=width属性+左右填充宽度+左右边框宽度元素的宽高及实际占位height:
40pxborder-width-top:
20pxmargin-top:
10px左图图片的实际的高左图图片的实际的高度是多少?
度是多少?
padding-top:
5px标准文档流组成标准文档流组成块级元素(块级元素(blocklevel)、列表、列表内联元素(内联元素(inline)、.标准文档流内联标签可以包含于块级标签中,成为它的子元素,内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立而反过来则不成立经验经验经验经验display属性控制元素的显示和隐藏块级元素与行级元素的转变值值说明说明block块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符inline内联元素的默认值。
元素会被显示为内联元素,该元素前后没有换行符内联元素的默认值。
元素会被显示为内联元素,该元素前后没有换行符none设置元素不会被显示设置元素不会被显示如何实现注册页面的布局?
如何实现注册页面的布局?
使用盒子属性实现DIV+CSS布局2-1main:
主体部分:
主体部分footer:
底部部分:
底部部分header:
顶部:
顶部实现步骤实现步骤1、分析页面的分块结构,形成、分析页面的分块结构,形成HTML组织结构组织结构使用盒子属性实现DIV+CSS布局2-1演示示例:
演示示例:
3行布局行布局为了控制整个为了控制整个页面的居中,添页面的居中,添加一个大容器:
加一个大容器:
containermain:
顶部实现步骤实现步骤2、编写每个、编写每个DIV块的块的CSS控制定位控制定位使用盒子属性实现DIV+CSS布局2-2#container:
980px、居中、居中#header:
136px;
、背景、背景色色#ccc#main:
400px;
、背景、背景色色#fff#footer:
100px;
、背景、背景色色#ccc演示示例演示示例5:
实现页面布局:
实现页面布局为什么需要float浮动属性演示示例:
中间两块使用演示示例:
中间两块使用float解决解决如何解决中间两块布局无法同行显示的问题?
如何解决中间两块布局无法同行显示的问题?
如何实现为希望如何实现为希望的布局?
的布局?
什么是float浮动属性4-1脱离常规文档流而表现为向右或向左浮动脱离常规文档流而表现为向右或向左浮动默认的常规文档流:
默认的常规文档流:
页面内容从上到下,页面内容从上到下,从左到右排列。
从左到右排列。
DIV块块换行显示换行显示向右浮动,脱离常规向右浮动,脱离常规文档流文档流演示示例:
浮动设置演示示例:
浮动设置什么是float浮动属性4-2浮动的三大显著特征浮动的三大显著特征演示示例:
浮动设置1.DIV块元素失去块元素失去“块状块状”换行显示特征,换行显示特征,变为行内元素变为行内元素什么是float浮动属性4-3浮动的三大显著特征浮动的三大显著特征演示示例:
浮动设置2.紧贴上一个浮动元素(同方向)或父级紧贴上一个浮动元素(同方向)或父级元素的边框,如宽度不够将换行显示元素的边框,如宽度不够将换行显示什么是float浮动属性4-4浮动的三大显著特征浮动的三大显著特征演示示例:
浮动设置3.占据行内元素的空占据行内元素的空间,导致行内元素围间,导致行内元素围绕显示绕显示为什么需要clear区隔属性演示示例:
clear属性属性第第3个个DIV块随窗口块随窗口大小决定是否换行,大小决定是否换行,如希望如希望“强制强制”换行换行怎么办?
怎么办?
如何实现第如何实现第3块换行显示?
块换行显示?
什么是clear清除属性演示示例:
clear属性属性clear作用作用如果前一个元素存在左浮动或右浮动,则换行以区隔如果前一个元素存在左浮动或右浮动,则换行以区隔只对块级元素有效只对块级元素有效clear属性的取值属性的取值rightleftbothnone溢出处理overflow属性属性值属性值说明说明visible默认值。
内容不会被修剪,会呈现在盒子之外默认值。
内容不会被修剪,会呈现在盒子之外hidden内容会被修剪,并且其余内容是不可见的内容会被修剪,并且其余内容是不可见的scroll内容会被修剪,但是浏览器会显示滚动条以便查看其余内容内容会被修剪,但是浏览器会显示滚动条以便查看其余内容auto如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容overflow属性的应用使用overflow扩展盒子高度#fatherborder:
1px#000solid;
width:
500px;
overflow:
hidden;
示例示例示例示例盒子属性有哪些?
各包含哪些属性?
float属性的应用场合?
有哪些取值?
clear属性的应用场合?
overflow属性的应用场合?
总结
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页设计与制作 网页 设计 制作 课件