一个食品加工出口商城项目，首页模块以产品展示为主

常州南拓轴承的英文版设计，没有太多的修饰，主要突出产品的展示，图片上用的很少，就是大色块的运用，可以直接写代码。

之前看了点css3的资料，于是动手。

现在贴出我工作中的下拉导航简单demo，你可以自己再扩展，在www.cosplaypub.com可以看到这个导航，但要等到最新网站上线，现在还是旧的：

.menu {
width:953px;
height:40px;
background:#8FBD04 url(ico.png) 0 0 no-repeat;
position:relative; 
margin:0;
font-family:arial, tahoma, geneva, verdana, sans-serif;
}

.menu ul {
padding:0; 
margin:0;
list-style-type: none;
clear:both
}

.menu ul li {
float:left;
text-align: center;
width:88px;
}
.menu ul li.home {
background:#678603
}

.menu ul li a, .menu ul li a:visited {
display:block; 
text-decoration:none; 
color:#fff; 
width:88px;
height:40px;
font-weight:bold; 
line-height:40px;
}

.menu ul li ul {
display: block;
position: relative;
height: 0;
overflow: hidden;
opacity: 0;
-webkit-transition: opacity .25s linear 0s, height .25s ease-out .1s;
-moz-transition: opacity .25s linear 0s, height .25s ease-out .1s;
transition: opacity .25s linear 0s, height .25s ease-out .1s; 
}

.menu table {
margin:-1px; 
border-collapse:collapse;
font-size:1em;

}

.menu ul li:hover a,
.menu ul li a:hover {
color:#fff; 
background:#678603;
-moz-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
-webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;、

}
.menu ul li:hover ul,
.menu ul li a:hover ul {
width:700px;
border:2px solid #8FBD04;
border-top:0;
background:#fff;
text-align:left;
height:100px;
opacity: 1;
-webkit-transition: opacity .25s linear 0s, height .25s linear 0s;
-moz-transition: opacity .25s linear 0s, height .25s linear 0s;
transition: opacity .25s linear 0s, height .25s linear 0s; 
}

.menu ul li.px:hover ul,
.menu ul li.px a:hover ul {
width:200px;
height:160px;
}
.menu ul li:hover ul li,
.menu ul li a:hover ul li{text-align:left;width:200px;}
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block; 
color:#000; 
border:0;
margin:0;
font-weight:normal; 
font-size:0.9em;
height:auto; 
line-height:1em; 
padding:5px 0 5px 15px; 
width:200px;
}
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover { 
color:#8FBD04;

}

<div class=”menu”>

<ul>

<li class=”home”><a href=”">HOME
<!–[if IE 8]><!–>
</a>
<!–<![endif]–>

</li>

<li><a class=”drop” href=”">COSPLAY
<!–[if IE 8]><!–>
</a>
<!–<![endif]–>

<table><tr><td>

<ul>
<li><a href=”">zero dollars </a></li>
<li><a href=”">wrapping text around</a></li>
<li><a href=”">styled form</a></li>
<li><a href=”">active focus</a></li>
<li><a href=”">shadow boxing</a></li>
<li><a href=”">image map for </a></li>
<li><a href=”">fun with background </a></li>
<li><a href=”">fade scrolling</a></li>
<li><a href=”">em image sizes </a></li>
</ul>

</td></tr></table>

<!–[if lte IE 6]>
</a>
<![endif]–>

</li>
<li class=”px”><a href=”">LOLITA
<!–[if IE 8]><!–>
</a>
<!–<![endif]–>
<table><tr><td>

<ul>
<li><a href=”spies.html” title=”a coded list of spies”>a coded list of spies</a></li>
<li><a href=”vertical.html” title=”a horizontal vertical menu”>vertical menu</a></li>
<li><a href=”expand.html” title=”an enlarging unordered list”>enlarging unordered list</a></li>
<li><a href=”enlarge.html” title=”an unordered list with link images”>link images</a></li>
<li><a href=”cross.html” title=”non-rectangular links”>non-rectangular</a></li>
<li><a href=”jigsaw.html” title=”jigsaw links”>jigsaw links</a></li>
<li><a href=”circles.html” title=”circular links”>circular links</a></li>
</ul>

</td></tr></table>

