仿 Windows 7 资源管理器风格的网页设计
2010-01-15 15:43
169 查看
[用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。如无特别说明,本代码均以这四种测试为准,其它浏览器不保证兼容)如下:
其中第一个是IE里的写法,中间是firefox(mozilla)的写法,后面一个大概是标准写法了。我不是专业做HTML+CSS,所以也懒得去查了。
单纯的透明效果很好做,但很快会发现,透明层里的子元素也透明了,即使你明确声明它为不透明。所以我前面是说用一个额外的层来实现。我的页面布局是这样的:最外面有一个wrap层,是所有内容的父层,它定义了页面的宽度和在浏览器中居中。在wrap层里,我加了ID为glass-bg的“额外层”,此层使用绝对定位(position:absolute;注意wrap层要使用相对定位:position:relative;)。两个层的CSS代码如下:
我们将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么,还好问题很简单,只需要很短的代码:
上述代码只适用于页面大小不会动态改变的情况(大多数页面都不会动态改变,除非用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层指定一个背景图案,这样半透明的同时还有底纹。
如果你想看下页面效果或是源码
4000
,可以访问:http://www.kaoly.com/all/
转载请注明出处:http://www.liuhaifeng.com
查看完整版]
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层指定一个背景图案,这样半透明的同时还有底纹。
如果你想看下页面效果或是源码
4000
,可以访问:http://www.kaoly.com/all/
转载请注明出处:http://www.liuhaifeng.com
相关文章推荐
- 网页设计中背景的创意风格与设计趋势
- 30个漂亮的蓝色风格网页设计作品欣赏
- 30个漂亮的蓝色风格网页设计作品欣赏
- 网站文化风格与网页设计
- 30个漂亮的大自然风格网页设计作品欣赏
- 不同风格的网页登录界面设计学习
- 酷站设计:25个喜庆的红色风格网页设计作品
- 20佳优秀的国外简约风格网页设计作品
- 设计 Metro 风格的 GitHub for Windows
- 漂亮的蓝色风格网页设计作品欣赏(系列一)
- 漂亮的蓝色风格网页设计作品欣赏(系列二)
- 最新18个绿色风格网页设计作品欣赏
- 网页设计中背景的创意风格与设计趋势!
- 网页设计中最常见的9种设计风格
- 【产品经理】手绘风格在网页设计中的运用
- 五个Metro UI 风格的网页设计
- 分享简约风格网页设计的技巧
- 优秀网页设计:30佳精美的国外黑色风格网站作品
- 30个漂亮的蓝色风格网页设计作品欣赏