Web前端开发项目教程
主讲人：卞孝丽
课程导论
项目5 美化传统文化网
任务 创作画像展及图片边框
任务 添加创意渐变色与多重图像背景
目录
任务 创作画像展及图片边框
【任务效果图】
【任务效果图】
★ 认识盒子模型
★ 盒子的外边距与内边
距
★ 盒子的宽与高
【任务效果图】
★ 盒子的边框
★ 盒子的轮廓
★ 盒子的阴影
内阴影头像 多重内阴影头像
【任务效果图】
★ CSS3新增盒子模型属
性
四角半径参数关系 圆角边框效果
边框图片素材 平铺图片边框效果 拉伸图片边框效果
任务拓展——巧做三角形、优化
展示框
【任务目标】
知识目标
• 理解盒子模型及其构成；掌握使用padding、margin属性设置盒子的内、外边距，
使用width、height属性调整盒子的宽与高，使用border复合属性设置盒子的边框，
使用box-shadow属性添加阴影的方法；掌握CSS3新增盒子模型属性，包括使用rgba
颜色模式及opacity属性等多种设置透明效果的方法、圆角属性及边框图像属性。
能力目标
• 能够应用盒子模型的各种规律和特征控制页面元素的显示、布局排版网站页面；
• 提升观察和判断能力，会使用盒子属性美化页面元素、制作常见的盒子模型效果。
素质目标
• 培养耐心细致、精益求精的品质；
• 提升网页制作中的空间感以及创新意识。
【任务效果图】
三角形图片
i{
border: 10px solid transparent;
border-bottom-color: #fff;
display: block;
width: 0;
height: 0px;
margin: -10px auto 0;
}
用代码实现三角形
优化滚动图框，去除抖动现象。
分析：
div
p
im
g
im
g
im
g
im
g
im
g
im
g
div
im
g
im
g
im
g
im
g
im
g
im
g
【任务小结】
加深对边框、背景色、透明色、边距的理解，灵活运
用，肯定能创作出更有意思的效果。
“没有做不到，只有想不到。”技术方法总是有限的，多
学习一定能掌握更多，而想象的空间一旦打开足可以发展
为无限的可能。让我们插上想象的翅膀，自由飞翔在Web开
发的世界里吧！
谢 谢 大 家