<!–[if lte IE 6]>
</a>
<![endif]–>

</li>

<li class=”px”><a href=”">COSTUMES
<!–[if IE 8]><!–>
</a>
<!–<![endif]–>
<table><tr><td>

<ul>
<li><a href=”" title=”A drop down menu”>drop down menu</a></li>
<li><a href=”" title=”A cascading menu”>cascading menu</a></li>
<li><a href=”" title=”Using content:”>content:</a></li>
<li><a href=”" title=”:hover applied to a div”>mozzie box</a></li>
<li><a href=”" title=”I can build a rainbow”>I can build a rainbow with transparent borders</a></li>
<li><a href=”" title=”Snooker cue”>a snooker cue using border art</a></li>
<li><a href=”" title=”Target Practise”>target practise</a></li>
</ul>

</td></tr></table>

<!–[if lte IE 6]>
</a>
<![endif]–>

</li>

<li class=”px”><a href=”">LINGERIEL
<!–[if IE 8]><!–>
</a>
<!–<![endif]–>
<table><tr><td>

<ul>
<li><a href=”" title=”Example one”>the first example for Internet Explorer</a></li>
<li><a href=”" title=”Weft fonts”>weft fonts</a></li>
<li><a href=”" title=”Vertical align”>vertically aligning text</a></li>
</ul>

</td></tr></table>

<!–[if lte IE 6]>
</a>
<![endif]–>

</li>

<li class=”px”><a href=”">IN STOCK
<!–[if IE 8]><!–>
</a>
<!–<![endif]–>
<table><tr><td>

<ul>
<li><a href=”" title=”colour wheel”>a colour wheel using opaque colours</a></li>
<li><a href=”" title=”a menu using opacity”>a menu using opacity</a></li>
<li><a href=”" title=”partial opacity”>partial opacity</a></li>
<li><a href=”" title=”partial opacity II”>partial opacity II</a></li>
</ul>

</td></tr></table>

<!–[if lte IE 6]>
</a>
<![endif]–>

</li>
</ul>

</div>

这个导航效果中主要用到了css3的transition属性，先来看下transition属性的介绍。

w3c标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”

语法:

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性值

一、transition-property:

语法：

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*

transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。其对应的类型如下：

1、color: 通过红、绿、蓝和透明度组件变换（每个数值处理）如：background-color,border-color,color,outline-color等css属性；

2、length: 真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性；

3、percentage:真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性；

4、integer离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生 如：outline-offset,z-index等属性；

5、number真实的（浮点型）数值，如：zoom,opacity,font-weight,等属性；

6、transform list:详情请参阅：《css3手册》

7、rectangle:通过x, y, width 和 height（转为数值）变换，如：crop

8、visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility

9、shadow: 作用于color, x, y 和 blur（模糊）属性,如：text-shadow

10、gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画,如：background-image

11、paint server (SVG): 只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似

12、space-separated list of above:如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化

13、a shorthand property: 如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化

具体什么css属性可以实现transition效果，在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型。这里需要提醒一点是，并不是什么属性改变都为触发transition动作效果，比如页面的自适应宽度，当浏览器改变宽度时，并不会触发transition的效果。但上述表格所示的属性类型改变都会触发一个transition动作效果。

二、transition-duration:

语法：

transition-duration ： <time> [, <time>]*

transition-duration是用来指定元素 转换过程的持续时间，取值：<time>为数值，单位为s（秒）,可以作用于所有元素，包括:before和:after伪元素。其默认值是0，也就是变换时是即时的。

三、transition-timing-function:

语法：

transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

取值：

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值：

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（该值允许你去自定义一个时间曲线）。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.

其他几个属性的示意图：

四、transition-delay:

语法：

transition-delay ： <time> [, <time>]*

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值：<time>为数值，单位为s（秒），其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。 默认大小是”0″，也就是变换立即执行，没有延迟。

有时我们不只改变一个css效果的属性,而是想改变两个或者多个css属性的transition效果，那么我们只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：transition-delay与transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的怭值为transition-duration第二个为transition-delay。如：

a { -moz-transition: background 0.5s ease-in,color 0.3s ease-out; -webkit-transition: background 0.5s ease-in,color 0.3s ease-out; -o-transition: background 0.5s ease-in,color 0.3s ease-out; transition: background 0.5s ease-in,color 0.3s ease-out; }

