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

课程名称 WEB前端开发（1） 课次 47 任务、项目、课题名称 化妆品公司网站设计与制作 课时 2学时 教学内容 创建站点创建网页，搭建页面结构，添加页面元素和内容 设置网页中各元素的CSS样式 教学目标 能够创建网页，搭建页面结构，添加页面元素和内容 能够设置网页中各元素的CSS样式 教学重点 创建网页，搭建页面结构，添加页面元素和内容 设置网页中各元素的CSS样式 教学难点 设置网页中各元素的CSS样式 教学活动及主要环节 新授： 一、制作评测中心部分 （1）分析效果图 该部分内容同样也分为标题和评测公司logo两部分。当鼠标悬停到评测公司的logo上时，logo图片会用另一张图片代替当前的图片。而且图片的转换会产生过渡效果。 （2）搭建结构 继续在“index.html”的代码窗口，输入如下代码： !-- text begin -- div class=text header 评测中心 /header p评测 我们更专业 用户更放心/p ul li img class=tu src=images/cp1.jpg alt= img class=tihuan src=images/th1.png alt= /li li img class=tu src=images/cp2.jpg alt= img class=tihuan src=images/th2.png alt= /li li img class=tu src=images/cp3.jpg alt= img class=tihuan src=images/th3.png alt= /li li img class=tu src=images/cp4.jpg alt= img class=tihuan src=images/th4.png alt= /li li img class=tu src=images/cp5.jpg alt= img class=tihuan src=images/th5.png alt= /li li img class=tu src=images/cp6.jpg alt= img class=tihuan src=images/th6.png alt= /li li img class=tu src=images/cp7.jpg alt= img class=tihuan src=images/th7.png alt= /li li img class=tu src=images/cp8.jpg alt= img class=tihuan src=images/th8.png alt= /li /ul /div !-- text end -- 在上面的代码中，header元素用于添加标题，无序列表ul用于定义公司logo部分，且在li内存储两张图片，一张为初始显示的logo图，一张为鼠标悬停到图片上时，变换的logo图片。 （3）添加样式 切换到index.css文件，继续添加如下样式表代码： /* text */ .text { width: 100%; height: 700px; background: #fff; padding-top: 70px; } .text header { width: 385px; height: 95px; line-height: 95px; background: #E6E6E6; border-radius: 48px; margin: 0px auto; box-sizing: border-box; text-align: center; font-size: 36px; font-weight: bold; color: #5355BB; text-shadow: 3px 3px 3px #ccc; } .text p { margin-top: 10px; text-align: center; color: #db0067; } .text ul { margin: 70px auto 0; width: 960px; } .text ul li { width: 195px; height: 195px; border: 3px solid #91e477;/*设置3像素边框*/ border-radius: 50%;/*设置为圆形*/ float: left; margin-right: 5%; margin-bottom: 40px; position: relative;/*采用相对定位*/ } .text ul li img {