You Design I Code，在国外比较盛行，国内似乎还不怎么样。

我可以保证：

• 所有代码（XHTML、CSS、JavaScript）完全手写
• 兼容主流浏览器（Chrome、Firefox、Opera、IE6、IE7、IE8）
• Div+CSS 布局，语义化标签
• 渐进增强的 JavaScript
• 最大限度地符合 W3C 标准

需要说明的是，这项免费服务仅针对个人（比如做博客模版）。如果是商业网站，仍需收取少量费用。

Feel free to contact me : lightory(at)gmail.com

2010/06/24 Update：本服务暂停。

Tags: Front-End

• Sexy Buttons – 快速制作漂亮的 Web 按钮 (28 Comments)
• CSS调试的技巧 (14 Comments)

作为 Web 界面基本元素之一，按钮有着非常重要的作用。多数浏览器的默认按钮样式都十分简陋，想要制作精致一点的按钮又颇费功夫。

想要快速制作漂亮的 Web 按钮？不妨试试 Sexy Buttons。

Sexy Buttons 是一个基于 HTML/CSS 的框架（其实就是一个 CSS 文件和一些图标），其特性如下：

• 不使用 JavaScript，纯 CSS
• 支持使用 <button> 或 <a> 标签
• 支持多种状态： normal, hover/focus, active, and disabled.
• 通过改变 HTML 标签的 class，可以制作出多种风格不同的按钮

下面是一些简单的示例。

基本使用：

<a class="sexybutton" href="#"><span><span>提交</span></span></a>
<button class="sexybutton"><span><span>取消</span></span></button>

提交取消

加上图标：在最内层添加一个带有特殊 class 的 span 标签，或者直接通过 img 标签添加图标（Sexy Buttons 自带有上千个图标）。

<a class="sexybutton" href="#"><span><span><span class="ok">提交</span></span></span></a>
<button class="sexybutton"><span><span><span class="cancel">取消</span></span></span></button>

SubmitCancel

改变尺寸：给外层标签添加特殊的 class

<a class="sexybutton" href="#"><span><span>Normal Button</span></span></a>
<a class="sexybutton sexymedium" href="#"><span><span>Medium Button</span></span></a>
<a class="sexybutton sexylarge" href="#"><span><span>Large Button</span></span></a>

Normal ButtonMedium ButtonLarge Button

改变样式：给外层标签添加特殊的 class

<button class="sexybutton sexyorange"><span><span><span class="ok">Orange Button</span></span></span></button>
<button class="sexybutton sexyyellow"><span><span><span class="ok">Yellow Button</span></span></span></button>
<button class="sexybutton sexysimple"><span class="ok">Simple Button</span></button>

Orange ButtonYellow ButtonSimple Button

更多的使用方法，可以参见其官方演示，或者直接阅读 sexybutton.css 文件。另外，根据实际需要，你也可以方便地对 Sexy Buttons 进行扩展。

我很喜欢 Sexy Buttons 所暗含的 Web 界面元素组件化的思想。

Tags: CSS, Front-End

• CSS调试的技巧 (14 Comments)
• You Design,I Code (30 Comments)

全书以技巧为主、理论为辅，介绍了许多 CSS 应用小技巧，如果忽略一些令人哭笑不得的术语翻译之外，这是一本难得的好书，十分适合进阶之用。

第九章《bug 和 bug 修复》，介绍了一些 CSS 调试的技巧，尤为实用。毕竟，与其授人以鱼，不若授人以渔。若不会自己研究、解决问题，就算你会用再多 CSS hack，遇到新 bug 时，也是白搭。

下面就加上我自己的一些理解，整理、总结如下：

0、使用更符合标准的浏览器

先使用更符合标准的浏览器（如 Firefox、Opera、Chrome 等）作为主要开发浏览器，页面显示正确后，再在能力较差的浏览器（如 IE）中进行兼容性测试。

1、进行 W3C 校验

遇到问题时，不要直接归罪于浏览器 bug，很多时候，问题源于你不规范的代码。尝试进行 W3C 校验，这能帮助你发现代码中的不规范之处。

当然，这不意味着必须做到 100% validate。W3C 验证只是一个参考标准，而不是必须无条件遵循的规则。

2、给相关元素加上边框

尝试隔离问题，识别症状，查明是什么导致了这个问题。隔离问题的方法之一是给相关元素加上边框，看它们的反应。

如果你使用 Firefox 作为开发浏览器，推荐 Web Developer 扩展，它可以方便地给指定元素加上边框，无需修改代码。除此之外，它还附带了许多其它的调试工具。

3、创建基本测试案例

如果问题比较棘手，可以创建基本测试案例（重现 bug 所需的最少 HTML/CSS ），去掉一些无关变量，使问题尽可能简单。

4、回避浏览器 bug

对于浏览器 bug，最简单的解决方案是——回避它。尝试使用其它方案实现相同的表现效果，实在没办法了再使用 CSS hack（这可能会留下隐患）。

Tags: CSS, Debug, Front-End

• Sexy Buttons – 快速制作漂亮的 Web 按钮 (28 Comments)
• You Design,I Code (30 Comments)