模态窗口有许多优点。 例如，当一个模态窗口包含一个较小的元素时，用户并不需要加载一个完成的全新新页面就可以访问它。（达到同样效果的另一种方式来是使用基于AJAX的标签） 。 通过模态窗口，您提高网站的可用性。一次又一次的加载网页是会令大多数用户感到烦扰，因此避免这种状况绝对是一件好事。模态窗口也可以为您以节省空间通过避免使用不需要出现在主页面的大元素。 例如，您只需提供一个链接，缩略图或某种按钮， 而不是把完整的视频的放在网页上。

在这篇文章里面， 我们将了解建立多态窗口的最佳做法和趋势。我们也会提供许多良好的模态窗口的例子和一些脚本来帮助您开始建设他们。

你可以对下面的文章也感兴趣：

• 30 Scripts For Galleries, Slideshows and Lightboxes 
• How To Use Help Elements To Improve Your Designs
• 8 Layout Solutions To Improve Your Designs
• Designing Drop-Down-Menus: Examples and Best Practices
• Breadcrumbs in Web Design

When to Use Modal Windows 何时使用模态的Windows

模态窗口是一个很好的结构元素，但是他们并不一定适合所有的内容或媒体类型。这里有几个元素素，您应该考虑使用模态窗口。

Lightbox for Images/Videos  为了图片/视频的lightbox

最明显的使用模态窗口的是lightbox，用一种干净和实用的方式来展示图片和视频。 使用lightbox展示图片，用户不需要只是为了一个单一的图片或视频而加载新的页面。模态窗口也在内容布局中节省了空间，使您只显示图片或视频的缩略图，点击缩略图，它的模态窗口打开。 使用缩略图代替整个元素，你需要少得多的空间而且布局看起来更有组织。

此外，你通常会模糊或渐暗模态窗口后面的的背景，把焦点放在图片或视频本身，从而创造一个良好的环境使访问者可以查看媒体。 对褪色，模糊模态窗口的背景的细节，看下面给出的样式实例。

当使用了lightbox来实现一个图像画廊，一定要确定链接每个图像到相同的lightbox，提供“下一个”和“上一个”的按钮，使用户可以方便的浏览的一组图片。用户可以不关闭并重新打开模态窗口，以查看画廊中的每一幅画。

Contact Forms 联系表单

在模态窗口中的表单是一种常见的联系表单。模态窗口为了这个目的做的很好，是因为您不用为了这个功能建立一个完整的网页。 依据可用性来说，立即可用和容易找到对于联系表单是非常重要的。 使用浮动窗口，联系表单在每个页面是容易访问。联系表单一般很小，所以他们会相当不错组装在这些窗口中。

Sign-Up/Log-In Forms 注册/登录 表单

你可以用一个模态窗口来代替一个单独的页面让用户登录和注册。这种方法可以让表单在每一个页面可用并且容易访问。 你可以包含一个登录创库在页面的标题的地方、

Alerts/Notices 警告/提示

当您想提醒用户一个关键功能或行动将发生，最好的方法是通过一个模态窗口。当一个模态窗口在一个页面打开，用户不能忽视它，因为它将直接显示在屏幕中央，那里真是用户关注的地方。 此外，其余内容将褪色并禁用，因此用户什么都不能做，直到他们看到模太窗口然后单击关闭。在下面的截图中，您可以看到一个模态窗口被用来提醒用户将进行下载。

请注意，你不应该使用模态窗口作为弹出的代替办法。请确定只有当当前会话中有很重要的事情发生的时候警示访问者。 在许多情况下，一个简单的褪色块布局回比一个模态窗口好得多。

Help Elements/Tips  帮助元素/贴士

额外的帮助元素和提示内容是没有必要对于网站的功能和导航，所以你不想让他们占据空间并且放在主要内容里面。并不是所有的用户想要使用他们。 然而，他们需要放在谁想要使用它们就能轻易找的位置，因此使用模态窗口似乎可以合理地显示帮助内容和技巧。用户可以方便地打开和关闭它们，而且不需要把它们当作页面的内容和功能。

以下是一个很好的帮助元素在浮动窗口的例子。这个窗口远小于其他的我们已经看到，但它包含着类似的功能。例如，通过一个半透明的边界使视觉上分离并且有一个 “退出” （关闭）按钮在右上角。

Search Boxes 搜索框

这是一个不太常见的做法，但你会偶尔会看到模态窗口中包含搜索框。先进的搜索功能会占用了不少的空间，因此，您可以把它在一个浮动窗口以防止大搜索框占据大量空间。你可以在下面的截图看到这在实例中。

Embedding PDFs 嵌入PDFs

有时候你需要嵌入文件在你的网站上，如PDF格式的简历。 你可以使用模态窗口， 代替用户可以点击下载PDF到他们的电脑或其他的嵌入的PDF的方式，达到同样的目的。 以这种方式， PDF格式可以很容易地浏览，而不会影响用户体验的。通过模糊的背景，你也把重点放在你的PDF格式，提高了可用性。

Usability and Styling Practices 可用性和样式实例

下面列出的可用性和样式的做法和趋势，在你创建模态窗口的时候记得这些。

Blur and Fade Out Background of Window 模糊和渐暗窗口背景

对于可用性和样式最重要的是淡出浮动窗口后面的页面。你将会看到这样的实例几乎无处不在，最常于lightboxes用来显示媒体文件。 通过淡出网页，您将让用户所有的注意力集中在浮动窗口上。如果背景不淡出，用户甚至可能不会马上意识到窗口是“漂浮”的网页上面而不是部分的主要布局。一个窗口物理地浮在网页上的样子使增加了网站的维度。它看起来更整洁并且消除混乱。 总体而言，淡出提供窗口和页面所需的分隔度，增强了功能性和实用性。

确保淡出的程度，但留下一个轻微的不透明，使用户知道该网页并没有消失。例如，一个黑色淡出加上75 ％左右不透明效果就非常好。但是，对于网站的一个白色的背景，褪色的页面用白色并且一点点不透明，再加上使用落下式阴影。

