5.1.4任务实现——创作图片展、画像展、图片边框.pptxVIP

Web前端开发项目教程主讲人：卞孝丽

1.1课程导论项目5美化传统文化网

任务5.1创作画像展及图片边框 任务5.2添加创意渐变色与多重图像背景目录

任务5.1创作画像展及图片边框

【任务效果图】

【任务效果图】★5.1.1认识盒子模型★5.1.2盒子的外边距与内边距★5.1.3盒子的宽与高

【任务效果图】★5.1.4盒子的边框★5.1.5盒子的轮廓★5.1.6盒子的阴影内阴影头像多重内阴影头像

【任务效果图】★5.1.7CSS3新增盒子模型属性四角半径参数关系圆角边框效果边框图片素材平铺图片边框效果拉伸图片边框效果

任务实现——创作图片展、画像展、图片边框

【任务目标】知识目标?理解盒子模型及其构成；掌握使用padding、margin属性设置盒子的内、外边距，使用width、height属性调整盒子的宽与高，使用border复合属性设置盒子的边框，使用box-shadow属性添加阴影的方法；掌握CSS3新增盒子模型属性，包括使用rgba颜色模式及opacity属性等多种设置透明效果的方法、圆角属性及边框图像属性。能力目标?能够应用盒子模型的各种规律和特征控制页面元素的显示、布局排版网站页面；?提升观察和判断能力，会使用盒子属性美化页面元素、制作常见的盒子模型效果。素质目标?培养耐心细致、精益求精的品质；?提升网页制作中的空间感以及创新意识。

【任务效果图】

【任务效果图】

【任务效果图】

【导学知识】一、版块构成分析1.间隔条（1）颜色条.hd{height:40px;background-color:#E3D1A9;}（2）图案条.hd{height:40px;background-image:url(../images/minzubj.jpg);}minzubj.jpg

【导学知识】一、版块构成分析1.间隔条版块之外：divclass=hd间隔条/divdivclass=area地域版块主体内容/divdivclass=hd间隔条/div版块之内：divclass=areadivclass=hd间隔条/div地域版块主体内容divclass=hd间隔条/div/div版块内/外边距：上外边距divclass=area上内边距地域版块主体内容下内边距/div下外边距

【导学知识】一、版块构成分析2.版块主体背景层divclass=area/div

【导学知识】一、版块构成分析2.版块主体遮罩层divclass=baichang/div

【导学知识】一、版块构成分析2.版块主体展示外框ulclass=mingdi/ul

【导学知识】一、版块构成分析2.版块主体展示图文项liclass=hansan/li

【导学知识】一、版块构成分析2.版块主体更多超链接ahref=#divclass=more更多gt;gt;/div/a

利用同样的边写代码边进行测试的方式，完成民族画像展和图片边框的创作。民族画像可以少加几个，更松散一些。图片边框可以换换图片，更有创意一些。

【任务小结】新建页面及样式表文件单独写与在已有页面中修改某段代码会因为页面其他位置的元素或样式的影响有所不同，注意前后的关联。“纸上得来终觉浅，绝知此事要躬行。”看的再多，听的再多，说的再多，说一千道一万都不如亲自动手实践一遍。不论是讲的天花乱坠、口若悬河，还是通篇大道理的说教灌输，都不影响学有所成，因为最关键的影响因素在于自己有没有动手动脑。

谢谢大家