1

我正在尝试通过为我的页面制作导航栏来练习我的 HTML5 和 CSS3 技能，但我遇到了很多麻烦。我正在尝试使用 HTML5 语义标签来制作它，但它们都没有看到我想要的样子，而且这是一个巨大的定位混乱。有人可以告诉我如何制作功能性导航栏吗？

这是整个导航栏和标题的 HTML 代码：

body {
    margin:0;
}

#nav-plus-head-wrapper {
    background: blue;
    height: 100px;
    position: absolute;
    top: 0px;
    left:0px;
    right:0px;
}

#topheader {

}

#topnav {
    background: yellow;
    position: relative;
    top: 0px;
    right: 0px;
}

.navli {
    display: inline;
}

a:link {
    text-decoration: none;
    color: red;
}

a:hover {
    text-decoration: none;
    color: orange;
}

a:visited {
    text-decoration: none;
    color: white;
}
<section id="nav-plus-head-wrapper">

    <!--CODE FOR WEBSITE NAME-->
    <header id="topheader">
        <h1>Site</h1>
    </header>

    <!--CODE FOR TOP NAVBAR-->
    <nav id="topnav">
        <ul id="topnav-ul">
            <li class="navli"><a href="">Home</a></li>
            <li class="navli"><a href="">About</a></li>
            <li class="navli"><a href="">Services</a></li>
            <li class="navli"><a href="">Contact</a></li>
        </ul>
    </nav>

</section>

4

1 回答 1

0

首先，您需要像这样重置所有 html：

*, *:after, *:before {
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}

然后你漂浮你的<header id="topheader">左边也许它是一个标志

#topheader {
float:left;
    color:white;
}

而你<nav id="topnav">正确的主要导航

#topnav {
    position: relative;
    top: 20px;
    float:right;
}

现在你可以像这样设置你的项目

.navli {
    float:left;
    list-style:none;
    width:24%;
    height:100%;
    padding:20px;
    margin:0 0 0 1%;
    background-color:#ccc;
}

演示：http: //jsfiddle.net/AvHKT/1/

于 2013-08-03T10:19:43.420 回答