Web前端开发项目教程 课件 5.1.4任务实现-创作图片展、画像展、图片边框

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">间隔条</div><divclass="area">

地域版块主体内容</div><divclass="hd">间隔条</div>版块之内：<divclass="area">

<divclass="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">更多>></div></a>

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

新建页面及样式表文件单独写与在已有页面中修改某段代码会因为页面其他位置的元素或样式的影响有所不同，注意前后的关联。“纸上得来终觉浅，绝知此事要躬行。”看的再多，听