如何在 www.wtoclan.com 上制作 CSS 底栏 [关闭]答案

【问题标题】：How to make a css bottom bar like on www.wtoclan.com [closed]如何在 www.wtoclan.com 上制作 CSS 底栏 [关闭]
【发布时间】：2011-02-04 01:19:07
【问题描述】：

你怎么做这样的酒吧？

【问题讨论】：

标签： css user-interface navigation navigationcontroller

【解决方案1】：

这是一个好的开始：

<div style="position: fixed; bottom: 0; background-color: #ccc;">Hello</div>

【讨论】：

这很有帮助，但我知道如何制作一个像我想要的那样具有鼠标悬停透明度等的。
透明度有点棘手，并且在不同的浏览器中处理方式不同。见这篇文章：css-tricks.com/css-transparency-settings-for-all-broswers
@Will - 那么也许可以详细更新您的问题？

【解决方案2】：

如果您在评论中添加带有链接的第一个答案，这是一个示例。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Hello!</title>
</head>

<style>
#TransparentDiv{
    position:fixed;
    bottom:0;
    background: #ccc;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

#TransparentDiv:hover{
   filter:alpha(opacity=100);
   -moz-opacity:1;
   -khtml-opacity: 1;
   opacity: 1;
}
</style>

<body>

<div id="TransparentDiv">Hello World - Some more text to make this easier to read.</div>

</body>

</html>

【讨论】：