课程主题 使用边框边距属性美化网页-网页客户端技术 课程-1728968199795.pptx

;使用边框、边距属性美化网页;内边距属性;语法说明：

长度包括长度值和长度单位；

百分比是相对上级元素宽度的百分比，不允许使用负数；

padding复合属性的取值方法，可参照设置边框样式border-style属性的取值方法。

例如，以下代码第1行设置表格单元格的下内边距为2厘米，第2行设置表格单元格的下内边距为列高的10%，第3行设置类名为test2的表格单元格的上下边距0.5厘米，左右边距2.5厘米。

td{padding-bottom:2cm}

td{padding-bottom:10%}

td.test2{padding:0.5cm2.5cm};外边距属性;语法说明：

长度包括长度值和长度单位；

百分比是相对上级元素宽度的百分比，允许使用负数；

auto为自动提取边距值，默认值；

margin复合属性的取值方法，可参照设置边框样式border-style属性的取值方法。

例如，以下代码第1行设置了段落的左外边距为20像素，第2行设置了类名为margin的段落的上外边距为2厘米，右外边距为4厘米，下外边距为3厘米，左外边距为4厘米。

p{margin-left:20px;}

p.margin{margin:2cm4cm3cm4cm};例2-7使用CSS的边距属性美化网页

!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd

htmlxmlns=/1999/xhtml

head

title使用CSS的边距属性美化网页/title

styletype=text/css

#all{width:1004px;overflow:hidden;margin:0pxauto;}

body{background-image:url(images/beijing.jpg);background-attachment:fixed;font-size:12px;}

#banner{border:1pxsolid#00FF00;height:40px;padding:20px;}

#content{border:1pxsolid#FF0000;height:200px;padding:20px;margin-top:10px;}

#bottom{border:1pxsolid#96b9ff;height:56px;width:1002px;padding-top:10px;margin-top:10px;};/style

/head

body

!--页面所有内容--

divid=all

divid=banner

banner--可以设计标题图像或动画

/div

divid=content

content--使用CSS的边距属性美化网页

/div

!--下方版权所有块--

divid=bottom

divstyle=padding-top:4px;width:260px;margin:0pxauto;

divstyle=width:240px;height:30px;

版权所有-世界大学城

/div/div/div!--endbottom--/div!--endall--

/body

/html;例2-7知识点小结

本示例通过DIV+CSS设计网页布局，其中margin、padding属性的使用能让网页的各元素之间有一定间距，使得页面更加美观；

margin:0pxauto;属性能让网页的内容在页面中居中。;任务4小结

盒子模型包括的属性：border（边框）、padding（内边距）和margin（外边距），每个属性又有4个方向的具体属性：left、top、right、bottom；

边框属性（border）：边框样式、边框宽度、边框颜色、边框属性（同时设置边框样式/边框宽度/边框颜色）；

内边距属性（padding）：padding、padding-left、padding-top、padding-right、padding-bottom；

外边距属性（margin）：margin、margin-