任务二　个人网页获奖情况

任务二　个人网页获奖情况

任务要求

（1）打开文件2403.html，另存为2502.html。

（2）在个人相册后版块，添加获奖证书模块，id为book。

制作效果如图25.2.1所示，其CSS样式如图25.2.2所示，HTML结构如图25.2.3所示。

图25.2.1　个人网页获奖证书部分

图25.2.2　个人网页获奖证书CSS样式

图25.2.3　个人网页获奖证书HTML结构

至此个人网站完成布局，现在添加锚点对应到各个版块部分，可以优化CSS样式，作为外链式。

最后把#box设置为display：none，插入js代码，当鼠标点击.wel时，#box，display：block。

项目总结

本项目主要介绍了元素3D空间的旋转和移动，以及旋转正方向的左手法则判定方法。记住要使元素能在网页呈现3D效果，一定要在父元素添加prespective（规定3D透视距离远近）和transform-style：presever-3d；属性。