-
这里使用:before和:after伪类来实现两个圈，是一个很好的技巧，可以减少页面的html标签数量。查看全部
-
box-shadow 可参考 http://www.w3school.com.cn/cssref/pr_box-shadow.asp查看全部
-
opcity:.5 点5又是个什么东东？因为如果值是零点几,就是不到1的小数 前面的0可以省略,直接从点开始写，这么写好像可以少写一个0，少写一个文件的体积就会小点，我一直这么认为，哈哈哈查看全部
-
刚才说的高是用vh做单位，这里怎么就变成了vw呢，因为宽和高是一样的，所以就用了相同的单位查看全部
-
demo查看全部
-
课程内容查看全部
-
top:-3.4% 为什么，可能是因为让图片上移一点，不然会出现下移的现象，（可是我觉得这个好像没有必要，老师的这个width: 45vw;和height: 71.2vh;量的有不太对，我对老师切好的图量了一下width: 45.15625vw ; height: 68.838028vh;值是多少并不是太重要，主要是宽高比对应不上，所以背景图上并不能完全铺满，所以上面会有一点是没有背景图的，就会出现下移的情况），font-size: 3.506rem; 又是怎么来的呢，老师说是量的，其实是量后计算的。值应该是35.06pt(为什么是pt，psd上我见到的字体单位一般都是pt,我又经常认为pt和px近使相等，这是我个人理解，大家可以去查下资料)，然后换算成rem 前面说过是除以10，就得到了3.506rem；rem 相关知识可参考 http://www.w3cplus.com/css3/define-font-size-with-css3-rem 。box-sizing: border-box;box-sizing又是个什么东西，可参考http://www.w3school.com.cn/cssref/pr_box-sizing.asp查看全部
-
backgroung-size相关知识可参考 http://www.w3school.com.cn/cssref/pr_background-size.asp查看全部
-
绝对定位会使块状元素的默认100%的宽度变成0，所以需要手动设置一下查看全部
-
html5中，html和body也是块状元素，所以高度默认为0，所以需要设置height:100%来让它撑满屏幕查看全部
-
这个 top为什么会是 3vh呢？我们量音乐图标顶部到页面最上面的距离是35px , 而页面的高度是1136px (测量psd宽度为640*1136)；(35/1136) * 100 大概就是3 ；right为什么是4呢，量音乐图标右部到页面最右面的距离是26px，页面的宽度是640px，所以 (26/640)*100 大概就是4 ；为什么有时除1136 有时除 640，如果是水平距离，比喻宽、left、right 就需要相对于页面的宽来计算，就是除以640，单位是vm; 如果是垂直距离，比喻高、top、bottom 就需要相对于页面的高来计算，就是除以1136，单位是vh; 为什么我前面都说大概呢？因为我没有设计图，就是基于做好的页面来量的，可能会有一点误差。查看全部
-
这里出现第一个新的单位 vw ,关于单位的介绍可以参看 http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/ ;这个1.5625 = （10/640）*100 ，这个10是怎么来的呢，为了开发方便大家都喜欢把根字体设为10px，因为这样的话1rem就等于10px，而我们在量设计图时得到的单位是px,所以我们在转成rem时直接除以10就可以，计算非常方便。这个640是一般的设计图都是640px宽的，这个值可以根据设计图的实际大小来调整。为什么要乘以100呢，因为要换算到vm的单位。查看全部
-
页面的结构层一定要清晰，不要有多余的标签，一些效果不需要用标签来实现的就尽量不要用标签的去实现。查看全部
-
这里用一个div的伪类来实现3个表现层，确实是很好的方法，可以少写两个标签，也使得页面结构更简洁。查看全部
-
老师用的是sublime的编辑器，里面用到了很多的快捷输入，基本都是用到了 emmet插件的功能，emmet的插件安装方式 可参考 http://blog.csdn.net/mengwuyoulin/article/details/43056733查看全部
举报
0/150
提交
取消