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

课程名称 WEB前端开发（1） 课次 45 任务、项目、课题名称 化妆品公司网站设计与制作 课时 2学时 教学内容 创建网页，搭建页面结构，添加页面元素和内容 设置网页中各元素的CSS样式 教学目标 能够创建网页，搭建页面结构，添加页面元素和内容 能够设置网页中各元素的CSS样式 教学重点 创建网页，搭建页面结构，添加页面元素和内容 设置网页中各元素的CSS样式 教学难点 设置网页中各元素的CSS样式 教学活动及主要环节 新授： 一、制作雅粉挚爱心愿榜单部分 （1）分析效果图 该部分内容分为标题和产品两部分。 （2）搭建结构 继续在“index.html”的代码窗口，输入如下代码： !-- new begin -- div class=new header 雅粉挚爱心愿榜单 /header p补水保湿 提亮肤色 低敏配方 收缩毛孔 滋养容颜/p ul li hgroup h2美丽源于多重修护/h2 h2对抗岁月小棕瓶/h2 h2/h2 h2/h2 /hgroup /li li hgroup h2冷萃亮肤真鲜活/h2 h2全部红石榴系列/h2 h2/h2 h2/h2 /hgroup /li li hgroup h2彩妆魅力新时代/h2 h2无暇底妆实力派/h2 h2/h2 h2/h2 /hgroup /li /ul /div !-- new end -- 上述代码中，header元素用于添加标题，产品部分用无序列表构造，hgroup元素内为产品内容介绍。 （3）添加样式 切换到index.css文件，继续添加如下样式表代码： /* new */ .new { width: 100%; height: 530px; background: #fff; } .new header { width: 385px; height: 95px; line-height: 95px; background: #E6E6E6; border-radius: 48px;/*设置圆角效果*/ margin: 70px auto 0; box-sizing: border-box; text-align: center; font-size: 36px; font-weight: bold; color: #5355BB; text-shadow: 3px 3px 3px #ccc;/*设置文字阴影效果*/ } .new p { margin-top: 10px; text-align: center; color: #db0067; } .new ul { margin: 70px auto 0; width: 960px; } .new ul li { width: 266px; height: 250px; border: 1px solid #ccc; background: url(../images/pic1.png) 0 0 no-repeat; float: left; margin-right: 8%; margin-bottom: 40px; position: relative; overflow: hidden; /*溢出内容不显示，也就是产品介绍的文字不显示*/ } .new ul li:nth-child(2) { /*设置第二个li元素的背景图像*/ background-image: url(../images/pic2.png); } .new ul li:nth-child(3) { /*设置第三个li元素的背景图像*/ margin-right: 0; background-image: url(../images/pic3.png); } .new ul li hgroup { position: absolute; left: 0; top: 250px;/*产品介绍内容不显示*/ width: 266px; height: 250px; background: rgba(0,0,0,0.5);/*半透明效果*/ transition: all 0.5s ease-in 0s; /*设置过渡效果*/ } .new ul li:hover hgroup {/*鼠标移动到产品上时显示文字内容*/ positi