效果直接看这个Blog……
优点：
- 美观，这也是最重要的一条
- 对于没有Navbar的Blogger 方便登录，查看自己的登录状况
对于管理员还可以快速使用 新建帖子和自定义 的功能
- 不能很好的支持IE
在IE中解决办法只有用if IE的注释修正显示
没有自动隐藏的特效
浏览器兼容性
- Mozilla Firefox - - 测试通过
- Google Chrome - - 测试通过
- Apple Safari - - 测试通过
- Opera - - 测试通过
- IE 8 - - 无法正常显示（Micro$oft真是……）
CSS Style代码如下（/* …… */ 为注释）：
/* 先在在模板的Style部分添加如下代码
建议给html加上margin-top:5px!important;的属性，这样不影响原页面结构 */
#navbar-iframe{opacity:0.5;position:fixed;top:-25px;left:0;z-index:1;}
/* 默认位置在窗口中上对齐，左对齐，且向上平移25px，透明度50% */
#navbar-iframe:hover{opacity:1.0;position:fixed;top:0;left:0;}
/* 鼠标悬停在Navbar上时位置在窗口中上对齐，左对齐，不透明 */
- P.S.
这段代码中之所以要写上top:0;left:0;是为了保证不和模板中的CSS定位发生冲突导致位移
IE修正用代码
改了半天代码IE就是不认#navbar-iframe:hover……
结果不能自动隐藏，只能固定隐藏，实在是很不美观
因而无法实现自动隐藏Navbar
所以给出2种代码，一种正常显示，一种直接屏蔽
请将代码贴到<body>…这里…</body>
最好是<body>的开头
- IE中原样显示Navbar的代码
<!--[if IE]>
<style type="text/css">
#navbar-iframe{position:static}
</style>
<![endif]--> - IE中屏蔽Navbar的代码
<!--[if IE]>
<style type="text/css">
body{margin-top:0px;}
#navbar-iframe{display:none;}
</style>
<![endif]-->
body{margin-top:0px}是去掉页面中Navbar占用的高度的
2 comments:
太深哦
可能真的是有一点深……
但是比起最近写的Bottom Bar的代码
还是很浅显易懂的……
Post a Comment