Question

我试图创建一个小的导航栏，即使用户正在滚动它也会停留在页面的某个位置。我是一个总菜鸟，所以我开始使用css从我正在使用的模板中获取导航按钮。但对于我的生活，我无法弄清楚如何添加两个按钮。我很抱歉，如果这是一个超级问题，但我真的可以使用这个帮助。谢谢你们！

该网站是www.muzedimage.com 这就是我的想法：http://i.imgur.com/oN6osxv.jpg

按钮的HTML段是：

<div class="downArrow"> 
   <div class="row">
      <div class="large-1 small-2 column push-11"> 
         <a href="#whatwedo" class="scroll down"><i class="icon-chevron-down"></i></a>
      </div>
   </div>
</div>

CSS样式表：

section.banner {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
}
section.banner .downArrow {
    float: right;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    text-align: center;
}
section.banner .downArrow a.down {
    float: left;
    width: 50%;
    height: 60px;
    background: #cb7039;
    text-align: center;
}
section.banner .downArrow a.down i {
  color: white;
  font-size: 1.688em;
  line-height: 60px;
  -webkit-transition: line-height 0.1s ease-in;
  -moz-transition: line-height 0.1s ease-in;
  -o-transition: line-height 0.1s ease-in;
  transition: line-height 0.1s ease-in;
}
section.banner .downArrow a.down:hover i {
  line-height: 80px;
}

Answer 1

这是一个可以给你一个开始的小FIDDLE。

花时间玩CSS。并根据需要添加/设置多个按钮。

HTML

<div class='holder'>
    <div class='button1'>X</div>
    <div class='button1'>Y</div>
    <div class='button1'>W</div>
    <div class='button1'>Z</div>
</div>

无法创建导航栏

1 个答案: