网页设计12-背景.ppt

内部培训资料,不作任何宣传用途 P o w e r B a r 中国专业PPT设计交流论坛 授课人：何蕴婷 EMAIL：jmhyt@126.com 内部培训资料,不作任何宣传用途 内部培训资料,不作任何宣传用途 网页设计与制作（12） CSS样式（7） ----设置网页的背景 知识技能目标 1、通过实训项目熟练掌握运用css设置网页的背景。 实训内容 css对设置网页的背景的综合运用 实践项目1：用CSS设置网页的背景 实训项目 课堂实践 1.（1）新建页面，搭建页面框架 div id title“ div id content 课堂实践 1.（2）在正文中添加文本和图像 div id title World Word img src mainroad.jpg“ 春 div id content 季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。春季气温和生物界的变化对人的心理和生理也有影响。 对农民来说，春季是播种许多农作物的季节。在春季，地球的北半球开始倾向太阳，受到越来越多的太阳光直射，因而气温开始升高。随着冰雪消融，河流水位上涨。春季植物开始发芽生长，许多鲜花开放。冬眠的动物苏醒，许多以卵过冬的动物孵化，鸟类开始迁徙，离开越冬地向繁殖地进发。许多动物在这段时间里发情，因此中国也将春季称为“万物复苏”的季节。 style float:right; （3）设置图文混排的效果 课堂实践 …… !-- body background-color:#5b8a00; /* 设置页面背景颜色 */ margin:0px; padding:0px; color:#c4f762; /* 设置页面文字颜色 */ #content …… /* 正文文字的属性 */ span …… /* 首字放大 */ -- …… 2. 设置背景颜色、首字放大等 课堂实践 …… !-- body background-color:#5b8a00; /* 设置页面背景颜色 */ margin:0px; padding:0px; color:#c4f762; /* 设置页面文字颜色 */ background-image:url bg1.jpg ; /* 背景图片 */ 3. 1 设置页面的背景图像 2 设置背景图像垂直方向重复 background-repeat:repeat-y; /* 垂直方向重复 */ 课堂实践 …… #content …… /* 正文文字的属性 */ background:url bg11.jpg ; /* 背景图片 */ …… /* 背景不重复 */ …… /* 背景位置 固定左下*/ （3）设置正文行块的背景图像（参考P159-161） 课堂实践 …… #content …… /* 正文文字的属性 */ background:url bg11.jpg ; /* 背景图片 */ …… /* 背景不重复 */ …… /* 背景位置 固定左下*/ （4）设置背景图像位置固定（参考P163） 课堂实践 …… #title …… /* 正文文字的属性 */ background:url s_logo.gif ; /* 背景图片 */ background-repeat: …… /* 背景不重复 */ background-position:……; /* 背景位置 居中*/ …… …… 5. 设置图像替换标题 1 设置标题的背景图像 课堂实践 span /* 首字放大 */ …… display:none; 5. 设置图像替换标题 2 隐藏文字 3 仔细观察，隐藏文字后出现什么问题了，如何使首字重新显示出来？ 实践项目2：用CSS设置滑动门效果 实训项目 课堂实践 1：设置网页宽\窄标题的背景，如何让宽标题的背景花纹出现两端呢？ !-- h3 font-size:18px; padding-left:40px; background:url leftbg.jpg ; line-height:21px; .wide width:280px; .narrow width:170px; h3 class wide 我宽些 h3 class narrow 我窄些 课堂实践 h3 font-siz