如果你想给元素执行所有transition效果的属性，那么我们还可以利用all属性值来操作，此时他们共享同样的延续时间以及速率变换方式，如：

a { -moz-transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in; }

综合上述我们可以给transition一个速记法：transition: <property> <duration> <animation type> <delay>如下图所示：

相对应的一个示例代码：

p { -webkit-transition: all .5s ease-in-out 1s; -o-transition: all .5s ease-in-out 1s; -moz-transition: all .5s ease-in-out 1s; transition: all .5s ease-in-out 1s; }

浏览器的兼容性:

因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器IE全家都是不支持，另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用transition时我们有必要加上各自的前缀，最好在放上我们W3C的标准写法，这样标准的会覆盖前面的写法，只要浏览器支持我们的transition属性，那么这种效果就会自动加上去：

//Mozilla内核 -moz-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*  //Webkit内核 -webkit-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*  //Opera -o-transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*  //W3C 标准 transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

Google的设计一向以简单著称，让页面清爽优雅地呈现，一方面节省了页面载入的时间，减少用户的等待，另一方面也减少了用户在浏览页面时的分心。然而，在这简单的设计背后，并不是设计师偷懒，而是更加灵敏、细致、轻便的交互体验设计。Google+作为社交网络的又一力作， 在继承了公司著名的十大设计准则下，在如何更轻、更快速、更人性化方面有了很大的突破。本文主要以社交网络为例，分析总结出了六条让web体验更灵动的设计方法，供大家参考。

1.图形化的导航

社交网的信息十分繁杂，因此导航的引导就显得至关重要。没有公司比Google更大胆了，将导航的tab全部简化成icon，只有鼠标hover上去的时候才会显示这个tab的注释。显然，这对新手用户而言，有一定的学习门槛的，但是我们从中无不从中感受到了简洁的力量，图形化导航让整栏显得干净整洁，功能集中，切换方便。

纵观国内外几大主流社交网的导航，导航大多采用的是文字，虽然从功能上看一目了然，但是由于文字本身不够简洁，排布起来有局限，那么只好在设计的时候，更要考虑功能的归纳分布以及优先级展示，隐藏不常用的功能。

2.使用灰色按钮

经常做设计的人都知道，灰色按钮代表着是被禁用的功能，是不可点击的。然而Google+却大胆的使用了灰色按钮，通过鼠标hover告诉用户这是可点的。仔细想来，这用做以下两个原因：一、平衡了页面的配色。由于Google的logo主题色有四种，如果让按钮们默认展示原有的颜色，页面会看起来很花，没有重点。像这样灰掉的处理，使选中的tab更加突出，也不会带来干扰。二、按钮由灰点变彩色的方式给人一种点亮图标的暗示，增强了用户点击按钮的欲望。

从图标的发展趋势来看，无论颜色还是形态都是朝着简洁方向走的，过去花花绿绿的图标已经失去了它原有的标识感，纯色的图标应用起来会显得更上流，更高端。

3.鼠标所到之处均有反馈

网页上的大多数元素，在鼠标滑过的时候，都应该有其相应的反馈。无论是仅仅发生鼠标指针变化，还是出现下划线，或是结合一些简单功能的操作和注释来显示。设计师在做静态设计稿时，很容易忽略这些设计细节，但这正是一个产品体现良好交互性能的关键时刻。就好比和人交谈，如果他对我的话语没有任何反映，我也会减少对他诉说的兴趣，如果他时而点头，时而微笑，时而赞许，那么我可能会有更多更有意思的事情告诉他。因此，哪怕仅仅是边框的颜色变深了一些，也能表达这个页面对用户是友好的，而不是不理不睬的。

hover态是展示用户在当前页想知道的相关内容的最佳时机。例如鼠标划到头像时，会出现那个人的相关信息等。Hover态还可以对某一模块有强引导的作用，例如Google会强调它的搜索功能。另外，还可以用于隐藏一些不常用的操作，例如删除等。

4.简单任务在当前页完成

