《《网页设计与制作》第7章课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第七章CSS样式表（三）——布局、定位回顾使用CSS设置背景图像时，通常会同时设置背景图像的（）和（）属性使用font属性设置字体类型、风格、大小、粗细时的顺序是什么？使用（）属性设置列表项目符号。在某一段文本中突出显示某几个字，以粗体、红色、大字号显示，通常使用（）标签。在CSS中，设置文本行高使用（）属性。提问background-repeatbackground-position字体风格→粗细→大小→类型list-style-type或list-stylespanline-height使用盒子模型相关属性实现页面布局掌握普通文档流、

2、浮动、清除和溢出属性的含义本章目标如何控制CSS样式2-1盒子模型网页中的所有元素可以看作一个一个的“盒子”元素内容填充（也称内边距）边框边界（也称外边距）如何控制CSS样式2-2样式控制思路盒内样式修饰盒子位置布局盒子位置布局：确定盒子所在的位置、和其他网页元素的关系盒内样式：设置网页元素的颜色、字体等外观盒子模型是网页布局的基础盒子属性是盒子模型的关键属性为什么需要盒子属性盒子模型平面图盒子模型三维立体图：注意背景色在背景图的下一层盒子属性：margin（外边距/边界）border（边框）padding（内边距/填充）各属性又分为四个

3、方向什么是盒子属性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;margin：0p

4、xauto;margin-left:1px;分别代表什么含义？水平居中border属性border-colorborder-widthborder-styleborder边框border-topborder-rightborder-bottomborder-leftborderborder-left…修饰属性四个方向缩写形式border-style:none;border:1pxredsolid;border-right:5pxbluedotted;分别代表什么含义？边框文本框边框空白间隙padding属性paddingpadding-t

5、oppadding-rightpadding-bottompadding-leftpadding内边距padding-left:5px;padding:5px10px20px40pxpadding:5px10px分别代表什么含义？四个边可以一次设置，也可以分别设置padding内边距body,ul,li{padding:0px;margin:0px;}元素的实际占位（实际宽、高）元素实际占位的高度=height属性+上下填充高度+上下边框高度元素实际占位的宽度=width属性+左右填充宽度+左右边框宽度元素的宽高及实际占位height:4

6、0pxborder-width-top:20pxmargin-top:10px左图图片的实际的高度是多少？padding-top:5px标准文档流组成块级元素（blocklevel）

…

、

、

、列表内联元素（inline）、、、...标准文档流内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立经验display属性控制元素的显示和隐藏块级元素与行级元素的转变如何实现注册页面的布局？使用盒子属性实现DIV+CSS布局2-1main：主体部分footer：底

7、部部分header：顶部实现步骤1、分析页面的分块结构，形成HTML组织结构使用盒子属性实现DIV+CSS布局2-1演示示例：3行布局为了控制整个页面的居中，添加一个大容器：containermain：主体部分footer：底部部分header：顶部实现步骤2、编写每个DIV块的CSS控制定位使用盒子属性实现DIV+CSS布局2-2#container:980px、居中#header：136px;、背景色#ccc#main：400px;、背景色#fff#footer：100px;、背景色#ccc演示示例5：实现页面布局为什么需要float

8、浮动属性演示示例：中间两块使用float解决如何解决中间两块布局无法同行显示的问题？如何实现为希望的布局？什么是float浮动属性4-1脱离常规文档流而表现为向右或向左浮动默认的常规文档流：页

当前文档最多预览五页，下载文档查看全文

侵权申诉 举报

此文档下载收益归作者所有

下载文档

当前文档最多预览五页，下载文档查看全文

点击下载本文档