在页面底部添加固定信息栏，类似于本博客所示效果

发表于 更新于

以前我也不知道我的博客浏览器页面底部的这个灰色固定的信息条是怎么实现的，今天没事就在网上查了一下，结果发现原来这个东西真的很容易。我本以为会用到javascript或者jquery之类的东西，结果没有想到只要简单的CSS即可。

下面就稍微详细给大家说一下如何实现吧，其实原理很简单。将底部这个小长条固定在页面的底部涉及到的核心CSS代码就是

#footer{

position:fixed;

bottom:0;

}

position:fixed是将小条固定，bottom:0 是小条距离底部是0，就是一直贴在页面底部。

如果你想让这个小条有些透明，就可以加上：

filter:alpha(opacity=75);

1
opacity:0.75;

第一行的是支持IE7这样的浏览器，第二行是支持firefox,chrome这样的浏览器，具体的IE9以前的浏览器是否可以实现透明效果我没有试过，因为我用的是IE9。应该是可以的。

然后稍微美化一下小条：

width:100%; //让小条铺满底部宽度，还必须加上 left:0;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

  background:#65676a; //设置小条背景颜色为灰色



  left:0;              //让小条在底部铺满



  color:white; //设置字体为白色，好看些



  height:20px; //设置小条高度


注意：这里的“//”不是CSS里面的注释，我这样写只是为了方便罢了，请柬上面的所有代码都写到#footer 这个选择器里面。

好了，大概就写好了，大家请看我写的这个效果吧，很烂，只是实现了这个功能。如果部分浏览器下不行，请大家说一下哦。


  示例：点我 在网页右键选择查看源代码，即可查看网页完整源代码。我用的是HTML 5写的。