有时你会看到一个模态窗口，并不淡出整个页面，而是具有很强的阴影来增加层次感。这就造成同样的效果，并提供了类似的视觉分离。你可以在下面的截图看到使用这种技术完美使用。

Exit Strategy: Button, Click Outside Window, Escape Key 退出策略：按钮，点击窗口外， 退出

为了提高功能性，始终提供一个退出按钮在窗口上面的角落里。标准做法是用一个简单的圆形带有“ X ”图形的按钮，这样做对于用户来说非常整洁并且相当明显。 在下面的lightbox中，你可以清楚地看到退出按钮。

其他允许用户关闭模态窗口的方式是让他们点击窗口后面的页面，点击模态窗口中的显示元素或者使用Esc键。

Disable All Other Page Functions 禁用页面上其他所有功能

禁用窗口背后页面里的所有功能。 当模态窗口打开的时候，它应该是去焦点，并且没有按钮应该能够被点击。 浮动窗口应该跟其余内容分离开来，所以禁用页面能创建一个更好的分离。 保持页面滚动功能是一个好主意，不过，如果需要的话，用户至少应该有一些自由返回到页面。

Using Transition Effects 使用过渡效果

过渡效果的小细节，如果用正确的方式做看起来会很不错。一个很好的过渡效果是模态窗口的渐进渐出。但是，不要做的太过让点用户觉得烦。 保持渐变的简短但要稍微能注意到。

在下面的例子中，灰色的模糊背景渐进渐出，创造了非常好的效果。

Scripts, Tools and Plug-Ins For Lightboxes and Modal Windows

Lightboxes and Modal Window 的脚本， 工具 和插件

当你开始集成模态窗口的进程的时候，你可能需要一些东西来构建它。这里有11个出色的基于模态窗口的jQuery脚本和插件。 每个都有自己独特的特点和功能，所以查看他们所有的。

Fancy Lightbo

这是一个比较好的Lightbox jQuery插件。 它很时尚并且非常具有功能性。它有整洁的风格，标记功能和网页很好的整合，并与AJAX结合。

Lightbox 2

这是原版的lightbox的脚本， 仅仅只是为了图片而创建的。 它简单的风格而且支持一组图片的浏览。

Facebook Image/Content Viewer

这有一个基于facebook浮动窗口很棒的脚本。 它支持图片和内容，并且用跟facebook非常著名的窗口相似的风格

Woork Mootools Lightbox

这是一个来自woork的很棒的教程，他指导你怎么创建一个简单的lightbox的脚本。这个脚本包含了支持一组图片和标签的特性。

nyroModal jQuery Plug-In

这个简单的窗口插件支持所有形式的媒体文件，包括ajax。 他也有很好的显示/隐藏的效果。

jQuery Alert Dialog

这个jQuery 插件是用来警告和对话的窗口。 它拥有众多的功能并且可以很好的传递信息给用户。

LightWindow

这里是一个有很多特性的综合性的lightbox的脚本， 例如嵌入pdf， 支持多个图片画廊， SWF执行等等。

Prototype Window Class

另外一个深入系列的的脚本， 有各种不同的功能，例如对话框，登录窗口，ajax内容窗口，图片lightboxes 等。

ThickBox 3.1

一个很流行的lightbox工具， Thickbox。 他支持图片，在线内容和AJAX。

prettyPhoto

这是一个时尚的图片lightbox， 很好的支持图片集。

jQuery Expose

这个是有一点不同于模态窗口的脚本。 他展示选中的HTML元素。 当你单击一个特定的元素， 页面剩下的元素会渐出。 这是一个很棒的模态窗口的替代品。 它也支持页面的渐出而是注意力集中在选中元素上。

Showcase of Modal Windows  模态窗口的展示

Grooveshark
Grooveshark 是一个结构量和风格良好的应用。 模态窗口也无一例外，一个模态窗口， 被用在用户的注册登录的模块。

Digg
Digg 是另外一个使用浮动窗口来注册和登录的用户生成的网站。登录的链接放在页面的标题处。注意一个半透明的边界被用来代替渐出和投影。这个边界提供了更多的视觉隔离感。

Apple Movie Trailer

Apple 在很多地方使用模态窗口。 你可以看到一个窗口备用来观看电影预告片。 这个窗口建立的很好使得大的视屏文件不会影响到窗口的表现。

Apple iMac: Design Gallery

另外一个Apple网站的模态窗口的例子。 它有非常简单干净但是强烈的投影来实现视觉隔离。

Espionage

另外一个一个图片的lightbox的例子。 在这个例子中， 图片扩展到窗口的边缘， 并且推出按钮直接覆盖在图片上。 在这里 没有边界是必要的因为强烈的色彩对比

Daylite 3

一个很好备件渐出的窗口的例子。 多个页面内容被集成在一个单一的模态窗口中。

Behance

另外一个联系表单，这里有一个熟悉的“发送给朋友”的元素， 这个被警察放在模态窗口中。 因为网页有很深的背景色，一个淡的半透明的边界被用来做分隔。

Facebook

Facebook 有非常容易辨识的模态窗口。 这个包含信息链接到一个帮助元素在注册表单里。 并且， 一个很强的半透明边界。

KISSmetrics

这是一个很棒的在模态窗口登录表单。 这个表单有良好的风格并且包含了帮助元素来提高可用性：只是因为登录窗口并不意味着你可以忽视可用性。

Nasi Briyani Lounge

另外一个登录表单。 这个有一点不同。他是用一个简单的弹出窗口代替一个完整的模态窗口。

Pixelight Creative

一个自由职业者网站里的lightbox。 当你单击每一个工作档案，一个大一点的图被打开在lightbox

Capo

另外一个时尚的窗口， 这是一个软件漫游的视频，这是一个普通的例子。 它和包含了一个简单的边界和投影。

Accept-Idea

另外一个浮动窗口附属于搜索窗口。 当你输入一个查询，结果显示在模态窗口里。这个窗口有基本的功能， 包括一个推出按钮和边界。

The Typographic Desk Reference

一个很简单的模态窗口，用强阴影来增加深度。

Evernote Web Application