这里最值得一提的是Google+加好友和分组的流程优化。原本加好友和分组是两个独立的任务，分组是在对方同意加好友时才能进行，由于Google+推出的是单向关系链，因此将分组可以提前到添加好友这一步做。原本加好友是需要点击按钮，如今只用hover上去就会出现分组框，大大降低了加好友和分组的操作门槛。用户最少只要点击一下即可完成两步步骤。如今Face book等一些双向关系链的社交网也开始学习这种快速加好友和分组的方式。

5.feed实时滚屏更新

Feed就是我们的每天订阅的新消息。相信大家对下面的小黄条都不陌生吧，国内大部分网站都是采用点击小黄条来查看新的消息，而Google+是自动滚屏的方式展示最新消息，并在左侧出现一条蓝竖线，表示是最新更新。Google的设计之所以显得灵动，还有一个重要的原因，在于它的这些状态的改变都伴随着优雅的动画，而不是赤裸裸的出现、消失。包括feed的评论和赞，都是实时更新，配上简单华丽的动画，简直就像在看现场直播。

6.即时的系统反馈

类似上图中的提示条在整个网站都是统一一致的，它们都是自动出现，自动消失，有的还肩负着简单的操作，例如图中的撤消等。有了这样轻便的系统反馈，就不会再出现弹窗等很重的反馈方式，页面的交互就显得轻便流畅许多，无时无刻不在安抚着用户焦躁的情绪。
综上所述，本文从灵敏轻便的角度，对Google+的体验进行分析，总结出以上六点让web更轻便灵敏的设计方法，希望能给大家带来一些参考。

1. 设定宽度和高度，父层为 position:relative; CSS写法:

position:absolute;left:50%;top:50%;
margin-left:-元素自身宽度的一半;
margin-top:-元素自身高度的一半;

2.table, 用起来就更简单了, 只要添加:

text-algin:center;
vertical-align:middle;

3.提供模板化的CSS class方法, 规则如下:

<div style="width:500px"> <!-- 记得加宽度, 不要写行内样式, 这里只是一个提示 -->
     <div>
             <div>
                   <!-- your code -->
             </div>
     </div>
</div>

.sl-hvalign{
	display:table;
	overflow:hidden;
	margin:0 auto;
	height: 100%;
	*position:relative;
}

.sl-hvalign-cnt{
	display:table-cell;
	vertical-align: middle;
	*position:absolute;
	top:50%;
}

.sl-hvalign-cnt-inner{
	*position:relative;
	*top:-50%;
}

去除虚线框

一般情况下，链接的 outline 可以不去除。如果 outline 形状极丑陋的情况下，视觉效果很差，则使用些方法：

1.IE 添加 HTML 属性 hidefocus=”true”

2.Firefox按钮

/* for Firefox */
input[type=submit]::-moz-focus-inner,input[type=button]::-moz-focus-inner{
  border : 0px;
}
/* for IE8 */
input[type=submit]:focus, input[type=button]:focus{
    outline : none;
}

IE z-index bug

解决方法：

两个元素的平等级别祖先元素z-index高的，显示于上面。俗称：后台硬占据最高点。

祖先元素必须是同一级别的，比如比较两个 span 谁盖在上面，应该比较的不是 p 和 li 的 z-index，而应该是 li 与 li 这两个平行级别的元素：

<

pre>
<ul>
<li>
<p>
<span> 第一个元素 </span>
</p>
</li>
<li>
<span> 第一个元素 </span>
</li>

无意在Flickr上发现的一些手绘稿的照片，很有感觉，发上来看看。

我们先来看看在透明PNG图片在Mozilla firefox和Internet Explorer 6中的显示差异:

Mozilla Firefox

PNG透明图片在Mozilla Firefox下显示良好。

Internet Explorer 6

在IE6中这张PNG图片的背景却是一片灰白,真的很难看，除非你的网页背景色就是一片灰白:)

解决方法

首先，为你的图片外套一个DIV层，像这样:

<body> <div class=”flower”></div> </body>

然后，在CSS文件里面写入:

body {background-color:#000}

div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}

这是指Mozilla Firefox,要让其在IE6下面正常显示，你应该在<head>和</head>之间写入:

<!–[if gte IE 5]>

<style type=”text/css”>

div.flower {

background:none;

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’);

}

</style>

<![endif]–>

这样，就OK了,下面是加了上面代码后的IE显示图: