摘要：项目中用到的一些特殊字符和图标 html代码 <div class="cross"></div> css代码 .cross{ width: 20px; height: 20px; border-radius: 10px; border: 1px solid #DBE6EF; display: inl 阅读全文

摘要：本文属于转载，为尊重原作者的劳动成果，在此标注原文地址，点击此处浏览。 1.rem（font size of the root element）是指相对于根元素的字体大小的单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计 阅读全文

只有注册用户登录后才能阅读该文。

摘要：很早的一篇前端开发资源，今天才看到，里面有各种各样的开源资源，包括HTML5、css3、jQuery、PHP和javascript库等，每个资源都是比较热门的，你可以将它运用到你的项目中，或者可以纯粹的拿来学习，从各位前端大神的作品中成长。这个前端开发资源类似于一个目录，大部分也许你都看过，也许也有... 阅读全文

摘要：做网站的，我们都知道尽量减少请求数，压缩CSS代码量，使用高效CSS选择符等方式可以来提高网站的载入速度和访问速度，也就是优化网站的性能。下面分析了一些CSS的书写方式，很多都是我们知道并且正在使用的，这里记录一下，提醒自己以后写CSS的时候尽量从这些方面出发来使用，对于CSS的性能提升有很大的帮助... 阅读全文

摘要：css常见的快捷开发代码汇总（长期更新），包括CSS3代码，有一些css效果很顽固，经常会一时找不出解决方案，网络上也有很多的工具和高手提供了具体的浏览器兼容代码，这个页面我今后会经常整理，希望能够帮到重构和正在找这些效果的代码，如果你有更好的实现方案，不妨告诉我，或者你有解决不了的，也不妨告诉我。... 阅读全文

摘要：今天闲来无聊，重新来说说CSS3前缀的问题。在春节前和@一丝姐姐说起Sass中有关于gradient的mixins。姐姐说：为什么还要用mixin呢？为什么不使用Autoprefixer？使用Autoprefixer，只需要输入一行代码，编译器帮你做了一切，还纠结个毛mixin。姐姐的一句话让我汗颜... 阅读全文

摘要：一般人不会说出来的移动前端动画技巧，文章来自“TQ的独立博客：玩转HTML5移动页面”，在这篇教程你会发现许多非常有用的动画处理技巧，细心点还会发现许多有用的zepto插件，例如：zepto.onepagescroll.js、zepto-touch.js、weixinshare.js，以下为原文。标... 阅读全文

摘要：因为文章内含有很多sass代码，如需自己动手查看编译结果，推荐使用sassmeister这款在线编译工具，方便你阅读学习。在阅读本文章之前，请先确认你已经阅读了上篇文章sass揭秘之变量，不然会给你带来疑惑的感觉。其实很多人之所以对sass或less感兴趣，就是因为他们能使用变量和这个@mixin功... 阅读全文

摘要：因为文章内含有很多sass代码，如需自己动手查看编译结果，推荐使用sassmeister这款在线编译工具，方便你阅读学习。经过上两篇揭秘，大家心里对sass应该有了很好的认知感了，这篇文章基于前面两篇为基础，请确保你先浏览了前面的两篇文章，不然可能给你带来疑惑感觉。sass揭秘之变量sass揭秘之@... 阅读全文

摘要：因为文章内含有很多sass代码，如需自己动手查看编译结果，推荐使用sassmeister这款在线编译工具，方便你阅读学习。刚开始sass的人，也许其最大的抱怨就是sass的变量了，尤其是那些了解less变量的，更是会说sass的变量做得不如less的变量好，less中有明显的全局变量和局部变量之分，... 阅读全文

摘要：响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。用一句话来说：使用同一套Html代码来适配不同设备和满足不同场景不同用户使用。关键专业术语：Media Query（css3媒介查询）语法结构及用法：@media 设备名 o... 阅读全文

摘要：绝对居中垂直居中水平居中CSS居中代码目录(?)[-]绝对定位居中Absolute Centering技术一容器内Within Container二视区内Within Viewport三边栏 Offsets四响应式自适应Responsive五 溢出情况Overflow六重绘Resizing七图片Im... 阅读全文

摘要：移动端重构系列-mobile本系列文章，如果没有特别说明，兼容安卓4.0.4+原生滚动原生滚动的属性为：-webkit-overflow-scrolling:touch;，如果是走高富帅的苹果路线，是没问题的，谁让这是人家亲生的呢；如果是安卓的话，我真不知道是支持还是不支持，说不支持吧好像有点缓动效... 阅读全文

摘要：移动端重构系列-mobile本系列文章，如果没有特别说明，兼容安卓4.0.4+这里我们把图标分为三种：背景图片，直接绘制，@font-face。如无特殊情况，图标的标签采用i标签背景图片首先我们会选择sprite形式，把所有的图标都放在一个大图中，然后考虑到retina屏，所以我们的图标应该设计为实... 阅读全文

摘要：移动端重构系列-mobile本系列文章，如果没有特别说明，兼容安卓4.0.4+因为后面的几篇文章都需要用到切入切出动画什么的，所以先把这个说下。为了简单起见，我们这里只讨论translate偏移动画（translate比起绝对定位的top/left/right/bottom要高效），而如其他的旋转缩... 阅读全文

摘要：移动端重构系列-mobile本系列文章，如果没有特别说明，兼容安卓4.0.4+之所以把本篇单独拿出来讲解，是因为这些在移动端使用的频率太高了，然后实现方法也不尽相同，而这里主要说下如何用flex和translate来实现。注：代码部分涉及到sass的mixin部分，在sandal的mixin文件中均... 阅读全文

摘要：移动端重构系列-mobile本系列文章，如果没有特别说明，兼容安卓4.0.4+，测试demo基于Normalize.css，根据目前我们大家的使用习惯进行了一些清零及移动端的特点添加一些基础样式。html { font-family: "Helvetica Neue", Helvetica, STH... 阅读全文

摘要：本系列文章，如果没有特别说明，兼容安卓4.0.4+，测试demo移动端和pc端一样整体上布局也可以分为上中下三部分，如图：一般来说,header和footer部分都为fixed定位，中间的内容区域可滚动。fixed布局常规的结构如下： ...因为移动端单页面特性，所以每个pag... 阅读全文

摘要：移动端重构系列-mobile本系列文章，如果没有特别说明，兼容安卓4.0.4+，测试demohtml5文档申明 Documentmeta标签viewport视图窗口，移动端特属的标签。一般使用下面这段代码即可：上面的代码依次表示设置宽度为设备的宽度，默认不缩放，不允许用户缩放（即禁止缩... 阅读全文