摘要：在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的we... 阅读全文

摘要：:first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码：p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素；h1:first-child 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；sp... 阅读全文

摘要：在这个年代，你要是不懂一点点css3的知识，你都不好意思说你是个美工。美你妹啊，请叫我前端工程师好不好。呃。。好吧，攻城尸。。。呵呵，作为一个攻城尸，没有点高端大气上档次的东西怎么能行呢，那么css3的动画就绝对是值得你拥有了，虽说IE9以及更早版本的IE浏览器都不支持css3动画，但是IE6-8浏览器已是江河日下，使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多，所以如果很简单的就能让一部分人获得更好的用户体验，那何乐而不为呢。从广义上来讲，css3动画可以分为两种。过渡动画 第一种叫过渡（transition）动画，就是从初始状态过. 阅读全文

摘要：居中是我们使用css来布局时常遇到的情况。使用css来进行居中时，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，本文就居中的一些常用方法做个简单的介绍。 注：本文所讲方法除了特别说明外，都是兼容IE6+、谷歌、火狐等主流浏览器的。 先来说几种简单的、人畜无害的居中方法 1. 把margin设为auto 具体来说就是把要居中的元素的margin-left和margin-right都... 阅读全文

摘要：关于绝对定位元素的参照点，相信大家都知道，那就是离它最近的具有动态定位（absolute、relative、fixed）的祖先元素的左上角,如果它的祖先元素都没有动态定位，则把文档根元素即html元素的左上角当做参照点来进行绝对定位(记住，不是body元素，而是html元素,大家可以自己去验证，这不是本文的重点)。但是这是我们使用left或top属性来进行定位时所遵照的原则，如果我们使用的是bottom或right属性来进行定位，那参照点又是什么呢？不知道大家想过这个问题没有。这里先说明一下，left和top属性的权重是高于right和bottom，只有在没定义left或top的情况下，相应的 阅读全文

摘要：困惑在哪里？ background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性，它们有相同的可选值，即border、padding、content三种，而且这两个属性表示的都是元素背景与元素边框、补白(padding)和内容区域之间的某种关系。 比如，我们想要在边框上显示背景，我们可以使用background-origin帮我们实现（前提是边框要... 阅读全文

摘要：css中的负边距(negative margin)是布局中的一个常用技巧，只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距，所以掌握它的用法对于前端的同学来说，那是必须的。本文非常基础，老鸟可以略过。负边距在普通文档流中的作用和效果那些没有脱离文档流的元素（指不是浮动元素... 阅读全文

摘要：这两个东西是什么，我相信至今还有很多人搞不清，只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句，又或者是因为这两个东西实在是太拗口了，长得又差不多，导致连背都很难背下来。那它们到底是什么呢？我在mozilla的官网上找到如下的解释：word-wrapword-break我们看到两个解释中都出现了 break lines within words 这样的词汇，说明它们都跟单词内断句又关。然后我们试着翻译一下上面的两段英文：word-wrap:css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句，这是为 阅读全文

摘要：何为高度自适应？ 高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。高度自适应不像宽度自适应那样简单，在兼容浏览器方面也稍微复杂一些。 布局思路 在IE7+及chrome、firefox等浏览器中，高度自适应可以利用绝对定位来解决。但一个元素是绝对定位时，如果没有给它设定高度或宽度，则它的的高度和... 阅读全文

摘要：css这个东西，说难不难，说容易也不容易。我觉得最重要的还是经验的积累，正所谓的不积硅步，无以至千里。这一系列文章讲述几种css特殊布局的实现，也当作为自己做个备忘吧。 首先讲的是三列布局，左右两列宽度固定，中间一列宽度自适应 这个很好实现，左右两列分别左浮动和右浮动并给一个固定宽度，中间不浮动，也不设定宽度。这样基本就可以了。但为了兼容IE还必须做些工作。 看下代码结构： 效果为：... 阅读全文

摘要：话不多说，先看测试代码： 该段代码在标准浏览器（包括IE8+）中的效果为： 但在万恶的IE6和IE7中的却是这样的： 外面看到li元素的子元素是列表元素时（既ul,ol,dl）,li的顶部会莫名其妙的空出一段来，就像是给li设了一个padding-top一样。 解决方法：触发li的hasLayout属性，最好的方法是设置 zoom:1 阅读全文

摘要：inline-block元素在布局时会给我们带来很多方便，但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙（有的浏览器可能是8px）。废话不多说了，直接讲解决方法吧。总体来时可分为两种方法，一种是改变html结构法,另一种是css法。先说第一种，比如下面这段代码:<ol> <li>首页</li> <li>关于我们</li> <li>联系我们</li> <li>加入我们</li></ol>假设 li 是 inline-block元素，则 li 间会 阅读全文

摘要：虽说html5中大多数功能性的元素如<video><canvas><audio>等还得不到当前主流浏览器的支持（主要就是指IE浏览器了），但至少那些个与布局相关的元素同html5.js结合起来时我们是可以放心使用的，比如<header>,<footer>,<nav>,<section>,<article>,<aside>,<figure>这几个最常用的元素。 Article 和 Section ... 阅读全文

摘要：随着互联网的发展，特别是移动互联网的迅猛发展，html5和css3的普及和应用已是大势所趋。虽然目前整站运用html5的条件还不成熟，但我们可以至少尝试使用那些最基本的html5的元素来构建网站。目前，主流浏览器里只有IE9以下的版本是不支持html5的，但是可以通过一段js脚本来使IE6、7、8也能支持html5的标签，所以我们并不用担心浏览器的兼容性问题，大胆的使用吧。以下就简单介绍一下怎么样在页面上使用html5。一、为了能使IE9以下的IE浏览器也能支持html5的标签，所以首先得在文档头部用条件注释的方法引入那段著名的代码。<!--[if lt IE 9]><scr 阅读全文

摘要：box {2 /*非IE的主流浏览器识别的垂直居中的方法*/3 display: table-cell;4 vertical-align:middle;56 /*设置水平居中*/7 text-align:center;89 /* 针对IE的Hack */10 *display: block;11 *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/12 ... 阅读全文

摘要：* html selector                    /* for IE6 and below */ *+html selector     ... 阅读全文

摘要：原文在这 块级元素的分类 块级元素按照其应用于结构还是内容分为三种：结构化块状元素，终端块状元素，多目标块状元素。 一.结构化块状元素 这类元素用于构造文档的结构，一个好的文档结构对于搜索引擎和应用其他技术（如JavaScript）都是十分有利的。它们没有语义上的含义，仅仅划分出了文档的组织方式，并没有体现文档的内容。 主要的结构化块状元素     * <ol... 阅读全文

摘要：1、Position is Everything,一个描述和展示在各种浏览器中发现的bug，并提供css解决方法的网站，顶！2、一个国外的网页设计论坛3、http://css-tricks.com/4、http://html5demos.com/有很多html5 DEMO5、http://www.alistapart.com6、http://webreference.com/7、http://ww... 阅读全文

摘要：1、http://www.harnods.info/里面有一个很好的作品展示的模板 2、http://www.css-website.com/ 里面很多站 3、http://tutsarena.com/ 不错的PS教程网站 阅读全文

摘要：浮动布局能给我们带来很大的方便，但有时也会造成我们不想要的后果，这个时候就要清除浮动了。   第一种情况是，有时我们不想让浮动元素出现在不浮动元素的旁边，这时可以对不浮动元素应用clear了，至于是用left,right,还是both，这就得看实际情况了。这种情况比较简单，就不多加叙述了。   第二种情况是，有时我们想让一个父元素（父元素不设置高度）随着里面的内容的高度... 阅读全文