摘要：
这份列表收集一些比较优秀的CSS布局，这些布局都免费供个人和商业使用。当然，你使用之前还是得看版权说明，也许会发生许可协议变更。Layout Gala- 这个网站收集了40多个专业的CSS布局，每个布局都通过了CSS和html验证，且不需要Hack，兼容各大主流浏览器。CSS Layouts– 另一个专门收集CSS布局的网站。Dynamic Drive CSS Layouts– Dynamic Drive对于喜欢设计的人来说是比较熟悉的网站了，它们同样提供有很多CSS布局，两栏，三栏，自适应宽度，固定宽度都有。Nice and Free CSS Layouts– 12 个免费的CSS布局。St 阅读全文
随笔分类 - css
25个高级CSS技巧教程
2011-09-28 18:01 by Mr.Xer, 420 阅读, 收藏, 编辑
摘要：
能用CSS实现的效果，就尽量不要使用JS。但如果使用CSS需要很繁琐的代码，那用CSS也不见得是好事儿。这里是25个高级CSS技巧，有助于你提高你的CSS水平，让你对CSS的掌握更上一个台阶。这些技巧并不一定每个都实用，但重要的是去学习了解到这个CSS方法。1. CSS文字渐变和背景渐变使用纯CSS实现的背景渐变使用CSS和背景图片结合的C渐变CSS渐变文本特效纯CSS 文本特效2. Z-Index 图像重叠Understading Z-IndexCSS Z-index3. CSS 边框创意Create a Scalable Star using using CSS borderBorder 阅读全文
11大CSS按钮教程
2011-09-28 17:58 by Mr.Xer, 392 阅读, 收藏, 编辑
摘要：
按钮是网站中非常重要的一部分, 它们常用于引发访客点击和产生互动。下面收集了11个CSS按钮教程，教你如何创建吸引访客目光的按钮。我最想推荐的其实是第一个，Google custom buttons.在Recreating the button这篇文章中，作者详细向我们介绍了google现在很多应用服务中（google reader, gmail等）。其中包括需要用到一张渐变背景图的3.0版本和完全不需要图片还处于实验状态的3.1版本。下面10个则是由catswhocode收集整理的。1. 如何使用css创建精致的铵钮»教程链接2. 使用png图片和背景颜色生成的按钮»教程 阅读全文
10个实用但IE不支持的CSS属性
2011-09-28 17:58 by Mr.Xer, 239 阅读, 收藏, 编辑
摘要：
对IE浏览器尤其是IE6的抱怨基本已进入麻痹状态，偶尔甚至产生非常消极的想法:这个世界只有一个浏览器就好了，哪怕这唯一的浏览器就是IE6。当然，这样的想法是非常病态的，马上打消。本文里面，介绍了10个很实但IE却不支持的CSS属性，列出这些属性并不是为了数落IE(数落也没用), 而是你了解了哪些CSS属性是IE不支持的，就更有针对性的去编写CSS和Hack了。1. Outline在调试CSS问题的时候，我常常在指定元素上添加border来精确的查看该元素会发生什么并帮助确定问题的来源。这常常是有效的，因为它可以在布 局上给我更加具体的可视性。但是如果是块级元素，这可能会发生某些错误——在任何块 阅读全文
CSS3新特性一览
2011-09-28 17:56 by Mr.Xer, 298 阅读, 收藏, 编辑
摘要：
尽管CSS3的诸多新特性还不被很多浏览器支持，或者说支持的不好。但作为一个前端开发人员，你总不能等到所有浏览器都完美支持它的时候再去学习。CSS3到底给我们带来了哪些新特性呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影等。CSS3不仅能简化前端开发工作人员的设计过程，还能加快页面载入速度。本文里面，就让我们来全面的看一下CSS3的各种新特性。也别忘了检阅我们之前发布的一些CSS教程和技巧文章：60+CSS技巧教程资源大全CSS3.0相关资源和参考手册收集整理使用浏览器专有属性为了使用大部分CSS3特性，我们不得不 阅读全文
CSS透明属性详解
2011-09-28 17:54 by Mr.Xer, 340 阅读, 收藏, 编辑
摘要：
透明往往能产生不错的网页视觉效果，先奉上兼容主流浏览器的CSS透明代码:.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }上面的几个属性分别是:opacity: 0.5;这是最重要的，因为它是CSS标准.该属性支持firefox, Safari和 Opera.filter:alpha(opacity=50);这个是为IE6设的，可取值在0-100，其它三个0到1.-moz-opacity:0.5;这个是为了支持一些老版本的Mozilla浏览器。 阅读全文
常用设计元素的高级CSS技巧
2011-09-28 17:52 by Mr.Xer, 483 阅读, 收藏, 编辑
摘要：
提升CSS技巧往往并不需要你去创造出什么前无古人后无来者的CSS技巧，事实上，网页设计中常用的一些布局和样式技巧，每个学CSS的人都已经知道怎么实现了，但我们总是想寻找更佳的解决方案。本文收集整理了60多个高级CSS技巧，不管你是CSS新手还是高手，相信这些技巧都能助你更进一步提高自己的CSS技能。1. CSS布局和用户界面技巧当前 CSS 主要应用于创建页面布局。利用 CSS 创造页面布局和用户界面，有几乎无限的可能性。下面是一些更有趣的CSSCSS技巧。The simplest way to horizontally and vertically center a DIV本文介绍用 CSS 阅读全文
60+CSS技巧教程资源大全
2011-09-28 17:50 by Mr.Xer, 328 阅读, 收藏, 编辑
摘要：
我总是对每一个想学CSS的朋友说: “学CSS真的很简单，一个星期就搞定。” 但真的这么简单吗？魔方也很简单，拿到手里就知道怎么玩了，但最高境界却不是几天或几个月就能修成的，甚至根本就不可能达到，永远需要提高，看似痛苦，同时也享受升华的乐趣，CSS也一样，痛并快乐指的就是这些东西吧。本文里面收集一些有关CSS的技巧、教程、工具和观点等，其中一些你也许早就运用的炉火纯青，也可能有的你听都没听说过。不管是新手还是高手，大家都继续学习吧。一，Web 标准要玩游戏，就得先了解规则。要学CSS，就应该先了解一下Web标准。尽管看上去不是必须的(我在学CSS之前，根本不知道也不想知道Web标准是个啥玩意儿 阅读全文
50款CSS工具
2011-09-28 17:48 by Mr.Xer, 671 阅读, 收藏, 编辑
摘要：
50款CSS工具，包含，CSS网格和布局工具，CSS 优化工具，CSS 菜单生成工具，CSS 按钮生成器，CSS 圆角生成器，CSS 框架，CSS Sprites生成器，CSS 排版工具以及 CSS 表单生成器。网格和布局The 1KB CSS Grid新颖的 CSS 网格工具，可用于简化内容管理系统的页面模板，轻巧易用。Variable Grid System基于 960px 的常规CSS网页布局工具，用于快速生成基本的 CSS 网格。Grid Designer 2可控性强，选项丰富的网格系统，支持 CSS 在线即时输出。Design By Grid PNG Grid Generator生成 阅读全文
53个CSS技巧
2011-09-28 17:47 by Mr.Xer, 453 阅读, 收藏, 编辑
摘要：
1.CSS Based Navigation//基于CSS的导航2.Navigation Matrix Reloaded//导航矩块翻转3.CSS Tabs//CSS标签4.CSS Bar Graphs//CSS条状图表5.Collapsing Tables: An Example//压缩表格：一个实例6.Adam’s Radio & Checkbox Customisation Method//亚当的单选框和复选框的用户化方法7.CSS Image Replacement//CSS图像替代8.CSS Shadows(CSS Shadows Roundup) //CSS阴影（CSS阴影 阅读全文
Zen Coding: 一种快速编写HTML/CSS代码的方法
2011-09-28 16:34 by Mr.Xer, 202 阅读, 收藏, 编辑
摘要：
在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间？如果你的编辑器有代码提示功能，你编写的时候就会容易些，但即便如此你还是要手动敲入很多代码。在JavaScript方面，当我们想要在一个页面上获取某个特定的元素时，我们就会遇到同样的问题，我们必须写很多代码，这就变得难于维护和重用。JavaScript框架应运而生，它们同时引入了CSS选择器引擎。现在，你可以使用简单的CSS表达式来获取DOM元素，这相当酷。但是，如果你不仅仅可以用CSS的选择器布局 阅读全文
CSS的未来：一些试验性CSS属性
2011-09-28 16:33 by Mr.Xer, 207 阅读, 收藏, 编辑
摘要：
尽管现代浏览器已经支持了众多的CSS3属性，但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性，如border-radius、box-shadow或者transform等。它们有良好的文档、很好的测试并且最常用到，所以如果你最近在设计网站，你很难能脱离它们。但是，隐藏在浏览器的大宝库中是一些高级的、被严重低估的属性，但是它们并没有得到太多的关注。或许它们中的一些应该这样(被无视)，但是其它的属性应该得到更多的认可。最伟大的财富隐藏在Webkit的下面，而且在iPhone、iPad和Android apps的时代，开始了解它们会灰常有用。就连Firefox等使用的Gecko引擎，也提 阅读全文
精通高级CSS选择器
2011-09-28 16:29 by Mr.Xer, 298 阅读, 收藏, 编辑
摘要：
我们每个人都意识到了CSS的重要性，但CSS选择器远未发挥它们的潜力，有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的html搞的很凌乱。避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式，就是使用更复杂的CSS选择器，它们可以定位于指定的元素而不用使用额外的class或id，而且通过这种方式也可以让我们的代码和样式更加灵活。CSS的优先级当我们写CSS的时候我们必须注意有些CSS选择器在级联(cascade)上会高于其它CSS选择器，我们写在最后面的CSS选择器将不一定会覆盖前面我们写在同一个元素的样式。那么你如何计算指定CSS选择器的优先级？ 阅读全文
Sexy Drop Down Menu w/ jQuery & CSS
2011-09-28 16:14 by Mr.Xer, 345 阅读, 收藏, 编辑
摘要：
Studies show that top navigations tend to get the most visual attention when a user first visits a site. Having organized and intuitive navigation is key — and while most drop down menus may look aesthetically pleasing, developing them to degrade gracefully is also essential. In this tutorial I woul 阅读全文