2017 年 11月随笔档案 - NatChen

摘要：一、display:table-cell属性简述二、display:table-cell与大小不固定元素的垂直居中三、display:table-cell与两栏自适应布局四、display:table-cell下的等高布局阅读全文

posted @ 2017-11-27 10:14 NatChen 阅读(191) 评论(0) 推荐(0)

摘要：:after伪类+content 清除浮动的影响 :after伪类+content 让大小不固定图片垂直居中阅读全文

posted @ 2017-11-23 11:52 NatChen 阅读(321) 评论(0) 推荐(0)

摘要：OOCSS样式:一个主class，包含所有的共同规则，然后一个独特的规则使用其他class ... @extend样式:将所有的独特class归为一个，逗号分隔的使用公用属性的class列表。 ... 长(肿胀)样式：所有的公共样式都分离到独一无二的class中。 ... 测试结果类(class) 阅读全文

posted @ 2017-11-21 14:33 NatChen 阅读(125) 评论(0) 推荐(0)

data属性(The Data Attribute)

摘要：HTML片段检索自定义属性的价值此属性还可以用在CSS中，例如下面这个有些傻里傻气的CSS文字改变的例子：阅读全文

posted @ 2017-11-20 16:31 NatChen 阅读(371) 评论(0) 推荐(0)

正则表达式pattern属性

摘要：你发现自己多久匆匆编写一些正则表达式验证一个特定的文本。多亏了新的pattern属性，我们可以在标签处直接插入一个正则表达式。如果你熟悉正则表达式，那么应该清楚[A-Za-z]{4,10}表示接受4-10位不区分大小写的英文字母。如果浏览器支持pattern属性，则提交表单时，如果文本框中的内阅读全文

posted @ 2017-11-20 16:13 NatChen 阅读(832) 评论(0) 推荐(0)

Local Storage

摘要：HTML代码：<ul id="edit" contenteditable="true"> <li>修改我吧，然后刷新页面看看，^_^</li> </ul>JS代码：var edit = document.getElementById("edit"); edit.onblur = function() 阅读全文

posted @ 2017-11-20 15:15 NatChen 阅读(159) 评论(0) 推荐(0)

js实现简单拖拽效果

摘要：方法如下: var params = { left: 0, top: 0, currentX: 0, currentY: 0, flag: false }; var getCss = function(o,key){ return o.currentStyle? o.currentStyle[key 阅读全文

posted @ 2017-11-09 15:13 NatChen 阅读(254) 评论(0) 推荐(0)

这么多前端优化点你都记得住吗？

摘要：围绕前端的性能多如牛毛，涉及到方方面面，以我我们将围绕 PC 浏览器和移动端浏览器的优化策略进行罗列注意，是罗列不是展开，遇到不会不懂的点还请站外扩展开车速度有点快，坐稳了。 tips : 这么多前端优化点你都记得住吗？反正我是收藏起来备查的。 PC 浏览器前端优化策略 PC 端优化的策略很多，阅读全文

posted @ 2017-11-09 11:08 NatChen 阅读(624) 评论(0) 推荐(0)

CSS3图片倒影技术实现及原理

摘要：目前为止我们已经探讨了很多CSS3中的新功能和新特征。除了上面这些，实际上还有很多CSS新属性并未包含进CSS3官方标准中，像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(Vendor Prefix)来实现很多自定义的CSS功能。-webkit-box-reflect属性就是以谷歌浏览器为阅读全文

posted @ 2017-11-08 14:23 NatChen 阅读(1198) 评论(0) 推荐(1)

8个纯CSS3制作的动画应用及源码

摘要：对于一个复杂的图形或者动画来说，之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法，然而随着CSS3标准的不断成熟，我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效。本文主要是分享了8个纯CSS3制作的动画应用，提供源代码下载。 1、纯CSS3实现发光开关切换按钮阅读全文

posted @ 2017-11-08 10:38 NatChen 阅读(2367) 评论(0) 推荐(1)

CSS float清除浮动

摘要：解决高度塌陷的问题 – 清除浮动 CSS中有个讨论较多的话题就是如何清除浮动，清除浮动其实就一个目的，就是解决高度塌陷的问题。为什么会高度塌陷？什么时候会高度塌陷？塌陷原因是：元素含有浮动属性 – 破坏inline box – 破坏line box高度 – 没有高度 – 塌陷。什么时候会塌陷：当标签阅读全文

posted @ 2017-11-07 16:52 NatChen 阅读(210) 评论(0) 推荐(0)

NatChen

Once you have chosen the road of life, you have to be brave enough to go to the end and never look back.

NatChen

11 2017 档案

公告