精彩人生

擅长CSS的Web开发人员不仅可以从视觉上复制实物原型，还可以用代码进行完美的呈现。无需使用表格、尽可能少的使用图片。如果你是个名副其实的高手，你可以快速把最新和最伟大的技术应用到你的项目中，比如媒体查询、过渡、滤镜、转换等。虽然这些都是一个真正的CSS高手所具备的，但CSS很少被人单独拿出来讨论，或者用它去评估某个人的技能。有趣的是，我们很少这样去评价其他语言。Rails开发人员并不会因

今天看到这篇文章。写的非常有意思。发现自己才处于"入室"阶段。【背景】如果你是刚进入web前端研发领域，想试试这潭水有多深，看这篇文章吧；如果你是做了两三年web产品前端研发，迷茫找不着提高之路，看这篇文章吧；如果你是四五年的前端开发高手，没有难题能难得住你的寂寞高手，来看这篇文章吧；web前端研发工程师，在国内是一个朝阳职业，自07-08年正式有这个职业以来，也不

Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。然后将Hack放在浏览器特定的CSS文件中，让其符合条件的浏览器解析这些代码，就如前面所说的条件样式，我们将CSS Hack代码放入条件样式文件中，符合条件的浏览器就解析，不符合的将不解析，从面达到您所需要的页面渲

本文地址：http://www.zhangxinxu.com/wordpress/?p=2204一、开门见山响应图片技术可以说是响应布局衍生出来的一个小分支。说白了，就是不同显示器宽度下调用不同的图片。这玩意，最近在国外讨论很火，有几种不同的实现方法，但都并不复杂。二、Cookie + Server实现github上有该技术介绍。该技术需要Javascript以及后台程序的配合

这个方法是在一个英文博客上看到的，好像有些年头了，因为还写着兼容ie5,ie4，不过是一个很有效又简单的方法，只需要CSS就可以了。之前试了一些方法，基本上都是把html设置为overflow:hidden，再把body设置为overflow:auto等等，但是用在我的博客上没有什么效果。这个方法就很有效了，效果是一个始终定位在窗口一侧的广告栏，方法如下：html部分: i

在那些正常的浏览器下，如果我对ul中的li的左部实现圆角效果:html部分:> > href="http://xxx.net">xxx.net>>>css部分:ul li {text-align:center;display:block;position:relative;padding:10px;}ul li .corner{bac

豆瓣前端:认为前端工程师正慢慢演变为产品工程师。wap app, 响应性UI等以html5技术为基础的开发将成为前端工程师的主要工作内容，解决产品跨平台跨设备的实现问题。Javascript, HTML, CSS这些前端工程师熟悉的，多年使用的语言，作为开放标准将被各种平台所支持。产品形态和数据的分离是形势所趋。移动时代对产品形态多元化的要求虽然可以靠不同技术分别实现，但要付出巨大的成本。这也

跨浏览器兼容，对前端攻城师们来说是一个不得不处理的问题。为了在浏览器间呈现统一的显示效果，攻城师们不仅要为每个游览器添加CSS前缀，甚至还需要用到一些特殊的CSS Hack技巧。于是，jsFiddle、JSBin等前端代码的在线测试工具应运而生。然而，使用jsFiddle仍有很多不便之处。为了解决这个问题，前端攻城师Lea Verou自己动手，开发了一个名为Dabblet的HTML和CSS代码

E6是不认识最小高度这个概念的，所以，得换个方法，让他认识，如下：min-height:100px; /*高度最小值设置为：100px*/height:auto !important; /*兼容FF,IE7也支持 !important标签*/height:100px; /*兼容ie6*/

好几种IE6的BUG只要添加ZOOM:1，问题就迎刃而解，主要原因是触发了layout。layout这个定义属于IE，当元素触发了layout或者默认具有layout，则这个元素自己会对自身的内容进行计算大小和组织。否则，这个元素将依赖于父元素来计算尺寸和组织内容，而这种状态就是IE bug爆发的时刻了。IE认为如果所有元素都具有layout，则需要更多的去维护这些元素，所以并不是所有的网页元

9. 终于等到了的到来，浏览器泪流满面……10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下标签的CSS路径；11. 浏览器召集了在座的各位们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。^^^^^^^^^^^^^^^^^ 看，那忧伤的分割线 ^^^^^^^^^^^^^^^^^浏览器每天就

bug症状：在一些设计中给img设置max-width: 100%，以便图片能完整呈现，而不是被截掉部分。这样设置在其他浏览器下都表现完美，但唯独IE8下却出了问题。IE8下，图片竟然不见了！bug重现：大家所知的一般常见的IE bug中没见过这样情况的，所以花费了一些时间来重现这个问题，max-width的设置只是导致这个现象的部分条件。在做了一系列试验后得出了问题重现的条件

优化浏览器渲染资源被下载到客户端后，浏览器仍需加载，解释，并渲染HTML、CSS和Javascript代码。只需利用现有浏览器的特性简单地编排你的代码和页面，就可以提升客户端的性能。使用高效率的CSS选择器避免CSS expressions将样式表放在页面顶部指定图像尺寸使用高效率的CSS选择器概述避免低效率的匹配大量元素的键选择器【ke

min-height最小高度的实现（兼容IE6、IE7、FF） - www.52css.com#mrjin {background:#ccc;min-height:100px; height:auto !important; height:100px; overflow:visible;}-->www.52CSS.comMr.

有很多种方法来实现图片的预加载，通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧，用CSS你就可以毫不麻烦的预载你的图片。为什么使用预载你为什么会考虑使用预载呢？你是否曾有个网站，在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……嘿嘿。预载将在这方面帮助你。它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候，很

最近地实践中，越来越觉得 li 元素中包含 a img 元素的时候会比较麻烦，需要注意，当然，问题还是一如既往的出现在 IE 下。以下为其中一例：htmlcssul{width: 280px;}ul li{display:block;height:57px;width:277px;}其中 temp.jpg 尺寸为 277×57

浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工 作原理，我们将看到，从你在地址栏输入google.com到你看到google主页过程中都发生了什么。将讨论的浏览器今天，有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。本文将基于一些开源浏览器的例子——Firefox、 Chrome及Safari，Safari是部分开源的。根据W3C（World

一、SVG技术背景随着网络上信息数据的大量涌现，如何正确显示和出版是有效传输、接收和利用它们的基础。图形、图像是信息数据可视化的主要方式。但现有的图形、图像格式存在着缺陷：非开放式，显示和印刷质量及适应性差，难以创建Web上图文信息的个性化定制、交互式以及实时动态方面的应用等。SVG正是在这样的背景下诞生的。SVG(Scalable Vector Graphics，可伸缩性矢量

从事Web前端开发的人都与CSS打交道很多，有的人也许不知道CSS是怎么去工作的，写出来的CSS浏览器是怎么样去解析的呢？当这个成为我们提高CSS水平的一个瓶颈时，是否应该多了解一下呢？　　一、浏览器的发展与CSS　　网页浏览器主要通过 HTTP 协议连接网页服务器而取得网页， HTTP 容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的 HTTP 是 HTTP/1.1，

突然间发觉自己一直以来都是用以前的思维方式在写页面，很多细节的东西并未注意到。前几天组内有同学问我关于单字节的长字符截断问题，原以为很简单的只要用word-break:break-all;和word-wrap:break-word;就能解决所有问题了。事实上这个的确能让长字符的单字节文本在块元素中被截断。虽然是被截断了，但细节的问题还是存在，比如一个单词不希望被截断的时候也被截断了，这样就悲催

先说我常用的吧：果壳网：一个科普类网站，不过内容很活泼。36氪：互联网资讯新闻类站点，类似cnbeta，不过没有cnbeta娱乐。知乎：很专业的问答类网站豆瓣：怎么能把豆瓣忘了呢？？下面是搜集的风车网：人人网旗下旅游分享类网站网易轻博客：网易轻博客点点轻博客：轻博客新浪轻博客：新浪轻博客Freebao：有facebook一样感觉的一个网站，是一个提供

今天在给网页测浏览器时发现，当缩小浏览器宽度时，IE7中浮动元素会自动调整宽度（内容自动换行），使元素变得很高，而不是被挤到下一行，严重影响了原页面样式和用户阅读。   IE6没测，不知道怎么样，IE8,9，FF，Chrome测过都没问题。   解决方法：如果不想固定宽度（当然没有固定，否则还有这个问题么==），可以禁止内容自动换行，即对对浮动元素设置"white-space:nowrap

来源：http://tympanus.net/codrops/2009/08/30/javascript-browser-detection/Here is some very useful javascript for detecting the browser that is accessing a page:12345

来源：http://www.daqianduan.com/css-a-line/前几天一同事看新浪微博里有个类似分隔线的提示，就自己试了几种方法来实现这个分隔线。下面就是简单实现分隔线的几种方法，个人比较喜欢第二种，我也给出了最后第五种比较2的写法，请大家拍砖，或者提供其他好的方法。单个标签实现分隔线： 小小分隔线 单标签实现 .demo_line_01{

规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器

最小宽度同样不被ie6支持，js解决方案如下：//直接操作需要的元素var container = document.getElementById(elementId);container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";//定义函数，多次调用function se

浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动 还是 闭合浮动 （Enclosing

说起模块化，也许我们首先想到的是编程中的模块设计，以功能块为单位进行程序设计，最后通过模块的选择和组合构成最终产品。把这种思想运用到页面构建中，也已经不是什么新鲜事。相信很大一部分页面构建工程师都经历了这样几个阶段：第一阶段是在一个css文件中把多个页面按自己的习惯顺序从上往下编写样式，基本不考虑有无公用样式，以完成设计呈现为首要目的；第二阶段是提取不同页面中的通用样式，如公用颜色、图标、按钮等，

原文：http://taligarsiel.com/Projects/howbrowserswork1.htm有点长，前面介绍的比较细，但是到后面就越写越糊了，两年了  都没有继续写下去，据说是没有时间写了。。。翻完了之后 想找些 这个作者的资料 无意发现三个多月前已经有人翻过了 也留下来http://blog.zhangguoqiang.name/index.php/category/j

高效的css写法中的一条就是使用简写。通过简写可以让你的CSS文件更小，更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。今天我们系统地总结一下CSS属性的缩写。色彩缩写色彩的缩写最简单，在色彩值用16进制的时候，如果每种颜色的值相同，就可以写成一个：1color：#113366可以简写为1

随着互联网的迅猛发展和普及，一个新型的行业和新兴的职位正在上升到技术的层面：web前端开发工程师。一些想从事、或感兴趣的人会问：我适合做前端工程师吗？什么样的人最合适？首先，我们看一下前端新人从哪里来？相对于其他IT技术职位来说，Web前端工程师算是半个程序员，很多从事此项工作的都是非计算机相关专业出身，这当然是因为互联网行业吸引人以及HTML和CSS入门起点低，目前大学里尚能全民考C（计算机

做为一个专职的页面重构者， 我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种的细分，加上

现在学习web标准的人越来越多，对于刚接触标准的人来说，我想大多数人的第一个印象就是用DIV+CSS制作页面，使用DIV来布局的确是标准的一个主要的特点，但标准并不只是用DIV+CSS布局，看过w3cn网站上的文章，你应该也了解到标准是"由符合标准的XHTML组成；用CSS来布局

一、编码问题有些时候你可能会发现网页加了样式表文件后显示不正常，而且样式表文件也并没有错，这时就得找找编码的问题的，因为如果用UE等文本编辑器保存文件的时候，有时会不小心存成UTF-8编码的文件，而网页如果使用的是GB-3212编码，就会出现网页显示不正常的问题。二、书写

在对浏览器兼容性要求越来越高的时候，大家是否正在寻找一个完整的解决方案呢？包括FF、IE6、IE7、Opear、Safari，需要注意的是IE由于在不同的DTD上渲染的模式不同，“_”这个hack的使用要注意页面是否使用了DTD或XML申明（<?xml version="1.

MVC概论起初来之桌面应用开发。其实java的structs框架最能体现MVC框架：model模型是理解成服务器端的模块程序；view为发送给客服端的内容；control为servlet程序控制跳转和工作流。随着前端Ajax兴起、前端开发工作进一步划分：js程序员和ue页

在IE5.5、IE6、IE7、IE8beta1、FF、Opera9测试过，都可以，不知道在MAC上会不会有问题呢无标题文档.clearfix:after {}{  content: ".";  clear: both;  height: 0

图片的宽度和高度是未知的，没有固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求，所以先把一些常用的方法都收集整理了一下。下图是理想中的效果图，外部容器的宽度和高度固定，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容

注：本文转载自优快云　　 10月10日在丹麦举行的Goto会议上，Google Dart语言项目的领导人Lars Bak宣布推出编程语言Dart。Lars Bak表示，Dart是一种“结构化的Web编程”语言，Dart编程语言在所有现代的浏览器和环境中提供高性能。

1. 尽量避免使用DOM。当需要反复使用DOM时，先把对DOM的引用存到JavaScript本地变量里再使用。使用设置innerHTML的方法来替换document.createElement/appendChild()方 法。2. eval()有问题，new Fucti