如果您对这些感觉一头雾水，或者你干脆只想兼容三个主要的浏览器，那您也可以使用如下方法：

.样式名称 {  float: left;
 height: 120px;
 width: 143px;
 text-align: center;
 vertical-align: middle;
 margin-top: 10px;
 margin-left: 20px;} /* FireFox */
 
*html .样式名称 { margin-left: 50px;} /* ie6 fixed */
*+html .样式名称{ margin-left: 18px;} /* ie7 fixed, 注意顺序 */

这种更简单，更方便，不过只能兼容三个浏览器喽，要想全兼，还得用以上的例子。

不可否认，现在大多数的网页都在抄袭苹果的风格。乔布斯的设计的确非常棒，他让设计为功能服务。本人也是模仿他的爱好者。不模仿者们却只学到了他的美学观点而非其哲学内涵——设计是为市场和最终销售服务的。” Stefan Boublil如是说。事实上，即使是引领互动设计潮流的苹果也并不总是无懈可击的，比如Mac OS里最近一个版本的iCal，这次更新仅仅改变了其外观，而不是改进操作方式，苹果也有走上华而不实道路的时候。

这种趋势是危险的，因为所有华而不实的设计到头来都是无用功。

决定网页的好坏不是视觉上的感观，而是内容。

内容（始终）为王

内容必须永远是第一性的，就算你把软件的启动界面做的再唬人，用户很快就会发现华丽的外表背后是内容的贫乏，然后你的软件最后肯定要太监掉。设计必须是互相联系的，“看上去很美”对所有软件和网站都很重要，但是除此之外，必须还要有其他的东西。

Min是一款可以去除网页上的所有装饰和字体设置并重新排版的书签软件。

相对于从前那种整个页面充斥着广告，阅读性低下的时代，在如今的互联网阅读与讨论环境中，用户被赋予了更高的选择内容与表现方式的自由，用户从此可以选择以自己喜欢的方式组织阅读环境。这种趋势被Cameron Koczon 称为“Orbital Content.” ，一些评论家因此认为（网页）设计从此将没落下去——然而事实并非如此，设计反而因此变得前所未有的重要。传统的设计方式无法为内容提供一个好的阅读环境并不代表新的也不行。类似Readability 和 Instapaper 等软件就是营造新阅读环境的先驱。

形式体现功能

在1918-1933年间，包豪斯主义的旋风在世界范围内把所有形式繁杂的设计风格给刮的一干二净，它尝试着通过简单而能体现产品本身特色的设计，并且获得了成功。

“包豪斯的哲学在于排除一切不必要的干扰，形式必须体现功能。它要求的是纯净的体验。在最近的交互设计界，这种风潮也正在流行。”——Rahul Sen

越来越多的用户体验设计师与事务所尝试着通过类似包豪斯主义的方法来着手设计，其中最有名的莫过于微软，其在移动领域WP7平台就是这种简单、注重内容而非形式、功能导向的界面的代表。

Flipboard与Windows Phone 7 的界面是如此干净。

对于在设计好的功能上添加设计这种方式，有一句话能很好的概括：“形式跟随功能。”把这句名言掉了个头来形容上述新设计理念：“形式体现功能。” 我认为设计师应该通过所设计的形式去影响用户的交互体验与行为习惯，如果一个网页/软件看上去极端不友好，那么其设计就是失败的。设计只应该出现在该出现的时刻与位置，在大部分时间里，设计是不应该被明显的感觉到的。

设计最终产品，而不要只设计完稿

这是将“用户体验”与“终端体验（真正的用户体验）”统一的唯一方法。最终产品（网页、应用）永远应该是最重要的，照着客户的要求堆上一堆功能然后交了完稿就撒手不管的事儿在设计界太常见了。在视觉设计领域，这一点还并没有引起很大的重视，这也是交互设计师存在的原因，设计不能只是把demo做的看上去牛逼足够交给客户就够了，然而这才是当下设计界的常态。你可以说客户不懂设计要求不合理，你也没有办法——批评别人很容易，自己做到很难。

尝试着这样来改变一下思维：

1. 想象一下你的设计最终会被讨论、被应用在地球上某个遥远的角落。
2. 相对于上传作品的截屏，你可以让大家看到作品从草稿到完稿的整个制作过程。你的作品并不仅仅是一堆看上去好看的像素，个重要的是发现和解决问题的过程。
3. 对待设计的态度不能仅仅想着如何交上完稿，而是应该考虑最终产品与终端体验。

记住当我们的设计徒有其表时，我们作为设计师与用户体验师就已经失格了