这个显示一个警告当你打开一个Everbote‘s 网页应用。 注意页面是怎么渐出的， 它是的所有的注意力集中在窗口内容中。

Iceberg

另外一个在浮动窗口的登录表单。 着一个没有渐出和阴影而用一个边界来分隔。

Viewzi Corporate

一个漂亮风格的模态窗口。 注意干净的大腿处按钮在上角，大的填充和半透明背景。

Mail Chimp

这个lightbox有半透明边界和页面的渐出。

The Resumator

注意这个怎么强烈的图片背景跟页面背景的对比。一个标签被用在这里而不是属于窗口， 创捷了很好的外观。

Checkout App

一个风格很不错的图片模态窗口，这个窗口用一个投影来增加深度并且一个实心的边界提供给多的分隔感。

Pixelmator

另外一个很好的下载警告例子。 这个警告当下载开始的时候离开弹出，注意非常棒的样式， 就像窗口的轻微不透明。

Ballpark

这里有一个视频的模态窗口， 通常用在公司和软件的网站里。你经常看到QuickTime 和 SW在模态窗口里，但是这个是嵌入一个Vimeo的视频。 并且有非常好的渐进和渐出效果，

Backpack

这是另外一个用来放视频的窗口，再次注意页面是怎么渐出更淡的而不是更深的颜色。

Guifx
An image lightbox for a portfolio, always a great idea if you want to include larger images to show details of your work.

一个为了作品档案的图片lightbox， 如果你想包括一个大一点的图片显示你的工作详细一点的信息的话， 这是一个很好的主意。

摘自：http://www.yeeyan.com/articles/view/orangedan/43521

大部分网络应用都要使用大量的表单以进行数据录入和配置。但是不是所有的网络应用的表单都是统一的。表单字段的不同对齐方式，不同的标签，动作调用以及周围的视觉元素都能对用户的行为的不同方面起到正面或负面的作用。

表单布局

如果填写表单的时间需要尽可能短。而且用户对需要填写的数据是非常熟悉的（比如，在订单流程中输入姓名、地址和支付账户信信息），标签和输入框最好垂直对齐。每个标签和 对应的数据框排列在垂直方向上临近的位置，所有的输入框和标签垂直对齐能够节省视线移动的过程和时间，用户只需要在垂直向下一个方向上移动视线。

在这种布局方式中，建议对标签使用加粗字体。可以强调视觉重量感，在整体布局中突出标签。如果不加粗的话，标签会在视觉吸引力上和输入区域相混。

如果表单取得数据并不为用户所熟悉，又或者不好按照过程分组（比如地址的不同部分），左对齐比较容易看出表单需要的信息。用户可以上下浏览标签就可以了解需要填写的 数据而不会受到输入框的影响。但是，标签和输入框之间的距离通常会被最长的标签撑开，填写表单的时间可能会受到影响。用户需要在列于列之间跳跃寻找标签和输入框之间合适的组合。

还有一种选择就是右对齐标签，这样标签和输入框的对应组合就比较明了了。但是，左侧的参差不齐影响到快速了解所需信息的效率。在西方，习惯从左到右阅读，眼睛更习惯左边有轮廓鲜明的边线。

使用视觉元素

由于“左对齐水平排列标签”的优点（容易纵览标签信息以及节省垂直空间），则有可能会尝试去削弱其主要缺点：表单输入框和对应的标签的分散问题。

其中一种办法就是为标签曾加背景色和横隔线为特征：不同的背景色将表单分成垂直标签列和输入框列；横隔线将每个标签和对应的输入框划分成一组。虽然这些方法可能看起来是可取的，但也的确制造一些问题。

通过格式塔（人们的先天视觉感知规则）可知，另外还有15个视觉元素也被一同加到布局中：中线、每个有背景的方块，每个水平线。这些元素开始分散用户注意力从而使得将焦点放到重要的元素上——标签和输入框——增加了难度。Edward Tufte曾经指出：“信息包含着有重要影响的差异”（信息由差异性构成–译者）。换句话说，所有不能帮助布局的视觉元素都将会伤害到布局。这一点在你需要扫视左列标签时可以表现出来。视线一再受到水平线、边框和背景构成的方块的影响而停顿。

当然也不是说表单布局中绝对不能使用背景颜色和分隔线。当有必要向用户指出组与组之间的关系的时候，细分隔线或者浅背景色可以再视觉上将有关联的数据组合起来。这两个元素（分割线和背景颜色）都可以有效地帮助吸引用户对表单基本动作的注意力。

基本动作和次级动作

表单的基本动作（通常是“确认”或者“保存”）需要更明显的视觉感受有别于其他的表单元素（在上面的例子中鲜明的颜色、加粗字体、背景颜色等等）而且需要与输入框垂直对齐。这能指引用户完成表单。

如果表单含有多个动作，例如“继续”和“返回”，则减弱次级动作的视觉重量感则比较明智。这可以最大程度减少潜在的错误，进一步指导用户完成表单。

尽管有这些指南可以帮助你更好的设计表单位置，但是布局的组合，视觉元素以及所需的内容，仍然需要通过用户测试和数据分析进行验证（完成率、出错等等）。

摘自：http://www.yeeyan.com/articles/view/danqing/42079

当然，我知道现在有成千上万个关于 用CSS处理圆角 的教程，但不管怎么说，我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是，这篇教程彻底地应用高级CSS技术，但是，我会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用，所以，知道现在，我会保持W3C验证的有效。

看一下演示 | 下载 css sprites + 圆角

您还可以参考一下文章：

43个PSD转XHTML, CSS创建布局及导航辅导教程,解析事件背后的每一个步骤

我们将怎样来处理?

我处理圆角的版本是由内置的绝对定位的四个div组成，每个div都有唯一的圆角图片作CSS Sprite操作。我们将会这样做:

是什么方式导致这项技术表现得这么了不起呢（What makes this technique cool）?

