摘要：移动端重构系列-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视图窗口，移动端特属的标签。一般使用下面这段代码即可：上面的代码依次表示设置宽度为设备的宽度，默认不缩放，不允许用户缩放（即禁止缩... 阅读全文

摘要：高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色，高度相等还是不相等都无关紧要，因为你只要在这些列的父元素中设置一个背景色就可以了。但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么... 阅读全文

摘要：本文由大漠根据Chris Coyier的《A Complete Guide to Flexbox》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://css-tricks.com/snippets/css/a-guide-to... 阅读全文

摘要：等高列布局在《八种创建等高列布局》一文中详细介绍了八种创建等高列布局的不同方法。可以说这些方法足以满足你的业务需求，当然其中有一些方法略为繁琐，也有时转得人头晕。在今天这种技术环境之下，如果的业务对IE低版本依赖性不是非常强的情况之下，可以考虑一些新的方法来实现。接下来我与大家一起探讨几种新方法实现... 阅读全文

摘要：何为BFC与IFCbfc与ifc是针对页面正常流的两种环境，块级元素处于bfc环境中，行内元素处于ifc环境中。元素是块级元素or行内元素由其display属性决定：block, table, flex, grid, list-item 为块级inline, inline-block, inline... 阅读全文

摘要：CSS3 Grid LayoutWeb页面的布局，我们常见的主要有“浮动布局（float）”、“定位布局（position）”、“行内块布局（inline-block）”、“CSS3的多栏布局（Columns）”、“伸缩布局（Flexbox）”以及“网格布局（Grids）”等，在众多布局方法中，大家... 阅读全文

摘要：CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。What's FC？一定不是KFC，FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用... 阅读全文

摘要：一、BFC是什么？ 在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Bo... 阅读全文

摘要：一、两栏布局（左定宽，右自动）1. float + margin即固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。举例： 两栏布局-左定宽，右自动 我是左栏 ... 阅读全文

摘要：1. Webkit引擎的CSS3径向渐变语法 Webkit引擎下的老版本语法：-webkit-gradient([],[ || ,]?[ ||,]?,[,]*); //Safari Chrome这两款浏览器支持的版本，浏览器Chrome4-9 和Safari4-5版本支持 Webkit引... 阅读全文

摘要：方法一这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。 Content goes here #wrapper {display:table;}#cell {display:table-cell; ... 阅读全文

摘要：人家设计得真好！”可是好在什么地方呢，却说不出来。这是阻挡你成为优秀设计师的一大障碍。设计是我们的本行，不会用设计语言来解构画面，是说不过去的。移动互联网设计发展到今天，有很多传统的设计规律可以遵循，也提出了新的挑战。因为手持设备屏幕较小，如何在有限的页面内呈现或引导有效信息，又不显得杂乱臃肿，考验... 阅读全文

摘要：字体大小的设置单位，常用的有2种：px、pt。这两个有什么区别呢？先搞清基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；pt就是point，是印刷行业常用单位，等于1/72英寸。这样很明白，px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可... 阅读全文

摘要：移动端页面在不同设备、不同操作系统 、不同运行环境下都可能造成各种各样的没有碰到过的的坑，相比曾经的IE6坑多了。 阅读全文

摘要：几乎市面上所有的浏览器标准 阅读全文

摘要：随着移动互联网的发展，我们越发要关注移动页面的性能优化，今天跟大家谈谈这方面的事情。首先，为什么要最移动页面进行优化？纵观目前移动网络的现状，移动页面布局越来越复杂，效果越来越炫，直接导致了文件越来越大，下载和运行速度越来越低，而速度低会造成不良影响，据统计：71%的用户期望移动页面跟pc页面一样快... 阅读全文

摘要：标签：h5页面优化收藏热门分享网页设计师必备的 酷站收藏网站2013年不容错过的app ui素材40个漂亮的扁平化网页设计欣赏国内网页设计公司网站欣赏55套网页设计常用的psd格式UI主题包素材下载30个“简洁大气国际化”的网页设计欣赏|--（1） 动画雪碧图|--（2） 图片压缩|--（3）多终... 阅读全文