网页设计12-背景

1、授课人：何蕴婷 EMAIL： CSSCSS样式（样式（7 7） -设置网页的背景设置网页的背景 内部培训资料,不作任何宣传用途 1、通过实训项目熟练掌握运用css设置网页的 背景。 内部培训资料,不作任何宣传用途 css对设置网页的背景的综合运用 内部培训资料,不作任何宣传用途 实践项目实践项目1：用：用CSS设置网页的背景设置网页的背景 内部培训资料,不作任何宣传用途 课堂实践课堂实践 1.（1）新建页面，搭建页面框架）新建页面，搭建页面框架 内部培训资料,不作任何宣传用途 课堂实践课堂实践 1.（2）在正文中添加文本和图像）在正文中添加文本和图像 World Word 春 季，地球的北半球

2、开始倾向太阳，受到越来越多的太阳光直射，因 而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许 多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离 开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将春季称为 “万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。 对农民来说，春季是播种许多农作物的季节。在春季，地球的北半 球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪 消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏 醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。许 多动物

3、在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。 style=float:right; （3）设置图文混排的效果）设置图文混排的效果 内部培训资料,不作任何宣传用途 课堂实践课堂实践 2. 设置背景颜色、首字放大等设置背景颜色、首字放大等 内部培训资料,不作任何宣传用途 课堂实践课堂实践 !- body background-color:#5b8a00; /* 设置页面背景颜色 */ margin:0px; padding:0px; color:#c4f762;/* 设置页面文字颜色 */ background-image:url(bg1.jpg);/* 背景图片 */ 3. (1)

4、设置页面的背景图像设置页面的背景图像 (2)设置背景图像垂直方向重复设置背景图像垂直方向重复 background-repeat:repeat-y;/* 垂直方向重复 */ 内部培训资料,不作任何宣传用途 课堂实践课堂实践 #content /* 正文文字的属性 */ background:url(bg11.jpg); /* 背景图片 */ /* 背景不重复 */ /* 背景位置 固定左下*/ （3）设置正文行块的背景图像（参考）设置正文行块的背景图像（参考P159-161） 内部培训资料,不作任何宣传用途 课堂实践课堂实践 #content /* 正文文字的属性 */ background:

5、url(bg11.jpg); /* 背景图片 */ /* 背景不重复 */ /* 背景位置 固定左下*/ （4）设置背景图像位置固定（参考）设置背景图像位置固定（参考P163） 内部培训资料,不作任何宣传用途 课堂实践课堂实践 #title /* 正文文字的属性 */ background:url(s_logo.gif); /* 背景图片 */ background-repeat: /* 背景不重复 */ background-position:; /* 背景位置 居中*/ 5. 设置图像替换标题设置图像替换标题 (1) 设置标题的背景图像设置标题的背景图像 内部培训资料,不作任何宣传用途 课

6、堂实践课堂实践 span/* 首字放大 */ display:none; 5. 设置图像替换标题设置图像替换标题 (2)隐藏文字隐藏文字 (3)仔细观察，隐藏文字后出现什么问题了，如仔细观察，隐藏文字后出现什么问题了，如 何使首字重新显示出来？何使首字重新显示出来？ 内部培训资料,不作任何宣传用途 实践项目实践项目2：用：用CSS设置滑动门效果设置滑动门效果 内部培训资料,不作任何宣传用途 课堂实践课堂实践 1：设置网页宽：设置网页宽窄标题的窄标题的 背景，如何让宽标题的背背景，如何让宽标题的背 景花纹出现两端呢？景花纹出现两端呢？ !- h3 font-size:18px; padding-

7、left:40px; background:url(leftbg.jpg); line-height:21px; .wide width:280px; .narrow width:170px; 我宽些 我窄些 内部培训资料,不作任何宣传用途 课堂实践课堂实践 h3 font-size:13px; padding-left:80px; background:url(leftbg.jpg); background-repeat:no-repeat; line-height:21px; span display:block; padding-right:30px; background:url(leftbg.jpg); background-repeat:no-repeat; background-position:right; .wide width:180px; .narrow width:80px; 内部培训资料,不作任何宣传用途 课后作业课后作业 1. 1. 参照课本参照课本P155-162P155-16