通过可变的宽度和高度处理毗邻的元素的能力。没有极限。（The ability to make rounded-bordered elements with fluid width and height. No limits whatsoever.）这项技术，正如我之前提到的，是与 CSS Sprites 结合操作完成的。如果您不知道这是项怎样的技术或者说不知道怎么使用它，那么请先阅读我 之前的文章。CSS sprites 都学会了吗? 那我们就开始吧!

第一步: 创建我们的 Sprite

1. 为矩形圆角图片处理选择一款编辑器 (在这个案例中我选择的是Firework).
   
2. 切割并且导出圆角到本地临时位置 (我们将会在之后用到).
   
3. 新创建一个文件，将圆角导入到这个新文件中，复制三次，然后旋转这三个新切片得到另外的三个圆角。
   
4. 合成四个圆角为一张图片, 并用 1px 的红线 来区分它们.
   
5. 导出合成图片，sprite 也就大功告成了。

第二步: HTML 代码

首先，我们会给容器 div 一个 .roundedBox

类 :

<div class="roundedBox"></div>

现在，我们必须再增加四个 div ，这会在将来创建圆角的时候用到。之后必须给每个加载一个类 .corner，同时也标识一个类来指定它们格子的位置。

<div class="roundedBox">
     <strong>My content in roundedBox Type 1</strong>
     <div class="corner topLeft"></div>
     <div class="corner topRight"></div>
     <div class="corner bottomLeft"></div>
     <div class="corner bottomRight"></div>
</div> 

一切搞定? 嗯，让我们把注意力再转移到 CSS 代码上来。

第三步: CSS 代码

如你所知, (或者您会在这里快速学习到) 绝对定位元素通常都依照相对定位的父元素进行定位。. If this element is not defined, they will take as their parent relatively-positioned element, the body tag.如果这个父元素无法界定，那么它会去最近作相对定位的那个父元素，直至 body 标签。 哈?! – 好了，如果到此为止您仍没有掌握，不用担心，我们将在第二部分了解它。（翻译得有点拗，附上原文：Ok, if you didn’t get this, don’t worry, you’ll catch it in an second.）

让我们先来定义下所有的圆角

所有的圆角都必须定义绝对定位，并且注明高度跟宽度。 我的圆角定义的宽度跟高度都是 17px.

.corner {
position:absolute;
       width:17px;
       height:17px;
}

如果您是第一次切割矩形圆角，那么宽度跟高度很可能会不一样 (咄!)。

现在开始定义 div 容器样式:

.roundedBox {position:relative;}

任何定义有类 .roundedBox 的元素内，绝对定位元素都会相对于这个元素进行定位，而不是标签 body。 我们也必须设置一些padding值，如果没有设置，圆角将会覆盖我们的文本，这肯定不是我们想要的效果。 重要提示: top 和 bottom padding 值必须 等价于圆角的 height。left 和 right padding 值必须等价于圆角的宽度。 正如您已经知道的，我的圆角宽度跟高度是相等的，因此，四个边角的padding 值也是相等的:

.roundedBox {position:relative; padding:17px; margin:10px 0;}

我也通过 margin 给我们的 div 流出了一定的空隙

最后，让我们对没有圆角作单独定义

我们会对每个圆角作绝对定位设置，并且定位背景图的位置 (根据我们的 sprite):

.roundedBox {position:relative; padding:17px; margin:10px 0;}
.corner {position:absolute; width:17px; height:17px;}
.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}

您可能已经注意到，我们的样式仍然还没有下载 sprite。我们一般不会去定义它们的原因是，我们会使用另外的方法。

圆形盒模型 1 (蓝色)

HTML 代码

<div class="roundedBox" id="type1">
    <strong>My content in roundedBox Type 1</strong>
    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>

我们必须给容器 div 定义一个ID为 #type1，用来实施特殊背景。

CSS 代码

首先，我们得给 #type1 匹配一个背景色，使之融合于 sprite 中的圆角:

#type1 {background-color:#CCDEDE;}

之后，通过定义 .corner 类来协助圆形盒模型载入 Sprite 样式:

#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../images/corners-type1.gif);}

好了，我们的第一个圆角矩形大功告成了！预览圆角矩形模型1 (蓝色).

圆形盒模型 2 (绿色) / 圆形盒模型 3 (紫色)

模型1，模型2跟模型3的唯一差别就是它们的颜色，所以我们也仅仅只修改这些。

模型 2 (绿色)

HTML 代码

<div class="roundedBox" id="type2">
    <strong>My content in roundedBox Type 2</strong>
    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>

CSS 代码 (仅仅修改 sprites 的颜色及背景色)

#type2 {background-color:#CDDFCA;}
#type2 .corner {background-image:url(../images/corners-type2.gif);}

预览圆角矩形模型2 (绿色).

模型 3 (紫色)

HTML 代码

<div class="roundedBox" id="type3">
    <strong>My content in roundedBox Type 3</strong>
    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>

CSS 代码 (仅仅修改 sprites 的颜色及背景色)

#type3 {background-color:#D3CADF;}
#type3 .corner {background-image:url(../images/corners-type3.gif);}

预览圆角矩形模型 3 (紫色). 都学会了吗？好，现在我们再进一步学习

模型 4 (红色边框)

模型4 跟模型1、2、3又有什么区别呢？边框和颜色，让我们来解决这些因素吧。

HTML 代码

<div class="roundedBox" id="type4">
    <strong>My content in roundedBox Type 4</strong>
    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>

CSS 代码 (在 sprite 中给您的边角的边框都添上边框，并使 .roundedBox 类的背景及边框融合 sprite。)

#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}

好了，这个就是截图效果。我们的边角还不能正确地覆盖 #type4 边框。所以我们必须矫正它们的定位来覆盖早期的定位样式。让我们做到这一点:

#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}
#type4 .topLeft {top:-1px;left:-1px;}
#type4 .topRight {top:-1px; right:-1px;}
#type4 .bottomLeft {bottom:-1px; left:-1px;}
#type4 .bottomRight {bottom:-1px; right:-1px;}

好了，这就是我们完成的模型 4。预览圆角矩形模型4 (红色边框). We are almost there, don’t quit now :p

模型 5 (垂直渐变)

好了，模型5会需要更多的工作量，我们应该这样:

