-
绝对定位会使块状元素的默认100%的宽度变成0，所以需要手动设置一下查看全部
-
这里出现第一个新的单位 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个表现层，确实是很好的方法，可以少写两个标签，也使得页面结构更简洁。查看全部
-
做前端对设计师的设计稿也是有要求的，不同状态下的内容必须按照不同的文件夹分清楚，否则我们在切图时很难控制哪些图层什么时候显示。如果我们发现设计师给过来的psd所有图层都在一个文件内，我们可以在求她重做。查看全部
-
animation-name 规定 @keyframes 动画的名称。 <br> animation-duration 规定动画完成一个周期所花费的秒或毫秒。 <br> animation-timing-function 规定动画的速度曲线。 <br> animation-delay 规定动画何时开始。 <br> animation-iteration-count 规定动画被播放的次数。<br> animation-direction 规定动画是否在下一周期逆向地播放<br> animation-play-state 规定动画是否正在运行或暂停。<br> animation-fill-mode 规定对象动画时间之外的状态。 具体内容参考CSS参考手册：http://www.w3school.com.cn/cssref/index.asp查看全部
-
sublime text 优点：多行操作 分别选择行首缩进的空格和结尾的大括号 使用快捷键alt + F3进行全选 1、设置动画样式：animate:动画名称 时间 linner 结束动作（例：循环）; ps:webkit内核兼容 2、设置动画时间：@keyframes{ transform:角度rotate(360deg) } 以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画的开始时间，100% 动画的结束时间。 transform-rotate 旋转查看全部
-
display：none: 隐藏该标签; display：block:就是将他强行转化为块级元素; 块级元素： 动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子； 行内元素： 自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。 display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别: display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。 visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。查看全部
-
视口控制<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">查看全部
-
overflow:hidden; 防止滚动条的出现，实际作用隐藏溢出查看全部
-
DIV所占区域大小（宽度举例）= 宽（width）+内边距(pading)+边框(border大小)+外边距(margin) box-sizing 默认是content-box，实际width=设置width+边框+间距，而在border-box下，宽度设置好，边框和间距会自动调整宽度，满足设置的值。 语法 box-sizing：content-box | border-box 默认值：content-box 取值 content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding以及margin之和，即 ( Element width = width + border + padding+margin ) 此属性表现为标准模式下的盒模型。 border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )查看全部
-
结构层就好比人的骨骼。同意的请点赞~查看全部
-
demo:一个背景，3页的背景，还有一个音乐图标； Html5是项目的结构层；特效就交给CSS3小哥了，表现层；交互呢，就交给JAVAscript了，翻页；背景音乐嘛，就交给Audio的API了原生的javascript实现翻页效果，放弃前端框架和类库 然后，他们的组合就使项目的优化达到一个比较好的表现查看全部
-
需求： 1、实现背景音乐效果，点击右上角的时候音乐暂停，再点击继续播放 2、右上角音乐暂停和继续播放的动画效果 3、页面切换的动画效果 4、等第三章页面加载好之后，再滑动到第三章页面（ T^T要是直接设置延时加载，弱爆了...）查看全部
-
#page1{ background: url("../img/p1_bg.jpg") center center no-repeat; background-size: 100%; } #page1>.p1_lantern{ width:45vw; height:72vh; font-size: 2.506rem; position: absolute;; top: -3.4%; right: 0; left:0; margin: auto; background: url("../img/p1_lantern")center center no-repeat; background-size: 100%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; } #page1 > .p1_lantern:before{ position: absolute; top:0; right: 0; bottom: 0; left: 0; margin: auto; width: 30vw; height: 30vw; background:#d60b3b; opacity: .5; border-radius: 50%; -webkit-box-shadow:0 0 10vw 10vw #d60b3b; -moz-box-shadow:0 0 10vw 10vw #d60b3b; -ms-box-shadow:0 0 10vw 10vw #d60b3b; -o-box-shadow:0 0 10vw 10vw #d60b3b; box-shadow:0 0 10vw 10vw #d60b3b; }查看全部
举报
0/150
提交
取消