HTML 5 + CSS3 navbar看起来不像我想要的

-2

所以我遇到了问题，我的导航栏，我不知道如何解决它。我已经环顾四周，但似乎没有任何工作。HTML 5 + CSS3 navbar看起来不像我想要的

好的，我想要的是将菜单项向右推，并将徽标推到左侧。我似乎无法得到那个工作。

（已解决）最后，（如果我的第一个问题得到解决，这更多），有人知道调整页面大小时调用的是什么，并且网站中的所有内容都调整大小以适应屏幕大小？我正试图在我的网站上获得这些信息。（求助）

谢谢你们！对不起，如果这是一个非常不好的问题，我一直在做网页设计，但从来没有真正冒险到这一点。所以对我来说很简单。 :)

@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>

来源

2014-10-29 zeron824

欢迎来到SO。如果你可以在你的问题中发布你的代码，以及代码片段或链接到你的问题**的最小例子，这将是非常有用的。由于链接腐败的风险，我们不鼓励用户链接到外部网站。您在单个问题中也有太多问题 - 这有助于解决**问题**。 – Terry 2014-10-29 03:02:03

除了@特里提到的内容之外，您可能会尝试在解决问题时解决问题，并成为一个移动目标。问题旨在对本网站的未来用户有所帮助，如果您解决了问题，情况就不会如此。 Pease还阅读：http：// stackoverflow。com/help/how-to-ask – 2014-10-29 03:05:02

此外，通过将问题分解为一个小问题示例，解决方案就是我自己介绍的。 – 2014-10-29 03:06:33

修正了菜单：

#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文件中。这样做是要添加一个名为“当前”的任何链接类，它是一样的当前地址

<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; 
}

来源

2014-10-29 03:27:36

我已经编辑你的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>

关于您正在寻找的响应式设计，有几种方法可以做到这一点，我最熟悉的是Twitter Bootstrap。我建议你看看它。他们还包含一个包含您选择的选项卡的组件。

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

如果你研究的是，这将需要您的其他2个问题的照顾。

来源

2014-10-29 03:32:50 Urielzen

HTML 5 + CSS3 navbar看起来不像我想要的

回答

相关问题