1. 修改上下边角的高度 (由渐变度决定(depending on your gradient))。
2. 修改上下边角的背景图定位 (由渐变度决定)。
3. 通过重复平铺 1px 的背景图片来创建容器 div 的渐变效果。
4. 值得注意的是，我们必须给内容设置一个大小，或者给容器设置一个最小高度(由渐变度决定)。

让我们开始吧。

HTML 代码 (跟之前的一样)

<div class="roundedBox" id="type5">
    <strong>My content in roundedBox Type 5</strong>
    <div class="corner topLeft"></div>
    <div class="corner topRight"></div>
    <div class="corner bottomLeft"></div>
    <div class="corner bottomRight"></div>
</div>

CSS 代码

我的渐变是从上到下垂直的。所以我们必须增加上边角的高度，以及更改下边角的背景图位置。当您看到我的新的 sprite 就会明白为什么会这么处理。就是下面这张:

我的div中的背景图片是这样的:

1px 的宽度，它的确是存在的。 我的下边角有一条实心颜色，刚好可以匹配div的背景色。 少说话多行动。我们来继续定义容器 div :

#type5 {
    background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0;
    min-height:110px;
}

给容器设置的背景颜色是我从底部边角中吸取的。然后将背景图片按 x 方向进行重复。最后我给它设置一个最小高度，正如我之前所说的，渐变才不会泄露。最后来加上所有的边角 (我将文件的类型修改为 .png 格式的图片，为的是能得到更好的渐变质量):

#type5 {
    background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0;
    min-height:110px;
}
#type5 .corner {background-image:url(../images/corners-type5.png);}

现在，我增加上边角的高度 (这是由渐变最后抵达的颜色位置决定的):

#type5 {
    background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0;
    min-height:110px;
}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,#type5 .topRight {height:140px;}

最后，我纠正下下边角的背景图定位:

#type5 {
    background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0;
    min-height:110px;
}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,#type5 .topRight {height:140px;}
#type5 .bottomLeft {background-position:-1px -142px;}
#type5 .bottomRight {background-position:-19px -142px;}

全部完成! – 预览圆角矩形模型 5 (垂直渐变).

IE6 版本

