CSS变量带来的提升绝不仅仅是节约点CSS成本，其可以颠覆目前JS组件交互开发的思路，把原来的JS负责的UI层的东西全部转移到了CSS层，组件代码更简洁，视觉表现实现更灵活，本文会举若干例子展示这种提升与变革。
文章关键字 ‘选项卡’
CSS变量对JS交互组件开发带来的提升与变革
2020年07月1日，星期三基于用户行为的图片等资源预加载
2016年06月4日，星期六懒加载和本文要提到的预加载实际是不同的概念。
典型的懒加载，例如本博文章的图片，当用户滚动图片进入窗体的时候，才去加载；或者用户点击选项卡，原本隐藏的图片此时再去加载，这个也称之为懒加载。
而预加载则是，用户还没有行为发生，资源已经加载完毕，从这一定义来讲，我们传统图片啪啪啪全部加载完毕，本质上也是预加载，好处就在于，体验好啊，没有泛白或者菊花的出现。不足也很明显，那就是资源可能白白加载了。
那有什么办法可以把懒加载的省资源省流量和预加载良好体验结合在一起呢？
jQuery powerSwitch万能slide(切换)插件
2013年11月10日，星期日
2013年下半年，鄙人的代码作品之一，名曰“jQuery万能切换插件”。顾名思意，使用了此插件，web页面上的各种切换效果你都可以轻松实现。兼容IE6+，API简洁、设计巧妙。性能优异，使用简单。可谓网页开发制作必备佳品啊！
CSS3 pointer-events:none应用举例及扩展
2011年12月7日，星期三
pointer-events是CSS3中又一冉冉的属性，其支持的值牛毛般多，不过大多都与SVG相关，我们可以不用理会。当下，对于偶们来讲，与SVG划开界线值得一提的就是[none|auto]两个属性值了。其中”auto”的感觉与width属性的”auto”类似，一般在一些特殊场合露一手，平时闺门不出，没什么说头。因此，一轮筛选下来，我们需要留意的只是pointer-events:none而已。
pointer-events:none是个很有意思的东西，某些情况下其精湛的表现会让人两眼发光。
pointer-events:none顾名思意，就是……
与web网页设计师内部交流会内容预分享
2011年07月14日，星期四在我看来，人生中能找到一个合适的搭档是很难很难的，例如舞伴，女朋友，或是web设计师。网上不是流传着这么一句话嘛：不怕神一样的对手，就怕猪一样的队友。
而如女朋友之类一般都是靠自己解决的，具有很好的能动性、选择性。正所谓我选择，我喜欢。但是，对于职业化的web设计师往往都是组织安排的，就像是《潜伏》里组织给余则成安排不可抗拒的翠平这个老婆一样。你没有权力去挑三拣四，所能做的就是不断磨合。指手划脚，怨声载道，到头来啃泥巴的还是自己。
浮生若梦如云，变幻莫测。还期待下赛季表现的姚明也要宣布退役了，对于人员流动频繁的互联网界来说，就更不用说了。数月前，公司高级UI设计师因为某些原因，离职了。加上今年业务扩大，人手不足，接连招了好几个网页设计师，但都是经验尚浅的年轻小姑娘。在最近的几个小项目的配合中，发现这几个新来的设计师有些不给力：不预先做功课（如熟悉现在的网站设计元素、风格、交互等），结果辛辛苦苦做了很多无用功；有些浮夸的效果不仅增加了自己的工作量，我们前端这块也会多折腾，但设计所提升的价值却很有限。
无JavaScript纯CSS实现选项卡轮转切换效果
2010年09月15日，星期三本文内容很简单，但是确实让人开眼界，新奇的技术，无JavaScript实现选项卡轮转切换效果。关键东西是什么呢？就是……看文章内容就知道了。^_^就这些，史无前例，本文无截图，只有一个简单的demo和代码展示。因为就像魔术一样，说穿了其实就是那么回事。
js下拉菜单实现与可访问性问题的一些思考
2010年09月10日，星期五从本文的题目可以看出，内容的重点在于“下拉菜单”“可访问性”，其实前面的“下拉菜单”只是用来示例，“可访问性”才是本文的重点。本文就页面的“可访问性”讲了很多。一如既往，丰富的截图，必要的代码示例，还有UI良好的demo页面。天色已晚，话不多说，总之，应该会对您的学习有所帮助的。
jQuery之addClasas与removeClass使用实例
2009年10月27日，星期二
上图为人人网好友分组功能模块，我用firebug对其高度进行了改动，所以这里显示的高度比实际的低。图示效果源自facebook，结构比较精细，体验上佳，图中的深色表选中状态。
本文就将演示如何使用jQuery的addClasas与removeClass轻松实现上面很赞的样式效果。本文实例效果包括两个主要部分，一是单击单个好友样式的切换，还有一个就是单击“已选”“未选”文字选项卡按钮后的样式的筛选，均使用ddClasas与removeClass实现。
提供完整的css样式以及JavaScript代码，提供demo实例演示页面和源文件下载。希望对您有所帮助。
css margin的相关属性，问题及应用
2009年08月25日，星期二margin为css中非常常用的一个属性，其所包含的内容也是很多的。本文主要分三部分对margin做一些分析叙述，包括其属性，使用过程中会遇到的问题，以及一些高级应用等。
其中属性将着重分享自己记margin各个参数个数位置含义的方法；
margin常见问题部分将讨论margin双倍边距形成的条件以及推荐的解决方法，讨论margin重叠的问题，简单叙述margin不起作用的一些情况；
margin负值的相关应用将讨论页面背景定位的问题，宽度自适应布局，选项卡中的应用，文字与图片对齐等问题。
我的应用
我的应用