今天，暴风彬彬将向大家推荐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标签的字体风格和一些其他自定义类。

继续阅读全文 » »

　　今天，暴风彬彬为大家收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例，您将在这里发现很多与众不同的技术，比如:图片集、阴影效果、可扩展按钮、菜单等…这些实例都是使用纯CSS和HTML实现的。

　　单击每个实例的标题可以被转向到该技术实例的相关教程或说明页面(英文)，单击每个实例的图片截图可以直接跳转到相应实例的Demo页面。

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

1.Hoverbox 图片集

一个纯净的基于CSS的图片集，鼠标悬停缩略图就会显示放大效果。

继续阅读全文 » »

　　作为前端开发/网页设计师，电脑中总是安装着各种不同内核渲染引擎的浏览器，如IE(Internet Explorer)、FireFox、Safari、opera、Chrome等，在编写网页时要经常在不同的浏览器中进行测试，以便能在这些浏览器中有相同的显示效果。暴风彬彬曾经介绍过整合了IE5、IE6、IE7和IE8的浏览器IETester。今天暴风彬彬向大家推荐一款将FireFox、Safari和IE三大浏览器引擎整合在一起的浏览器:lunascape。

继续阅读全文 » »

　　JavaScript出能能为网页添加更多互动元素、为网页的视觉效果锦上添花之外，还能干些什么？今天这个答案也许会出乎你的意料，外国一位设计师Ed Spencer用JavaScript为一个内衣网站编写了胸罩罩杯尺寸计算器。我们在使用JavaScript完成日常工作之余，其实也能编写这种有趣的程序。

　　只在周末放松一下。

　　近来Ed Spencer为一个更具诱惑性网站中的一个工作，这家网站是专卖女性内衣的。 除了不得不一整天去看只穿内衣的女人的图片这个不值得羡慕的任务之外，Ed Spencer还被迫去写一个胸罩尺寸计算器。

　　胸罩尺寸计算器背后的理论是有点神秘和神奇了。 让一个男人或野兽理解它并不容易，所以它是幸运的，Ed Spencer完全不属于那两类， 他通过了痛苦和折磨的考验节省了广大女性的麻烦。

　　下面来学习学习这个JavaScript有趣实例吧…

继续阅读全文 » »

什么是css框架

实际上还是让我们从框架说起吧。
框架就是一个你可以用于你的网站项目的基本的概念上的结构体。

css框架通常只是一些css文件的集合，这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如：

• typography.css 基本排版规则
• grid.css 基于网格的布局
• layout.css 通常的布局
• form.css for 表单样式
• general.css 更多通用规则

您还可以参考以下前端开发/CSS相关资源:

《推荐12款可用于前端开发的免费文本编辑器》
《Web前端开发必备手册下载》
《推荐20个让你学习并精通CSS的网站》
《300+Jquery, CSS, MooTools 和 JS的导航菜单资源》

下面一起来了解一下各种不同的CSS框架吧:

1.960 Grid System

960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果，基于960像素的页面宽度。它有两种类型，12和16列，他们可以独立使用或是协同使用。

继续阅读全文 » »

　　作为办公室一族的你，一整天对着办公文件和电脑是不是很枯燥？如果是的话，就在老板不在的时候偷着玩会小游戏吧，不但放松精神，而且有在线分数排名哦…

　　这个Flash小游戏很有玩儿头，你可以选择自己喜欢的赛车参加比赛，比赛的场地只有一个，上手并不是很难，但如果想做出完美的漂移还需要努力多练练哦，每辆赛车都有寿命和油量，比赛中可以补充油量或者维修车辆，只要车没坏而且还有油，你就可以一直开下去，来比一比谁的单圈成绩最快吧！

继续阅读全文 » »

　　Bookmarklet(书签工具)是节省网页设计/前端开发时间的最佳工具。仅需点击一下，它就能提供很多信息或帮助。Bookmarklet是使用一段Javascript代码编辑而成的书签，当你在浏览器中点击已经预存的Bookmarklet(书签工具)时，其中的Javascript程序就会运行，从而起到书签相应的辅助功能。

　　今天暴风彬彬要向大家推荐15个有助于网页设计/前端开发的Bookmarklet，他们的功能涵盖了:

• 了解颜色的运用。
• 为网页插入标尺。
• 在未重载网页的情况下重载CSS
• 修改网页元素等功能…

Bookmarklet使用方法:您可以用鼠标将”使用”链接拖到书签栏中(适用于FF、Chrome)，在IE中可以右击”使用”链接，选择”添加到收藏夹”就可以了，记得添加以后重新命名哦。如果没有”使用”链接，那么您可以点击相应链接到该工具的作者网站寻找添加的链接。

点击这里下载适用于导入Firefox的书签文件夹。(点击FF的”书签”–>”管理书签”–>”导入&备份”–>选择导入下载的html文件即可)

提示:如果您很少或不习惯使用这种Bookmarklet工具，您也可以考虑使用Firefox的Web Developer工具栏(扩展)，它包含了部分Bookmarklet的功能，也是非常棒的网页开发辅助工具。

您还可以参考以下网页设计/前端开发相关资源:
《推荐12款可用于前端开发的免费文本编辑器》
《Web前端开发必备手册下载》 
《推荐3个网页设计在线配色网站》
《10个非常棒的Ajax及Javascript实例资源网站》
《20个免费的SEO网站分析工具》 

1.WTFramework

用于学习JavaScipt框架的Bookmarklet工具

　　当你好奇某个网站在使用哪个JavaScript框架的时候，相比查看网页源文件，点击以下书签就能查看网站使用的什么JavaScript框架要容易得多。

继续阅读全文 » »

　　在十月初的时候，我有幸在中国呆上了一段时间，与Web领域的专家、学生等交流Web标准以及他们的现状。很有意思的几个礼拜，也让我大开眼界。印象最深 刻的，在中国推行Web标准的仍在少数，并且通常是孤立无援的，无法实施、无法去解释为何需要标准及标准的价值。所以这里我想写一下我所了解的情况、面对 的挑战和一些希望能有效的方法。

　　如果你有任何意见建议，欢迎留言！如果你有相关内容链接，也欢迎提供，我会更新文末的资源列表。

继续阅读全文 » »

　　在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。

　　当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示，但有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。更糟的是，有的浏览器完全无视CSS的一些声明和属性。

　　正因为上述冲突和问题依然存在于这个”不完美的世界”，所以一些设计师想到了一种避免浏览器兼容性问题的方法，那就是CSS Reset，什么是CSS Reset？我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。

　　今天暴风彬彬总结收集了15套CSS重设实例，您可以在前端开发工作中进行参考和使用，有些是很简化的CSS Reset，有些则是非常复杂非常全面的CSS Reset，至于使用哪套，全看您的爱好或需要。

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

一.最简化的CSS Reset(重设) :

* {
      padding: 0;
      margin: 0;
}

　　这是最普遍最简单的CSS重设，将所有元素的padding和margin值都设为0，可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

* {
       padding: 0;
       margin: 0;
       border: 0;
}

　　这是在上一个重设的基础上添加了对border属性的重设，初始值为0的确能避免一些问题。

* {
       outline: 0;
       padding: 0;
       margin: 0;
       border: 0;
}

　　在前两个的基础上添加了outline属性的重设，防止一些冲突。

继续阅读全文 » »