这项技术在这一令人讨厌的浏览器中是有问题的。我们必须给容器 (.roundedBox, or #type1, #type2, 等等) 确定宽度跟高度。如果您没有定义它，那么它会泄露到盒模型之外。 使用 IE6 条件式注释法来定义它。

最后的想法

我希望这项技术对您会有帮组，并且不会显得太难。垂直渐变、透明的角落，只要多加练习，您的脑袋会变得更加好用，也会更加容易定义样式。

摘自：http://www.yeeyan.com/articles/view/seasun/40032?tag_related

除此之外，您也可以参考下这些文章：

八种布局方案改善你的设计
IE不支持的10个非常有用的CSS属性
CSS处理大背景图片
五种方法让CSS实现垂直居中
针对IE8正式版的CSS hack

1. CSSTidy

CSSTidy 一个开源的CSS解析器和优化器。 它可以作为可执行文件 (Windows, Linux 和 Mac 中是有效的) 控制每个命令行和作为PHP脚本 (这两个功能几乎相同).
相反，大多数其它的CSS解析器都没有使用正则表达式，而CSSTidy则完全支持CSS2且具有更高的可靠性。”

贴上它们的信息，因为它们说的比我说的要强多了。

某些人可能会有个疑问 – 为什么您需要优化自己的CSS代码? 仅仅因为，如果您想要更清洁的代码，更快的载入速度，这样，你们俩 – 您跟访问者都将得以与此！

这里获取可执行文件 or use 在线优化!

2. Clean CSS

您也可以使用这个非常类似的在线优化版本，但我是个反复无常的人，所以我用这个网站要更多一些。这就要求挑选一个您喜欢的吧！

3. Blueprint CSS

“Blueprint 是一个 CSS框架, 其目的是减少你的CSS开发时间。在您项目的顶部预置它会给您的CSS打下坚实的基础。非常易于使用网格、合理的排版甚至是用样式进行打印。”

非常有用的模板文件，帮助您不是反复地从零开始编写代码 – 现在您可以花费更多的时间来天下新的特征和考虑如何设计，然后是反复的过程。

4. Code-Sucks

收藏了许多非常好的，如CSS布局、代码段 (CSS, JavaScript, PHP), 网站模板等。这使web的发展进程变得敏捷。良好的使用使用这些吧。

5. Snipplr

Snipplr是存储和组织很多代码片段的非常有用的地方 (Javascript, HTML, PHP, CSS, Ruby)。随着您的发展进程会经常使用。并且每个人都可以分享和添加它们的片段，当然，这部分中热门代码段无疑就是代表最佳的和经常被大家使用的。

6. MaxDesign

7. MeyerWeb CSS Reset

Eric Meyer CSS reset 非常受还有。您应该使用重置来消除浏览器之前默认风格的不同。同时，Eric也指出，这仅仅是个起点，但非常好用。

8. YUI Library

“每个YUI库中的组件都有300个一些列的例子来说明它的实施。这些例子可以作为您研究YUI的出发点，如，获取代码段作为您编程的开始，或者只是作为您开发各种互动模式灵感的源泉。”

非常有用的模板文件，出发点非常好，并且收藏了很好的例子以满足于几乎所有的网页设计师。

9. 960 Grid System

这个网格系统正在变得很受欢迎 – 他们提供常用尺寸, 基于 960 像素的宽度，提供 12 列跟 16 列网格系统。设计师们使用网格是为了使它们的网站看起来更为和谐和精准。当您下载了该网格系统，会得到几个模板文件跟mockups，它会是您的得力助手。

Download / Demo

10. Sensible Standards CSS Framework

这个框架也是基于 Eric Meyer reset 系统, 当然也有许多新的基础样式特征，没有任何双重重置和更多，到它的首页查看更多的细节吧。

11. CSS 圆角

我猜测，您肯定听到过不少关于圆角实现的争论和如何创建它，从这里您可以快速地在线获得圆角跟样式。

12. 内容与风格

良好的框架集有助于您迅速快捷开发新的网站，使您更加关心图形设计而不是代码的编写。

我希望这些参考网站有助于提升您的技能并加速您的发展进程！我相信除了这些网站之外还有许多，如果您知道一些，那么请您留下链接地址，感激不尽！

摘自：http://www.yeeyan.com/articles/view/seasun/44063

在这篇文章中，我们会看到9件设计师与客户在设计开始前需要讨论的事情，以增加成功的可能性。这些是围绕去了解客户业务与需求的话题，而不是像付款与最后期限这样的合同问题。

1. 商业目的

几乎所有的商业行为都有任务与远景声明。如果你想要设计出真实反映业务和对客户有效的网站，了解基本的商业存在原因与他的目标是绝对有必要的。

如果你不清楚客户的核心职责或者他们存在的原因，一定要在开始向目前把这些问题弄明白。虽然是很简单的资料，但是没有他们，项目很有可能误入歧途。

2. 具体产品与服务的业务

一旦清晰了业务存在原因，熟知具体事项与客户是如何从业务中得到收入也是非常重要的事情。无论是建立电子商务网站，还是普通的信息站，或者任何其他类型的网站，有必要知道客户准备为网站用户提供什么。

3. 客户的用户统计数据

讨论业务的产品和服务会让你获得有关为产品与服务付费的用户的更多信息，有效果的网站是以用户为中心，这个对身为设计师的你是至关重要的，你的客户需要准确的了解谁将使用这个网站，谁是有可能对提供的业务感兴趣。

尽可能多的获取这方面信息是非常好的做法。比如目标用户的年龄，性别，职业，收入等等，这些对确定网站的设计风格非常有帮助。此外，为搜集更多有关用户对产品与服务感兴趣的原因而建立网站，有利于提高潜能。

4. 企业文化

好的网站能反映企业，使之成为整体市场营销和企业形象有效的一部分。为了创建能准确表现企业的网站，你需要在一定程度上了解他们的企业文化。很多时候你可以通过业务人员了解他们的文化（如果可能的话）。与不同的员工进行交谈，与不同的客户或者用户交谈（如果可能的话），通过观察其现有的营销材料，比 如小册子，名片和广告。

5. 目前网站需要改善的地方

如果你的项目是需要对现有网站重新设计，这个时候你需要知道的一个重要事情是为什么他们选择了重新设计，特别是为改善现状重新设计他们制定了什么？是因为他们网站上了岁数仅需要换换面貌？还是因为发生了业务发生了重大改变需要新的设计与信息？还是提供的新产品和服务不属于旧的网站的一部分？还是现在 的网站不能为新的业务提供有效的帮助。虽然这是非常合乎逻辑需要考虑的事情，但是需要你向客户索取资料，并弄清楚他们着手重新设计的原因，这是许多人不会想到你需要完全明白的。

6. 他们对新网站的期望

假如目前网站存在失败或者过时的具体地方。一定要深入了解客户对新网站提高业务水平的期望是怎样的。期望是决定他们对你的工作的满意度的巨大因素。所以为了满足用户，知道项目最终的结果是什么非常重要。

7. 项目成败的决定性因素

网站的新设计会给企业带来令人满意的感觉改善。但是最终将有其他的影响因素，决定项目的成败。作为设计师，有效的工作会给客户带来提高业务的网站设计。清楚的认知项目成败的因素是非常重要的。也许是成功仅仅在于增加了销售量。也许是网站更准确的反应了企业的重大事情。无论是哪种，知道如何衡量能帮助 你把重点放在合适的方面。

8. 他们选择你做设计师的原因

有如此众多的自由设计师和设计公司可供选择，很明显客户选择了你是有原因的。也有一些是使客户觉得你是最合适的人选的相关事情。这也许因为你以往作品中的具体项目。也许因为在签约之前你表现出的有效沟通和对细节的关注。也许是因为你的定价。

无论是何种情况，有些关于你或者你的工作的事情，是鼓励你的客户和你一起去了解其他设计师。这一决定背后的原因往往会帮助你更好的了解他们想要的或者对你的期望。

9. 他们维护网站的计划

目前几乎每一个网站的设计开发都会使用某种类型的CMS.他们不断维护更新网站的需求影响着CMS的选择和如何建立网站。

他们计划增加新的页面与经常在存在的页面改动图片和文字么？他们需要各种各样的模板，为不同的目的建立特定页面吗？他们仅仅是偶尔或者很少更新页面么？理解客户不断前进中的需求能帮助你决定为特定的项目使用正确的CMS。在某些情况下，客户可能已经有了他们想使用的 CMS,但是这样的情况不经常遇到。

摘自：http://www.yeeyan.com/articles/view/61966/44096

class Singleton
{
    private static Singleton instance;

    private Singleton()
    {

    }

    public static Singleton GetInstance()
    {
        if (instance == null)
        {
            instance = new Singleton();
        }

        return instance;
    }
}

Client.cs

class Client
{
    static void Main(string[] args)
    {
        Singleton s1 = Singleton.GetInstance();
        Singleton s2 = Singleton.GetInstance();

        if (s1 = s2)
        {
            Console.WriteLine("两个对象是相同的实例");
        }

        Console.Read();
    }
}

单例模式，保证一个类仅有一个实例，并提供一个访问它的全局访问点。

通常我们可以让一个全局变量使得一个对象被访问，但它不能防止你实例化多个对象。一个最好的办法就是，让类自身负责保存它的唯一实例。这个类可以保证没有其它实例可以被创建，并且它可以提供一个访问该实例的方法。

单例模式因为Singleton类封装它的唯一实例，这样它可以严格地控制客户怎样访问它以及何时访问它。简单地说就是对唯一实例的受控访问。

单例与实用类静态方法的区别：实用类通常也会采用私有化的构造方法来避免其有实例。但与单例还是有区别的。比如实用类不保存状态，仅提供一些静态方法或静态属性以供使用，而单例类是有状态的。实用类不能用于继承多态，而单例虽然实例唯一，却是可以有子类来继承。实用类只不过是一些方法属性的集合，而单例类却是有着唯一的对象实例。

C#与公共语言运行库也提供了一种“静态初始化”方法，这种方法不需要开发人员显式地编写线程安全代码，即可解决多线程环境下它是不安全的问题。代码如下：

SingletonCharp.cs

public sealed class SingletonCharp
{
    private static readonly SingletonCharp instance = new SingletonCharp();
    private SingletonCharp()
    {

    }
    public static SingletonCharp GetInstance()
    {
        return instance;
    }
}

这种静态初始化的方式是在自己被加载时就将自己实例化，所以被形象地称之为饿汉式单例类。

原先的单例模式处理方式是要在第一次被引用时，才会将自己实例化，所以就被称为懒汉式单例类。

注：

• 单例模式的特点：1、单例类只能有一个实例；2、单例类必须自己创建自己的唯一实例；3、单例类必须给所有其它对象提供这一实例。
• 在哪些情况下使用单例模式：1、使用Singleton模式有一个必要条件：在一个系统要求一个类只有一个实例时才应当使用单例模式。反过来，如果一个类可以有几个实例共存，就不要使用单例模式；2、不要使用单例模式存取全局变量。这违背了单例模式的用意，最好放到对应类的静态成员中。3、不要将数据库连接做成单例，因为一个系统可能会与数据库有多个连接，并且在有连接池的情况下，应当尽可能及时释放连接。Singleton模式由于使用静态成员存储类实例，所以可能会造成资源无法及时释放，带来问题。

User.cs

class User
{
    private int _id;
    public int ID
    {
        get { return _id; }
        set { _id = value; }
    }

    private string _name;
    public string NAME
    {
        get { return _name; }
        set { _name = value; }
    }
}

IUser.cs

interface IUser
{
    void Insert(User user);

    User GetUser(int id);
}

SqlserverUser.cs

class SqlserverUser : IUser
{
    public void Insert(User user)
    {
        Console.WriteLine("在SQL Server中给User表增加一条记录。");
    }

    public User GetUser(int id)
    {
        Console.WriteLine("在SQL Server中根据ID得到User表一条记录。");
        return null;
    }
}

AccessUser.cs

class AccessUser : IUser
{
    public void Insert(User user)
    {
        Console.WriteLine("在Access中给User表增加一条记录。");
    }

    public User GetUser(int id)
    {
        Console.WriteLine("在Access中根据ID得到User表一条记录。");
        return null;
    }
}

Department.cs

class Department
{
    private int _id;
    public int ID
    {
        get { return _id; }
        set { _id = value; }
    }

    private string _deptName;
    public string DeptName
    {
        get { return _deptName; }
        set { _deptName = value; }
    }
}

IDepartment.cs

interface IDepartment
{
    void Insert(Department department);

    Department GetDepartment(int id);
}

SqlserverDepartment.cs

class SqlserverDepartment : IDepartment
{
    public void Insert(Department department)
    {
        Console.WriteLine("在SQL Server中给Department表增加一条记录。");
    }

    public Department GetDepartment(int id)
    {
        Console.WriteLine("在SQL Server中根据ID得到Department表一条记录。");
        return null;
    }
}

AccessDepartment.cs

class AccessDepartment : IDepartment
{
    public void Insert(Department department)
    {
        Console.WriteLine("在Access中给Department表增加一条记录。");
    }

    public Department GetDepartment(int id)
    {
        Console.WriteLine("在Access中根据ID得到Department表一条记录。");
        return null;
    }
}

IFactory.cs

interface IFactory
{
    IUser CreateUser();

    IDepartment CreateDepartment();
}

SqlserverFactory.cs

class SqlserverFactory : IFactory
{
    public IUser CreateUser()
    {
        return new SqlserverUser();
    }

    public IDepartment CreateDepartment()
    {
        return new SqlserverDepartment();
    }
}

AccessFactory.cs

class AccessFactory : IFactory
{
    public IUser CreateUser()
    {
        return new AccessUser();
    }

    public IDepartment CreateDepartment()
    {
        return new AccessDepartment();
    }
}

Client.cs

class Client
{
    static void Main(string[] args)
    {
        User user = new User();
        Department department = new Department();

        IFactory factory = new SqlserverFactory();
        //IFactory factory = new AccessFactory();

        IUser iu = factory.CreateUser();
        iu.Insert(user);
        iu.GetUser(1);

        IDepartment id = factory.CreateDepartment();
        id.Insert(department);
        id.GetDepartment(1);

        Console.Read();
    }
}

小结：

• 本例分析：只有一个User类和User操作类时，是只需要工厂模式的，但现在加入新表，而且SQL Server与Access又是两大不同的分类，所以解决这种涉及多个产品系列的问题，用到了抽象工厂模式。
• 优点：最大的好处是易于交换产品系列，由于具体工厂类，如IFactory factory=new AccessFactory()，在一个应用中只需要在初始化时出现一次，这就使得改变一个应用的具体工厂变得非常容易，它只需要改变具体工厂即可使用不同的产品配置；第二大好处是，它让具体的创建实例过程与客户端分离，客户端是通过它们的抽象接口操纵实例，产品的具体类名也被具体工厂的实现分离，不会出现在客户代码中。
• 缺点：比如我们要增加项目表Project，至少要增加三个类，IProject、SqlserverProject、AccessProject，还需要更改IFactory、SqlserverFactory和AccessFactory才可以完全实现；另外，客户端程序类不只一个时，很多地方都在用IUser或IDepartment，每一个类在开始都会声明IFactory factory=new SqlserverFactory()，如果我有100个调用数据库的类，就要更改100次IFactory factory=new SqlserverFactory()。［此种情况时可以考虑用简单工厂模式＋抽象工厂模式进行，随后也可以再过渡到反射＋抽象工厂模式（反射＋配置文件）］。

简单工厂：

工厂方法：

1、简单工厂模式下，工厂类与具体父类及具体子类都有关联；而工厂模式下，工厂类只与具体父类有关联，由工厂子类负责与具体子类进行关联。

2、如果在简单工厂模式下加入新功能扩展，就要对工厂类做修改，加入新功能；而在工厂模式下，只是单纯地加入工厂子类和具体子类，而不需要对工厂类做修改，做到了“开放扩展，封闭修改”。

3、其实尽管对工厂类不需要做修改了，但是也要对客户端做修改，因为添加了对新功能的调用。也就是说工厂模式做到了对工厂类的开闭原则，却解决不了对客户端的修改。

4、一些情况下，可以考虑用工厂模式＋反射来解决客户端修改问题。

Operation.cs

public class Operation
{
    private double _numberA = 0;
    private double _numberB = 0;

    public double NumberA
    {
        get { return _numberA; }
        set { _numberA = value; }
    }

    public double NumberB
    {
        get { return _numberB; }
        set { _numberB = value; }
    }

    public virtual double GetResult()
    {
        double result = 0;
        return result;
    }
}

OperationAdd.cs

class OperationAdd : Operation
{
    public override double GetResult()
    {
        double result = 0;
        result = NumberA + NumberB;
        return result;
    }

}

OperationSub.cs

class OperationSub : Operation
{
    public override double GetResult()
    {
        double result = 0;
        result = NumberA - NumberB;
        return result;
    }
}

OperationMul.cs

class OperationMul : Operation
{
    public override double GetResult()
    {
        double result = 0;
        result = NumberA * NumberB;
        return result;
    }
}

OperationDiv.cs

class OperationDiv : Operation
{
    public override double GetResult()
    {
        double result = 0;
        if (NumberB == 0)
            throw new Exception("除数不能为0。");
        result = NumberA / NumberB;
        return result;
    }
}

IFactory.cs

interface IFactory
{
    Operation CreateOperation();
}

AddFactory.cs

class AddFactory : IFactory
{
    public Operation CreateOperation()
    {
        return new OperationAdd();
    }
}

SubFactory.cs

class SubFactory : IFactory
{
    public Operation CreateOperation()
    {
        return new OperationSub();
    }
}

MulFactory.cs

class MulFactory : IFactory
{
    public Operation CreateOperation()
    {
        return new OperationMul();
    }
}

DivFactory.cs

class DivFactory : IFactory
{
    public Operation CreateOperation()
    {
        return new OperationDiv();
    }
}

Client.cs

class Client
{
    static void Main(string[] args)
    {
        IFactory operFactory = new AddFactory();
        Operation oper = operFactory.CreateOperation();
        oper.NumberA = 1;
        oper.NumberB = 2;
        double result = oper.GetResult();
        Console.WriteLine(result);
    }
}

小结：

• 模式分析：工厂方法模式是类的创建模式，主要实现的是定义一个创建产品对象的工厂接口，将实际创建工作推迟到子类中。工厂方法模式有一个别名叫多态性工厂模式，因为具体工厂类都有共同的接口或共同的抽象父类。
• 优点：核心的工厂类不再负责所有产品的创建，仅仅负责给出具体工厂必须实现的接口，而不接触哪一个产品类被实例化这种细节，使得工厂方法模式可以允许系统在不修改工厂角色的情况下引进新产品。当系统扩展需要添加新的产品对象时，仅仅需要有添加一个具体对象以及一个具体工厂对象，原有工厂对象不需要进行任何修改，符合“开放－封闭”原则。

Operation.cs

public class Operation
{
    private double _numberA = 0;
    private double _numberB = 0;

    public double NumberA
    {
        get { return _numberA; }
        set { _numberA = value; }
    }

    public double NumberB
    {
        get { return _numberB; }
        set { _numberB = value; }
    }

    public virtual double GetResult()
    {
        double result = 0;
        return result;
    }
}

OperationAdd.cs

class OperationAdd : Operation
{
    public override double GetResult()
    {
        double result = 0;
        result = NumberA + NumberB;
        return result;
    }
}

OperationSub.cs

class OperationSub : Operation
{
    public override double GetResult()
    {
        double result = 0;
        result = NumberA - NumberB;
        return result;
    }
}

OperationMul.cs

class OperationMul : Operation
{
    public override double GetResult()
    {
        double result = 0;
        result = NumberA * NumberB;
        return result;
    }
}

OperationDiv.cs

class OperationDiv : Operation
{
    public override double GetResult()
    {
        double result = 0;
        if (NumberB == 0)
            throw new Exception("除数不能为0。");
        result = NumberA / NumberB;
        return result;
    }
}

OperationFactory.cs

public class OperationFactory
{
    public static Operation CreateOperate(string operate)
    {
        Operation oper = null;
        switch (operate)
        {
            case "+":
                oper = new OperationAdd();
                break;
            case "-":
                oper = new OperationSub();
                break;
            case "*":
                oper = new OperationMul();
                break;
            case "/":
                oper = new OperationDiv();
                break;
        }
        return oper;
    }
}

Client.cs

class Client
{
    static void Main(string[] args)
    {
        Operation oper;
        oper = OperationFactory.CreateOperate("+");
        oper.NumberA = 1;
        oper.NumberB = 2;
        double result = oper.GetResult();
        Console.WriteLine(result);
    }
}

小结：

• 模式分析：简单工厂模式根据提供给它的数据，返回几个类中的一个类的实例。通常返回的类都有一个公共父类和公共方法。
• 优点：工厂类含有必要的判断逻辑，可以决定在什么时候创建哪一个产品类的实例，客户端可以免除直接创建产品对象的责任，通过这种方法实现了对责任的分割。
• 缺点：工厂类集中了所有产品创建逻辑，一旦不能工作，整个系统都要受到影响。同时，系统扩展困难，一旦添加新产品就不得不修改工厂逻辑。

代码对应：

interface IFly
{
    void Fly();
}

interface ILanguage
{
    void Speak();
}

class WideGoose : IFly
{

}

class Penguin : Bird
{
    private Climate climate;
}

class WideGooseAggregate
{
    private WideGoose[] arrayWideGoose;
}

class Bird
{
    private Wing wing;
    public Bird()
    {
        wing = new Wing();
    }
}

abstract class Animal
{
    public Metabolism(Oxygen oxygen,Water water)
    {

    }
}