在线课堂 第十七季 天猫商城品牌墙 详细文档

在此处键入HTML5实战 天猫商城品牌墙（第十七季）讲师：许井龙 目录一、课程视频及源码1二、HTML5简介3三、知识要求4四、开发及运行环境4五、项目编码4六、程序代码5一、课程视频及源码尚硅谷官方网站 首页（）点击“免费在线课”，显示“直播课堂”点击“查看详情”，显示当前正在进行的公开课。（课程结束后，可以下载）二、HTML5简介HTML5与HTML4的区别超文本标记语言（HTML）的第五次重大修改，提供了很多特效。例如过渡动画，2D,3D变形， 渐变、阴影等，让我减少对Flash和PS的依赖。提供标准的布局模型，让布局不在复杂。提供与手机交互的API，同时网页性能也得到了极大提升，其H5的网页应用可以与原生的APP相抗衡。目前比较流行的微信小程序，也是基于H5开发的。应用场景面向高版本浏览器及移动端设备。京东，天猫，百度等商业网站都在使用HTML5，CSS3特效。就业形式上海、广州、深圳、北京一线城市缺口较大，杭州、南京、武汉、重庆、天津、济南、沈阳、大连、等二线城市出现需求增长趋势。薪资水平尚硅谷第三期毕业班，平局薪资13000/月。 如何保证学生毕业后可以拿到高薪水，尚硅谷教学部定期与小米、京东、滴滴、阿里一线开发工程师进行技术交流，不断对课程跟新、迭代，确保学生学到的知识，是企业最需要的技术与经验。三、知识要求该课程需要学员有一定的HTML基础。例如， HTML4中的基本元素使用、浮动、定位、伪类选择器。 HTML5中的2D，3D变形、过渡、圆角，透明色。 基本的JavaScript的DOM操作。四、开发及运行环境开发：Webstorm 11.0.3运行：Chrome 54 （请使用不低于54版本的Chrome）五、项目编码项目及相关目录资源序号目录或文件文件内容1iconWall项目名称2iconWall/img/*网页所需全部图片3iconWall/css/index.css网页的CSS样式文件4iconWall/js/index.js网页的JavaScript脚本文件5iconWall/index.html网页的html文件六、程序代码 1. 实现24格子平铺效果1) 创建一个, 包含24（即格子）2) 清除的默认样式。例如序号符号，内边距。3) 父元素宽度背景色 #f0f0f0 - 浅灰色4) 父元素宽度 = 121px*6 +1px*6 = 732px5) 父元素居中显示6) 父元素与子元素左内边距，上内边距保持1px的间隙。7) 每个宽121px, 高108px。8) 每个格子保持1px的间距9) 每行显示6个格子。HTML代码 !-需要24个,考虑篇幅问题，此处只写一个-CSS代码#iconWall /*清除ul的默认样式*/ list-style: none; padding: 0; padding-top: 1px; padding-left: 1px; /*清除ul的默认样式 - END*/ width: 732px; background-color: #f0f0f0; /*防止引子元素浮动，引起父元素高度塌陷*/ overflow: hidden; /*父元素居中显示， 所有固定宽度宽元素居中的通用样式*/ margin: 0 auto;#iconWallli width: 121px; height: 108px; /*通过让子元素浮动，设置父元素固定的宽度，实现每行显示6个格子*/ float: left; /*设置间隙*/ margin-right: 1px; margin-bottom: 1px;2. 3D图片旋转/切换效果1) 每个格子（）中，编写一个 ，与等宽，等高。2) 开启 .img-3d 3D空间，并设置白色背景。3) 在. img-3d中，添加,.a) 备注：.img-back 表示3D空间中背面的图标，.img-front 表示3D空间中正面的图标4) 设置.img-back , .img-front与等宽，等高。5) 设置.img-back, .img-front 相对于 .img-3d 开启绝对定位，left:0; top:0;6) 分别为.img-back, .img-front 添加两个图标(img)，并让图片在垂直，水平方向方向居中7) 设置.img-back 沿Y轴旋转1808) 填满所有的li元素HTML代码 CSS样式.img-3d position: relative; /*开启 .img-3d 的 3D空间*/ transform-style: preserve-3d;.img-3d, .img-back, .img-front /*与li等宽，等高*/ width: 121px; height: 108px;.img-back, .img-front position: absolute; left: 0; top: 0; /*让图片在水平方向居中*/ text-align: center; /*让图片垂直方向居中 - 1. 设置父元素的高度与行高一致*/ line-height: 108px;.img-backimg, .img-frontimg /*让图片垂直方向居中 - 2. 设置父元素的子元素 vertical-align: middle*/ vertical-align: middle;.img-back transform: rotateY(180deg);3. 点击“换一批”，实现商品图标旋转效果。说明：换一批是24个格子的最后一个需求：1. 为最后一个格子添加属性 id=”btnRefresh，设置文本居中。背景色白色，过渡样式300ms2. 添加一个3. 设置. iconRefresh 宽度28px, 高度28px，左外边距46px, 上外边距27px, 背景图使用refresh.png4. 当鼠标悬浮在# btnRefresh时，. iconRefresh的背景图使用refresh-white.png5. 添加一个换一批 6. 当鼠标悬浮在# btnRefresh 背景色立即显示 #DD2727，字体颜色为白色，当鼠标离开时“缓慢”回复之前的样式。7. 每点击# btnRefresh一次，设置300毫秒过渡时间, 让iconRefresh沿着Z轴旋转360度，8. 每点击# btnRefresh一次 设置.img-3d沿着Y轴旋转180deg.9. 其他旋转规则a) 第一行的第一个元素立即旋转，后面的元素依次延迟100msb) 第二行的第一个元素延迟100ms，后面的元素依次延迟100msc) 第三行的第一个元素延迟200ms，后面的元素依次延迟100msd) 第四行的第一个元素延迟300ms，后面的元素依次延迟100msHTML代码 换一批CSS样式#btnRefresh text-align: center; background-color: #fff; transition: .3s linear;#btnRefresh .iconRefresh width: 28px; height: 28px; background: url(./img/refresh.png) no-repeat; margin-left: 46px; margin-top: 27px;#btnRefresh:hover .iconRefresh background: url(./img/refresh-white.png) no-repeat;#btnRefresh:hover transition: 0s; background: #DD2727; color: #fff; JS代码window.onload = function () /记录单击次数 var clickTimes = 1; /总列数 var lineCount = 6; var btnRefresh = document.querySelector(#btnRefresh); var iconRefresh = document.querySelector(.iconRefresh); var img3DList = document.querySelectorAll(.img-3d); var len = img3DList.length; btnRefresh.onclick = function() iconRefresh.style.transition = .3s linear; iconRefresh.style.transform = rotate(+360*clickTimes+deg); for (var i = 0; i len; i+) var colNum = i%lineCount; var rowNum = parseInt(i/lineCount) ; var delayTime = (colNum+rowNum)*100; img3DListi.style.transition = .3s +delayTime+ms linear; img3DListi.style.transform = rotateY(+180*clickTimes+deg); clickTimes+; 4. 实现半透明遮罩效果a) 在每个中除，最后一个增减一个b) 设置.mask 宽度 121px, 高度108px宽 c) 设置.mask其背景色 rgba(0, 0, 0, 7);d) 设置.mask 绝对定位 position: absolute; top: 0; left: 0; 同时设置li position: relative;e) .mask 添加 心形图标 ，f) 设置心形图标，右侧浮动，设置上，右外边距为8px g) .mask 添加 关注人数 323.5万h) 设置文本居中，字体大小12px，颜色白色，距离顶部外边距40pxi) .mask 添加 点击进入j) 设置为块级元素，宽70px, 高度16px，圆角8px，背景红色，字体白色，文本居中，取消下划线，距离左侧外边距24pxk) 仅当鼠标悬浮在li才“缓慢显示”。显示过程为300msHTML代码 关注人数 323.4万 点击进入CSS样式/*四、浮层效果*/.mask width: 121px; height: 108px; background-color: rgba(0, 0, 0, .7); position: absolute; top: 0; left: 0; opacity: 0;/*仅当鼠标悬浮在li才“缓慢显示”。*/li:hover .mask transition: .3s linear; opacity: 1;/*心形图标*/.mask img float: right; margin-top: 8px; margin-right: 8px;.mask p text-align: ce