12-4化妆品公司网站设计与制作（4）.docVIP

课程名称 WEB前端开发（1） 课次 46 任务、项目、课题名称 化妆品公司网站设计与制作 课时 2学时 教学内容 创建网页，搭建页面结构，添加页面元素和内容 设置网页中各元素的CSS样式 教学目标 能够创建网页，搭建页面结构，添加页面元素和内容 能够设置网页中各元素的CSS样式 教学重点 创建网页，搭建页面结构，添加页面元素和内容 设置网页中各元素的CSS样式 教学难点 设置网页中各元素的CSS样式 教学活动及主要环节 新授： 一、制作我要试妆部分 （1）分析效果图 该部分内容同样也分为标题和产品两部分，与上部分内容类似。不同的是，当鼠标悬停到每个产品时，产品会旋转，显示出产品介绍内容部分。该效果是通过3D转换实现的。 （2）搭建结构 继续在“index.html”的代码窗口，输入如下代码： !-- try begin -- div class=try header 我要试妆 /header p美化容貌 增添自信 突出个性 /p ul li img class=zheng src=images/pic4.png alt= img class=fan src=images/try4.png alt= /li li img class=zheng src=images/pic5.png alt= img class=fan src=images/try5.png alt= /li li img class=zheng src=images/pic6.png alt= img class=fan src=images/try6.png alt= /li /ul /div !-- try end -- 在上面的代码中，header元素用于添加标题，无序列表ul用于定义产品部分，且在li内存储两张图片，一张为产品图，一张为产品介绍图。 （3）添加样式 切换到index.css文件，继续添加如下样式表代码： /* try */ .try { width: 100%; height: 512px; background: #D4EEF0; padding-top: 70px; } .try header { width: 385px; height: 95px; line-height: 95px; text-align: center; background: #E6E6E6; border-radius: 48px;/*设为圆角矩形*/ margin: 0 auto; box-sizing: border-box; font-size: 36px; font-weight: bold; color: #5355BB; text-shadow: 3px 3px 3px #ccc;/*为文字添加阴影*/ } .try p { margin-top: 10px; text-align: center; color: #db0067; } .try ul { margin: 70px auto 0; width: 960px; } .try ul li { /*每个图片的样式*/ width: 291px; height: 251px; float: left; margin-right: 4%; margin-bottom: 40px; position: relative; /*设置相对定位*/ -webkit-perspective: 230px; /*用于指定3D元素的透视效果，当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。Chrome 和 Safari 支持替代的 -webkit-perspective 属性*/ } .try ul li:last-child { margin-right: 0; } .try ul li img { position: absolute;/*采用绝对定位*/ left: 0; top: 0; -webkit-backface-visibility: hidden;/*用于定义元素在不面对屏幕时是否可见*/ transition: all 0.5s ease-in 0s;/*设置旋转的过渡效果*/ } .try ul li img.fan { -webkit-transform: rotateX(-180deg);/*绕X轴逆时针旋转180度，隐藏图片*/ } .try ul li:hover img.fan { -webkit-transform: rotateX(0deg);/*绕X轴逆时针旋转0度，显示图片*/ } .try ul li:ho