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