xiebiji.com

难得国外有这样好的教程，我就用我仅有的英文水平翻译一下啦。建议将本博客的中栏和右栏隐藏后观看本文。

转载请注明：

译者：Joe

译文来源：http://xiebiji.com/2009/09/design_a_beautiful_website/

原文来自：Design a Beautiful Website From Scratch

引言

你是否曾经想过设计一个漂亮的网页，但是却不知道怎样入手？说实话，几年前我也是这样。当我浏览网页的时候我看到这么多好看的网页，我就希望自己有技术创作这样的设计作品。 今天我可以这么做了，而且我将教你怎么做这样的设计！从根本上，对于这种设计你需要一点photoshop的操作技能和观察细节的能力。通过以下的教程，我将会指出其中极细微的细节之处，而这些细节讲使你的网页设计漂亮起来。打开photoshop,我...

mootools里面有个能够实现类似QQ面板功能的功能类，效果？如下：

.element {

}

.element p { margin: 0; padding: 4px; }

.float-right { padding:10px 20px; float:right; }

blockquote { text-style:italic; padding:5px 0 5px 30px; }

--> 我的折叠菜单 网站简介 写笔记的小Joe，是一个记录网络笔记，趣事，心得的个人独立博客，有专有的主题风格。其中大部分内容有：mootools,js,php,falsh等电脑语言笔记，当然还有电影，音乐等娱乐资讯，有一定的访问群体。写笔记的小Joe，是一个记录网络笔记，趣事，心得的个人独立博客，有专有的主题风格。其中大部分内容有：mootools,js,php,falsh等电脑语言笔记，当然还有电影，音乐等娱乐资讯，有一定的访问群体。写笔记的小Joe，是一个记录网络笔记...

mootools的Tips类是非常简单易用，但又非常强悍的。看以下例子： 以下是html

无标题文档 window.addEvent('domready', function() { //这里填写本实例mootools代码 }); http://xiebiji.com

本实例CSS代码

.tool-tip { color: #fff; width: 139px; z-index: 13000; } .tool-title { font-weight: bold; font-size: 12px; margin: 0; color: #9FD4FF; padding: 8px 8px 4px; background:#000000 top left; } .tool-text { font-size: 12px; padding: 4px 8px 8px; background:#000000 bottom right; } .custom-tip { color: #000; width: 130px; z-index: 13000; } .custom-title { font-weight: bold; font-size: 12px; margin: 0; color: #3E4F14; padding: 8px 8px 4px; background: #C3DF7D; border-bottom: 1px solid #B5CF74; } .custom-text { font-size: 12px; padding: 4px 8px 8px; background: #CF...

先看这个|Read This First

*从今天开始所有教程日志均使用双语编写（>__