仿 Windows 7 资源管理器风格的网页设计

［用live writer发完，发现格式乱了，图片也看不到，你可以到http://www.liuhaifeng.com/2010/01/design-win7-alike-web-page.html查看完整版］

 

Windows 7 的华丽界面吸引了不少爱美之人，我们网页上是否也可以做出类似的效果呢？答案当然是可以！事实上，我刚刚完成了这个设计，正好做个技术笔记。

我们要实现目标，主要是两部分，一是半透明的标题栏与粗边框，二是导航菜单。参考下图：

Windows 7 资源管理器

半透明效果可以用一个额外的层来实现，这个层用CSS定义为半透明。当前主流的浏览器都支持半透明样式，但写法不一样。不过没关系，每种写法都写上，就可以兼容全部浏览器了。我用的代码(通过测试的浏览器为：IE6/xpsp2，IE8/win7, IE8兼容性视图/win7, Firefox3.5.7。如无特别说明，本代码均以这四种测试为准，其它浏览器不保证兼容)如下：

filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;

其中第一个是IE里的写法，中间是firefox（mozilla）的写法，后面一个大概是标准写法了。我不是专业做HTML+CSS，所以也懒得去查了。

单纯的透明效果很好做，但很快会发现，透明层里的子元素也透明了，即使你明确声明它为不透明。所以我前面是说用一个额外的层来实现。我的页面布局是这样的：最外面有一个wrap层，是所有内容的父层，它定义了页面的宽度和在浏览器中居中。在wrap层里，我加了ID为glass-bg的“额外层”，此层使用绝对定位（position:absolute;注意wrap层要使用相对定位：position:relative;）。两个层的CSS代码如下：

#wrap{display:block;position:relative;margin:20px auto;padding:2px;width:960px;background:transparent none;}#glass-bg{position:absolute;z-index:-1;left:-4px;top:-4px;width:100%;height:100%;padding:3px;border-width:1px;border-style:solid;border-color:#BBBBBB #999999 #999999 #BBBBBB;background:#F0F0F0;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;}

我们将glass-bg定位在wrap的(-4px, -4px)处。其宽高均为100%，因为宽高计算不包括padding，所以glass-bg实际尺寸比wrap大了一圈儿，这就是我们要的粗边框了（当然还有别的办法制造这个粗边框，比如wrap与glass-bg一样大，内部内容对齐时留出边距。另外此样式在IE6中无效，解决办法见下文中的JS hack）。

此外最重要的就是“z-index:-1;”了，如不这样指定，此层就成了蒙在上面的半透明层，成了雾状效果了。用-1使此层处于内容元素的下方，这样内容元素即不会“起雾”，也不会半透明（与glass-bg没有父子关系）。效果参考：

半透明标题栏与粗边框效果

可是万恶的IE6不支持这个绝对定位的100%宽高，怎么办？这不是逼我用JavaScript么，还好问题很简单，只需要很短的代码：

window.onload=function(){var wrap = document.getElementById("wrap");var glass = document.getElementById("glass-bg");glass.style.width=wrap.offsetWidth+"px";glass.style.height=wrap.offsetHeight+"px";}

上述代码只适用于页面大小不会动态改变的情况（大多数页面都不会动态改变，除非用JS做了一些局步更新之类），若您用JS做了会改变页面尺寸的操作，请自行写代码刷新玻璃层尺寸。

导航菜单做起来也并不难，只是，万恶的IE中的万恶的IE6，老是逼我写JavaScript。本来可以用纯CSS来做出这个导航菜单的，偏偏IE6又不支持li:hover。

导航菜单大致结构如下：

/all/category/">考利资源
/all/category/games/">小游戏
/all/category/games/">小游戏
/all/category/games/minjie/">敏捷
/all/category/games/jingying/">经营
/all/category/games/xiuxian/">休闲
/all/category/games/sheji/">射击
/all/category/games/yizhi/">益智
/all/category/games/dongzuo/">动作
/all/category/games/special/">小游戏专题

IE6的JavaScript hack代码就是写在li标签中的那两句。相关的CSS没什么难度，无非是li元素横排；隐藏、显示子菜单层。横排可以用浮动，也可以用inline-block。IE6不支持inline-block，可以用zoom和inline模拟，通吃的代码如下：

.inline-block{display:inline-block;zoom:1;*display:inline;}

但是注意，IE6模拟出来的效果与真实的inline-block略有差异。inline-block默认会像其它inline的元素一样，把元素之间的空隙当作空格来计算，但IE6里模拟出来这个，是会忽略空格的。我们的菜单不需要空格，所以如果用inline-block，元素之间一定不要留间隙，回车也不行。

你可能留意到class为shade的层，没错，跟前面讲的玻璃效果类似，这个是给菜单加个半透明的阴影。你还可能留意到一个iframe层，是的，又是被万恶的IE6给逼的。在IE6里，菜单弹出后，鼠标在菜单上滑动，如果滑到下方有链接元素（被菜单遮住）的位置，会触发mouseover使菜单消失。这个iframe层也是放在菜单下面，大小与菜单相同，它就相当于一个隔离层，会隔断下方热点的鼠标事件，因为iframe有着更高的优先级。

看下效果吧：

导航菜单效果图

仿 Windows 7 资源管理器风格一点都不难，我这个外行人都搞定了。当然还有值得改进之处，比如我的导航菜单没有区分目录名与右边的三角，再如可以给glass-bg层指定一个背景图案，这样半透明的同时还有底纹。

如果你想看下页面效果或是源码，可以访问：http://www.kaoly.com/all/

转载请注明出处：http://www.liuhaifeng.com