Question

我想在页脚上方做一个固定栏，上面写着：“这个网站是测试版。请将反馈发送到info@blah.com。”

我是CSS的新手并且在努力解决这个问题。

这是我的页脚CSS：

#footer {
  min-height: 60px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #000000;
  background-image: -moz-linear-gradient(top, #4d4d4d, #333333);
  background-image: -ms-linear-gradient(top, #4d4d4d, #333333);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#333333));
  background-image: -webkit-linear-gradient(top, #4d4d4d, #333333);
  background-image: -o-linear-gradient(top, #4d4d4d, #333333);
  background-image: linear-gradient(top, #4d4d4d, #333333);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4d4d', endColorstr='#333333', GradientType=0);
  background-color: #424242;
  background-image: -moz-linear-gradient(top, #4d4d4d, #333333);
  background-image: -ms-linear-gradient(top, #4d4d4d, #333333);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#333333));
  background-image: -webkit-linear-gradient(top, #4d4d4d, #333333);
  background-image: -o-linear-gradient(top, #4d4d4d, #333333);
  background-image: linear-gradient(top, #4d4d4d, #333333);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4d4d', endColorstr='#333333', GradientType=0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
  box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
  box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
  height: 40px;
}
#footer a {
  color: rgb(153, 153, 153);
  text-decoration: none;
}
#footer span {
  font-size: 10pt;
  margin-left: .5em;
  color: rgb(153, 153, 153);
  text-decoration: none;
  text-shadow: 0px 0px 0px
}
#footer-inner {
  padding: 20px 0;
}

基本上我只想在它上面放一个固定在页脚上的小小条，这样就不会搞砸我的页脚格式。

我该怎么做？

Answer 1

由于您没有对HTML标记说些什么，我从头开始创建了一些东西。

您可以将#footer的位置设置为 relative ，然后创建一个元素，该元素位于绝对，且值为top - 值。所以它总是会粘在页脚的顶部，不会影响页脚本身，也不会影响上面的内容：

<强> HTML

<footer id="footer">
    <aside>This site is beta</aside>
    Footer
</footer>

<强> CSS

#footer {
    position: relative;
}

#footer > aside {
    position: absolute;
    left: 0;
    top: -50px;
    width: 120px;
    height: 40px;
}

这是demo on jsfiddle。

在页脚上方创建一个固定栏

1 个答案: