Question

我正在尝试通过为我的页面制作导航栏来练习我的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>

Answer 1

首先你需要像这样重置你所有的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/

如何制作功能强大的HTML5导航栏

1 个答案: