6种编写HTML和CSS的最有效的方法
HTML5、CSS3、JavaScript，给前端开发者提供大大的用武之地。大家都在用很多的工具和技术来武装自己，以加快前端的开发。 本文分享了6中最有效的方法，希望能提供你的效率，为你节约时间。 1.Dynamic CSS（动态CSS） 如果你想加速你的CSS代码编写，那么你需要学习并掌握动态CSS。大部分的动态CSS增加了nested riles, variables, mixins, selector inheritance功能，这里提高代码的利用率。
20个不错的CSS页面布局相关资源推荐
本篇文章搜集整理的是CSS页面布局的一个很长的列表。如果你时间很少，那么可以下载已经准备好的CSS页面布局，如果你想进行个性化的尝试，下面列出了一些站点你可以不需过多努力而达到效果。 漂亮、免费的CSS模板 这个站点包括免费的CSS模板，只需复制粘贴，你就会有个吸引人的网站。 More Information on Nice and Free CSS Templates
开源中最好的Web开发的资源
文章来源：Best “must know” open sources to build the new Web。个人感觉这个收集贴收集成相当的全。 学习HTML 5编程和设计 ★ HTML5 Rocks : Major Feature Groups 的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码 很不错的 HTML5 Dashboard – Mozilla，效果很炫。 WhatWG Developers, 一个清楚的 HTML5 技术规格说明书。 ★ StackOverflow : 大名鼎鼎的技术问答式论坛。 ★ Addyosmani, jQuery 和 JavaScript 文章教程 Sohtanaka, jQuery 和 JavaScript 文章和教程 ★ Nettuts+ 是一个面对Web开发人员和设计人员的网站，提供各种技术教程和文章，覆盖 [...]
浏览器的加载与页面性能优化
本文将探讨浏览器渲染的loading过程，主要有2个目的： 了解浏览器在loading过程中的实现细节，具体都做了什么 研究如何根据浏览器的实现原理进行优化，提升页面响应速度 由于loading和parsing是相互交织、错综复杂的，这里面有大量的知识点，为了避免过于发散本文将不会对每个细节都深入研究，而是将重点放在开发中容易控制的部分（Web前端和Web Server），同时由于浏览器种类繁多且不同版本间差距很大，本文将侧重一些较新的浏览器特性 现有知识 提升页面性能方面已经有很多前人的优秀经验了，如Best Practices for Speeding Up Your Web Site和Web Performance Best Practices 本文主要专注其中加载部分的优化，总结起来主要有以下几点： 带宽
征服高级CSS选择器
原文：征服高级CSS选择器 译自：Taming Advanced CSS Selectors 版权所有，转载请注明出处，多谢！！ CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。但是尽管事实上，我们每个人也都意识到了它是有用的，CSS 选择器远未发挥它们的潜力，有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。 避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式，就是使用更复杂的CSS选择器，它们可以定位于指定的元素而不用使用额外的class或id，而且通过这种方式也可以让我们的代码和样式更加灵活。 CSS的优先级 在深入研究高级CSS选择器领域之前，理解CSS优先级是如何工作的是很重要的，这样我们就知道如何适当的使用我们的选择器并避免浪费大量的时间来调试一些只要我们注意到优先级的话就很容易被搞定的问题 当我们写CSS的时候我们必须注意有些选择器在级联(cascade)上会高于其它选择器，我们写在最后面的选择器将不一定会覆盖前面我们写在同一个元素的样式。 那么你如何计算指定选择器的优先级？如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单，比如：1, 1, 1, 1 或0, 2, 0, 1 第一个数字(a)通常就是0，除非在标签上使用style属性； 第二个数字(b)是该选择器上的id的数量的总和； 第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])； 第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)； 通用选择器(*)是0优先级； 如果两个选择器有同样的优先级，在样式表中后面的那个起作用。 让我们看几个例子，这样或许比较容易理解些： #sidebar h2 — 0, 1, 0, 1 h2.title — 0, 0, 1, 1 h2 + p — 0, 0, 0, 2 #sidebar p:first-line — 0, [...]
DIV居中布局的三大实现方法
你对DIV居中布局的方法是否了解，这里和大家分享一下，因为现在DIV+CSS布局越来越流行了，怎么实现DIV居中好像是个难题。本文给出关于DIV居中布局的几种实现方法,相信会对大家有所帮助。 关于DIV居中布局的几种实现方法 现在DIV+CSS布局越来越流行了，怎么实现DIV居中好像是个难题。本文给出关于DIV居中布局的几种实现方法，相信会对大家有所帮助。 第一种方法: body{ margin:0pxauto; text-align:center; } 但是如果没申明下面这句解析方法,页面就会出错.不能居中对齐! “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> 但是有时候页面并不能全部按上面规定的代码格式来编写,比如说要改多彩滚动条. 第二种方法: margin-left:50%; left:-width/2; 这里的width不是CSS中的Width,而是你的DIV的宽度例如你的div是768px宽，那么你就应该设置left:-384px。
CSS使用技巧大全
1. 文字的水平居中 将一段文字置于容器的水平中点，只要设置text-align属性即可： text-align:center; 2. 容器的水平居中 先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。 div#container { width:760px; margin:0 auto; } 3. 文字的垂直居中 单行文字的垂直居中，只要将行高与容器高设为相等即可。 比如，容器中有一行数字。 <div id=”container”>1234567890</div> 然后CSS这样写： div#container {height: 35px; line-height: 35px;} 如果有n行文字，那么将行高设为容器高度的n分之一即可。
前端开发大众手册
在线工具集 书籍类： Book Shelf 2.0 beta —— 荐，分类很清晰，下载很方便 Book Go! 原版图书免费下载链接收集站 51CNNET.NET JavaScript类： Beautify JavaScript —— JavaScript格式化工具，效果很理想 AJAX Libraries API Regex Tester Compressor Packer —— 以前一直用这个压JS，自从有了TBCompressor，就放弃他了 CSS类： CSS选择器性能测试 CSSTidy —— CSS格式化工具 CSS Compressor —— CSS压缩 其他： GUID 生成器 —— 做某些东西(Firefox插件)时需要唯一资源标志符时用 W3Counter WebWait – Benchmark Your Website