HTML5+CSS3导航栏看起来不像我想要的那样

所以我的导航栏有问题，我不知道如何修复它。我已经环顾四周，但似乎都不起作用。

好的，我想要的是把菜单项推到右边，把标志推到左边。我似乎无法做到这一点。

（已解决）最后，（如果我的第一个问题得到解决，这将是更多的问题），有人知道当你调整页面大小，并且网站中的所有内容都适当调整以适应屏幕大小时，它叫什么吗？我正试着把它放到我的网站上。（已解决）

谢谢大家！很抱歉，如果这是一个非常棘手的问题，我已经做了一段时间的网页设计，但从来没有真正冒险这么远。所以请放心。：）

链接：http://jsfiddle.net/u659zbgk/1/

@charset"utf-8";
body {
  margin: 0;
}
.wrapper {
  width: 100%;
  margin: 0 auto;
}
/*Navigation Start*/
#navbar {
  height: 50px;
  background: #752C8D;
  width: 100%;
  position: absolute;
}
#logo {
  background: #752C8D;
  padding-left: 35px;
  float: left;
}
nav {
  float: right;
  margin-bottom: 10px;
  width: 100%;
  background: #752C8D;
}
nav ul {} nav ul li {
  float: left;
  list-style: none;
  font-size: 25px;
  font-family: Gotham;
}
a {
  text-shadow: #000;
  float: left;
  color: #FFF;
  font-weight: lighter;
  padding-bottom: 12.5px;
  padding-top: 12.5px;
  padding-right: 12px;
  padding-left: 12px;
  background-color: #752C8D;
  text-decoration: none;
}
a:hover {
  text-shadow: none;
  color: #FFF;
  float: left;
  background: #333;
  text-decoration: none;
  padding-bottom: 12.5px;
  padding-top: 12.5px;
  padding-right: 12px;
  padding-left: 12px;
}
a:target {
  color: #F90;
  background: #000
}
/*End Navigation*/
@font-face {
  font-family: Gotham;
  src: url('font/gothambold1.ttf');
}

<div class="wrapper">
  <section id="navbar">
    <header id="logo">
      <img src="images/header/sidenavbar_01.png" width="111" height="47" alt="RobotEx">
    </header>
    <nav>
      <ul>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="#">BEST</a>
        </li>
        <li><a href="#">Company</a>
        </li>
        <li><a href="#">Team</a>
        </li>
        <li><a href="#">Product</a>
        </li>
        <li><a href="#">Community</a>
        </li>
        <li><a href="#">Sponsors</a>
        </li>
        <li><a href="#">Photos</a>
        </li>
      </ul>
    </nav>
  </section>
  <!---Content for  class "wrapper" Goes Here--->
</div>
<body>
  <div class="wrapper">
    <section id="navbar">
      <header id="logo">RobotEx</header>
      <nav>
        <ul>
          <li><a href="index.html">Home</a>
          </li>
          <li><a href="#">BEST</a>
          </li>
          <li><a href="#">Company</a>
          </li>
          <li><a href="#">Team</a>
          </li>
          <li><a href="#">Product</a>
          </li>
          <li><a href="#">Community</a>
          </li>
          <li><a href="#">Sponsors</a>
          </li>
          <li><a href="#">Photos</a>
          </li>
        </ul>
      </nav>
    </section>
    <!---Content for  class "wrapper" Goes Here--->
  </div>

修复菜单：

#navbar {
    height: 55px;
    background: #752C8D;
    width: 100%;
    position: absolute;
}
nav {
    float: right;
    margin-bottom: 10px;
    width: 78%;
    background: #752C8D;
}
nav ul {margin-top: 0;}

将其插入您的页眉或html文件中的某个位置。这样做的目的是将一个名为"current"的类添加到与当前地址相同的任何链接中

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
  $('a').each(function() {
    if ($(this).prop('href') == window.location.href) {
      $(this).addClass('current');
    }
  });
});
</script>

CSS

a.current {
    background:black;
    color:white;
}

您也可以通过在链接中添加一个类来实现这一点，只需使用HTML即可：

<ul>
    <li><a class="home" href="home.html">Home</a></li>
    <li><a class="best" href="best.html">BEST</a></li>
    <li><a class="company" href="company.html">Company</a></li>
    <li><a class="team" href="team.html">Team</a></li>
</ul>

CSS

.home a.home,
.best a.best,
.company a.company,
.team a.team {
    background:black;
    color:white;
}

我对你的html做了一点编辑，按照你在第一点中提到的做。请注意，我添加了一个您以前没有的div和一些样式。

.divFloatL {
    float: left;
}
<section id="navbar">
   <div id="logo" class="divFloatL">
      <img src="images/header/sidenavbar_01.png" width="111" height="47" alt="RobotEx">
   </div>
   <div class="divFloatL">
      <nav>
         <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">BEST</a></li>
            <li><a href="#">Company</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Product</a></li>
            <li><a href="#">Community</a></li>
            <li><a href="#">Sponsors</a></li>
            <li><a href="#">Photos</a></li>
         </ul>
      </nav>
   </div>
</section>

关于你正在寻找的响应式设计，有几种方法可以实现，我最熟悉的是推特引导。我建议你看一下。他们还包括一个组件，可以突出显示你选择的选项卡。

http://getbootstrap.com/components/#nav

如果你研究一下，它会解决你的另外两个问题。

相关内容

最新更新

热门标签：