而且当你完成网站最终建设，网页上一些元素看起来和设计图中相对应元素不完全一样，除了切页时的问题外，客户端的浏览器也是有一部分原因，浏览器上会发现有些字体定位上的细微的区别。

现在，我们可以使用HTML5和CSS3来解决这些问题，HTML5有新的布局元素，CSS3有更加强大的选择器和样式，而且把这两者结合起来，我们能快速设计出简单的布局。从此，我们不再使用PHOTOSHOP。


使用HTML5快速布局

HTML5包含一整套优秀新的结构元素，使用这些结构元素能快速开发出更少类和id标识。一旦理解了这些元素的目的，就能在几分钟内创建粗略的网页布局。

新的元素：

• article标签  构造了文档、页面或者网页的独立分段，适用于放置新闻、博客贴子和论坛贴子和各条评论。
• section标签 用于显示文章或应用的通用分段，比如一个章节。
• header 标签用于显示分段的标题。标题的内容不仅仅只有分段的标题，比如，还可以加入副标题、版本历史信息和署名。
• nav 标签包含了导航链接的部分，同时适用于网站导航和表格内容。
• aside 标签是用于定义和内容相关的内容，对于标记出侧边栏很有用处。
• footer标签标记分段的页脚。特别是包含一些关于分段的详细信息比如作者名，相关文档链接和版权数据。

这些标签和div没有尺度大小且不可见，除非你设置标签样式属性或在其中填写内容。为了使这些标签有效，必须暂时给这些标签设定高度属性。我们应该设置HTML标签属性display: block;；这样浏览器就能识别标签，额外的工作由IE完成。

article, header, nav, aside, section, footer {display: block;min-height: 100px; }

在定位标签之前，布局必须是可视化，没有包含任何内容。理想的方法应该是易于稍后移除而且不会影响设计。

方法1: 大纲

设置outline 可以兼容所有浏览器，而不会影响标签的宽度，但会改变border 属性

article, header, nav, aside, section, footer {outline: 1px solid #000; }

方法2: HSLa

HSLa是标签层级的很好表示，因为透明度能使层叠标签变暗。但是如果是使用实体模型基本背景颜色，那么这个方法就无效了。

article, header, nav, aside, section, footer {background: hsla(200, 30%, 30%, .4); }

定位

定位标签的选用在于个人偏好问题，你有足够多的选择：浏览器或操作系统的尺度属性，背景网格图片（我已选用），带有网格和布局辅助功能的CSS框架，或是Dreaweaver这样的软件。定位是最重要的一部分，必须从一开始就正确使用。这儿写的代码会保留在最终作品。

在我的示例中，我给页面一个固定的宽度，左侧侧边栏和右侧内容，两者在页头和页脚之间。

body > article {width: 760px;margin: 0 auto; }article article {overflow: hidden;width: 750px;margin: 20px 0;padding: 5px; }aside {width: 150px;float: left; }section {float: right;width: 590px; }

整个过程，我能看到每个分段和每个分段显示在哪里。下面是结果：

直到完成最终作品前不要担心浏览器的兼容性。我强烈建议做些注释而不是CSS评论，标记一下哪些必须回头检查，主要是对特定浏览器有附加要求的选择器和属性。

初始化内容

布局完成之后，你可能必须添加示例内容。如今大部分普遍做法是页面填入“Lorem lpsum”块和水印的公式化图片。为什么不改变一下做法呢？

HTML Ipsum 是一个很优秀的网站，在需要公共标记的区域填入“Lorem lpsum”文本。在一个页面囊括所有东西不能比这更容易了。

PlaceHold.it 提供你需要的任何大小图片的链接请求调用，比如，http://placehold.it/350x150，第一个值是宽度，第二个值是高度。

除了更可爱的图片之外，PlaceKitten和PlaceHold.it运营完全一样：

你可以为地图添加高级的Javascript的代码，取用地图图片，而不是Google的静态地图。这要求有个API密码或唯一的签名，无论如何都必须获取密码或签名，如果想要最终作品中包含一张地图。

模拟的行为

现代网站包含功能难以通过静态框架实现：扩展折叠的标签，转换，拖拉，动态按钮等。无论如何，你最终必须使用Javascript库，载入一个Javascript库和编写基本功能应该不能冲突。

通过网站载入jQuery减少了一次下载.使用一些函数模仿意要实现功能取代编写实际代码。比如，点击一个链接时，显示出一个标签（登入窗口或是交互表单），然后在窗口快速创建一个线框，
默认是隐藏的，使用jQuery点击显示。

只要你做好足够多工作模仿这些行为，客户端将可以看到它们的效果，而不是必须在一大堆图表或解释做大量的工作。
 

模拟的状态

假如你正在为一个web应用创建框架时，你可能想要快速显示一个简单页面的几种状态。你可以创建框架的几个不同的拷贝，每个更改成特别的状态，或可以使用 PolyPage。

PolyPage 是jQuery的一个插件，能使你能在你使用类的标记中表现不同的状态，比如，登录或退出。你可以用一个链接切换各个状态，从而帮助你无需多个页面轻松地演示不同的客户端。

总结思路

最初的设计在纸上或PDF格式看起来外观华丽，从一开始创建HTML页面有几个优点。

节省了用于设计代码重构的时间。避免疑惑为什么最终作品看起来和原始的不完全一样。节省你和客户端双方时间，金钱和神经。

HTML5标准预计是在2022年向全世界发布，虽然目前距他发布的日期还有3年左右的时间，但是我认为它距离我们并不是那么遥远，目前很多网站的设计和开发都是在采用HTML5的标准。在HTML5标准的制定和推广方面，苹果、Google、Opera和Mozilla等知名的浏览器厂商都表现的比较积极，微软现在也开始付出行动了，从上周微软在技术大会公布的IE9细节来看，微软将采取一种谨慎的态度涉足网页标准。微软也曾表示：IE浏览器将以标准HTML5为核心。但是微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的，我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。

让IE(包括IE6)支持HTML5元素，我们需要在HTML头部添加以下JavaScript，这是一个简单的document.createElement声明，利用条件注释针对IE来调用这个js文件。Opera，FireFox等其他非IE浏览器就会忽视这段代码，也不会存在http请求。

上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。

这个html5的js文件是作者把他放在Google code project上提供给大家可以直接调用的，当然，如果觉得这样会影响你的网页打开速度，你可以把html5的js文件直接下载下来让后上传到自己的服务器单独调用。

以下是html5的js文件中的代码:

(function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,
eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,
output,progress,section,
time,video”.split(’,'),i=e.length;while(i–){document.createElement(e[i])}})() 

除了在网页中调用包含以上代码的js文件来让IE浏览器支持HTML5元素以外，你也可以以下面这种方式把代码直接添加到网页中。

IE开发经理艾德里安巴特曼（Adrian Bateman ）就曾表示，IE团队希望分享自己对HTML5的看法，并参与制定该标准的讨论。巴特曼表示，尽管目前IE团队更多是提出问题，而非给出解决办法，但是公开讨论正是推动HTML5发展的最佳方式。相信无论IE浏览器是否能够继续支持HTML5标准，HTML5标准在全球广泛的使用已经是大势所趋。

<!–[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,
eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,
output,progress,section,
time,video”.split(’,'),i=e.length;while(i–){document.createElement(e[i])}})()
</script>
<![endif]–>

(function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,
eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,
output,progress,section,
time,video”.split(’,'),i=e.length;while(i–){document.createElement(e[i])}})()

<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>

　　 如果你想做一个网店，你最应该考虑如何设计你的电子商务网站从中获利。你可以在市场上以合理的价格出售最好的商品，但在网络上，如果你的网站设计简陋，即使商品质量非常棒，你的销量也会大打折扣。因此，原文作者Adrian 在推荐分享《10个开源/免费的电子商务平台》后，又分享了10个有助于你设计电子商务网站的技巧，它可以增加你的销量，并且正确引导你的生意。

　　 1. 清晰和“整洁”的界面

　　 我想你已经有了网上经营的经验，作为客户你也明白在网上开始做生意最重要的就是设计精美的网站。设计精美的网站，可以方便用户购物，并会经常光顾与此。

　　 2. 明智选择供货商

　　 你需要找到最好的电子商务网站的供货商。这是整个过程的重中之重。简单的网上调查既节省时间也节省金钱。网络是一个巨大的资源，无论什么方面，它都会帮你做出正确的决定。

　　 3. 速度意味着一切

　　 我相信你赞同我的观点，速度之所以重要是因为，没有人愿意花太多时间去寻找项目。因此，不要忘记，你的网站必须易于使用，你的结账程序一定要简便。否则，客户宁愿去别处购买，也不愿填写大量的表格。

  　　 4. Calls to action 行动号召

　　 设置一些令人振奋的行动号召，吸引客户跳转到新的窗口，这比在网页上添加简单的按钮更有效。但是同一网页上，不要设置太多的活动信息。那会导致客户无法决定购买所需商品，以至于离开你的网站。

  　　 5. 色彩影响情绪

　　 无需解释颜色对人们情绪及行为的影响。网站设计就是最好的证明。避免使用太刺激的颜色。淡蓝色和绿色都不具有威胁性，是不错的选择。例如，绿色就适合是用来表示打折或降价。

  　　 6. 广告促进销售

　　 在客户网购的同时，为其推荐目标产品以外的其他产品，是电子商务的一大契机。但是电子商务网站不要发布过于令人厌恶的广告，合理利用就可以增加你的销售量。

  　　 7. 当前位置导航栏 Breadcrumbs

　　 当前位置导航栏是用以指示客户在网站中的位置。这些导航既可以设置在网页顶部也可以在网页边上。这会为客户创建一个大大方便的购物体验。

 

  　　 8. 易于注册

　　 简化注册过程。无需录入客户太多信息。事实上，向网站的会员取得联系只需通过电子邮件就可以了。

  　　 9. 慎重定价

　　 当然，价格合理是买卖成功的一方面。定价合理并具有竞争性非常重要。无需解释，薄利多销要远远好过于囤积居奇。电子商务网站的设计与改进要旨在向客户展示出你的网站是最好的交易平台。

　　 10. 测试

　　 了解网站的运营情况十分重要。你可以雇佣一名自由职业的网站测试员，或者由专门的公司来对网站的可用性进行测试。只有这样才可确保你的网站不存在问题，从而开展你的在线业务。



　　译文出处：伯乐在线 - 职场博客 - 美工设计
　　译文链接：http://www.jobbole.com/entry.php/698

　　原文：Adrian　文章推荐：关关　　翻译：伯乐在线  - 敏捷翻译 - 祝佳

 

拜佛完毕，便四处游览，忽见一门廊上四幅水墨，其中一幅上题字如下：人在世间，爱欲之中，独生独死，独去独来。当行至趣，苦乐之地，身自当之，无有代者。

阅毕此句，黯然神伤，独坐阶前，唏嘘不已。

这段话是从《无量寿经》里摘录出来的。意思就是人在这个世间，因为我们都贪图五欲，所以都在“爱欲之中”。但其实都是“独生独死，独去独来”，说的是多么的有道理阿，这并不表示我们死的时候才是独死、才是独去，连我们生的时候，也是独生独来。“独生独来”是指我们即使有六亲眷属，恩爱、和合在一起，但其实也是孤独的，因为往往我们的心事，很难有一个知交能让我们倾诉。就像我爱听的那首歌里有一句话叫“心事谁人知”，我想很多人都会与我有同感。

想王某此生，毁就毁在一个“情”字上，爱欲贪大，索求甚多，正所谓物极必反，苦寻苦求终究不过一场虚空，于今观已，所得所受，正应了画上那句偈语。情欲会让人迷失本性，爱欲会使人愚痴愚蔽，我浪费了那么多的时间都在爱恨情仇中痛不欲生，把自己折磨得神经兮兮，设若没有如此这般的情劫，亦能前程似锦，于今日有过之而无不及，然而，我又能怪罪于谁呢？是自己让自己执迷不悟，前程尽断，只能自因自果，自作自受而已。

又想起佛经中讲人有八苦，分别是生、老、病、死、怨憎会、爱别离、五阴炽盛、求不得。

生、老、病、死，是自然生理上的痛苦；怨憎会、爱别离、五阴炽盛和求不得，是精神上的痛苦。怨憎会，就是和怨恨、憎恶的人或事物在一起，无法摆脱，是一种痛苦；爱别离，和自己亲爱的人分离，是一种痛苦；五阴炽盛苦。五阴即色受想行识。‘炽’，火热也。盛，众多也。阴，障蔽也。是说这五种法能障蔽吾人本具妙觉真心，使之不得显现。求不得，想得到的东西却总是得不到，又是一种痛苦。

生老病死世人皆无可避免，只是这“求不得”之苦，应是可以凭主观意志免除的。奇怪的是，古往今来，上至达官显贵，下至平民百姓，大都是在这“求不得”上苦苦折磨自己。或费尽心机，或使尽伎俩，或机关算尽，或明争暗斗，最终是“反害了卿卿性命”。
原本渴求的东西，却远远的只可观，而不能走近，甚至观而不得，只可放在心底。欲罢不能，欲求不得。情绪里不免伤心，焦灼和懊悔。

古语讲;凡事有度，若一味的痴迷于情爱，就好比逆风执炬，必惹火烧身。不读佛经，难知此理。

一世执迷，悔不当初，如今蒙偈开示，当知缘尽色空，自此深有所悟。