任务三　图片卡制作

任务三　图片卡制作

任务要求

（1）新建文件1603.html。

（2）设置宽高800*300，背景为天蓝色，圆角20px并带有盒子阴影的大盒子，居中。

（3）标题设为白色，字号40px，字符间距10px。

（4）三个图片span盒子为150*150，每个设置不用的边框线和背景图（铺满整个盒子），其外边距设置为上下25px，左右50px。

（5）设置鼠标经过图片盒子时，盒子变成圆形，加过渡效果（transition：all 1s；）。效果如图16.3.1所示，CSS样式代码如图16.3.2所示，HTML代码如图16.3.3所示。

图16.3.1　图片卡制作效果

图16.3.2　实现CSS样式代码

图16.3.3　结构HTML代码

项目总结

本项目主要介绍了盒子模型的组成和盒模型中的常见属性用法。通过练习，读者能学会了网页的基础布局设置。

项目要求