由于一些读者对于960 Grid System CSS Framework的原理和使用方法比较感兴趣，暴风彬彬今天将和大家一同分享这篇关于960 grid CSS Framework的基本原理和简单的使用方法。

关于CSS框架其实一直是一个比较热门且很有争议的话题，的确，国内的一些前端er们越来越关注CSS框架，并都开始尝试使用，觉得CSS框架能够节省更多的开发时间，显著提高工作效率。当然，还有很多人持相反意见，认为CSS并没有这么高级以至于要涉及到框架！我记得在cnBeta上曾经有位程序员讽刺道:”这年头，连CSS都有框架了?!”。今天暴风彬彬并不是要向大家介绍什么是CSS框架,也不会介绍各种CSS框架的优缺点。只是要讲解一下目前在国外很热门的一个框架，严格讲是网格系统，那就是960 Grid System。通过这篇教程你会知道使用960框架之后，你的开发工作会更快的开展。
本文未完，点这儿看完整内容 » »

做为一个专职的页面重构者，我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里 导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种 的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不 理会下面的内容。
本文未完，点这儿看完整内容 » »

CSS是众所周知且应用广泛的网站样式语言，在它的版本三(CSS3)计划中，新增了一些能够节省时间的特性。尽管只有当前最新了浏览器版本才能支持这些效果，但了解它们还是必须且很有趣味性的。暴风彬彬将在这篇文章向大家展示CSS中的5个有趣的新技术:圆角、个别圆角、不透明度、阴影和调整元素大小。

-

-

本文未完，点这儿看完整内容 » »

今天是2008年的最后一天，彬Go为大家奉上今年的最后大餐，这篇文章将为大家总结08年国外一些比较不错的前端开发相关的教程、技巧、脚本、实例及工具资源等，有一些是曾经彬Go发表过的翻译文章。实在是丰盛的需要消化很久…无论您是刚入门的前端开发菜鸟，还是有多年前端开发经验的高手，我相信下面的这些日志总会有您需要的！
注:链接到的文章都是英文，如果您的英文不好可以尝试使用Google翻译，如果还是无法理解，可以将想看的文章的标题留言给我，暴风彬彬今后有时间会为大家翻译的。 本文未完，点这儿看完整内容 » »

如果你曾经收藏过许多关于CSS的最佳实践但还没开始利用它们，那么这篇文章将帮助你制作一个很好且很有组织的CSS文件来应用于一些CSS最佳实践。在这里我将为为我的下一个项目制作一个基本的CSS模板文件。使用标准的重设(Reset)方法，定义一些基本的方便的类，命名一些常见的页面区域等…

本文未完，点这儿看完整内容 » »

　　很多CSS爱好者不喜欢HTML表格，尤其是在制作表单的时候，虽然现在已经是XHTML+CSS的年代，但表单的设计大多还在采用table来布局。那么，有没有更好的使用纯语义化XHTML+CSS设计表单方法呢？今天让我们一起来尝试这种更符合语义化的方法来代替Table嵌套的表单元素吧！

　　在这里暴风彬彬要说，并不是要完全摒弃table的使用，它有它的语义化布局作用，尤其是在存储数据的时候。我在大多数情况下会使用纯CSS来设计表单，但是，我也很喜欢表格，只要我们能在正确的地方使用正确的元素就可以了，不要太过追求所谓的DIV+CSS。直接使用table要比使用CSS来”模拟”(display:table;)表格更方便更快速。下面暴风彬彬将分享一种使用纯CSS代替HTML表格元素设计表单的方法。

您还可以参考以下CSS相关教程及资源:
《使用CSS创建三列固定布局结构》
《使用CSS完美实现垂直居中的方法》
《通过不同的CSS设计字体大小来提高用户体验》
《可用性研究：为文字链接扩大可点击区域》 

本文未完，点这儿看完整内容 » »

　　当我在自己的网页设计项目中尝试使用据有透明度的PNG图片的各种方法时，我开始寻找各种能让PNG图片在IE6下正常工作的方法。我们都知道，IE6对于PNG的不透明度支持的并不好。暴风彬彬曾经发表过CSS完美实现垂直居中的方法，如果您有兴趣也可以参考。

1..htc文件的修复方法

下载.htc文件，然后指定你希望实现PNG支持的那个元素/标签。想了解更多的话，这有在线Demo和安装说明.(都是英文)

本文未完，点这儿看完整内容 » »

　　今天暴风彬彬将向大家分享一些为你平淡乏味的图片添加更多趣味情调的简单技巧。使用Photoshop为每个图片添加某种样式虽然可行，但会是相当乏味且困难的长久工作。下面要介绍的CSS技巧将帮助你从痛苦中解脱出来！如果你也有自己独到的CSS技巧，希望能一同分享。

　　彬Go会经常更新前端开发/CSS技巧等相关技术及教程文章，欢迎订阅本博客来及时浏览本博客的最新教程及资源。

阴影效果

通过使用带有一些padding之的背景图来添加阴影效果。

效果预览

本文未完，点这儿看完整内容 » »

　　今天，暴风彬彬将向大家推荐50个2008年的最佳CSS网站设计，这50个CSS网站是由WebDesignerWall评选出来的，很具参考价值。我们在欣赏的同时，也能从中吸取很多灵感，也能从它们的源代码中学习更高级的CSS技术。今年，越来越多的设计师开始使用超大的背景图片技术和一些JavaScript框架（如jQuery及MooTools）来提高用户体验。还有一些设计师将Flash和CSS混合使用。也许我们能从中发现2009年的新网页设计趋势？

您还可以参考以下CSS相关资源:

《精选15个国外CSS框架》
《推荐20个让你学习并精通CSS的网站》
《20+漂亮的网站分类存档设计赏析(下)》
《20+漂亮的网站分类存档设计赏析(上)》
《推荐80个使用超大背景图片的网站设计》 

Let It Bleed

巨大而醒目的图片使得这个网站鹤立鸡群。

本文未完，点这儿看完整内容 » »

　　今天暴风彬彬将向大家讲解如何通过设计一个HTML/CSS的基本结构，来创造一个简单且常用的三列式固定页面布局。

　　我的讲解会包含一些标准元素，如logo、顶栏、导航栏、文本区域、用于文章分类的中列和用于插入Google Adsense 120X600广告的右侧列。所以您完全可以将这些代码快速拷贝并重新利用在自己的前端开发项目中。

HTML结构

下图说明了我在页面中添加的HTML/CSS元素。

　　这个结构其实已经可以直接使用了。您只需再重新定义字体、背景颜色、每个层和HTML标签的字体风格和一些其他自定义类。

本文未完，点这儿看完整内容 » »