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

dohp0rv5 于 12个月前发布在 HTML5

关注(0)|答案(2)|浏览(134)

我试图通过为我的页面制作导航条来练习我的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>

css

来源：https://stackoverflow.com/questions/18028506/how-to-make-a-functional-html5-navbar

2条答案

按热度按时间

kokeuurv1#

制作功能导航栏的方法不止一种。你可以使用按钮、div、链接、列表，甚至是它们的混合。我通常用最简单的方法。
下面是一个简单方法，代码简单，您可以通过检查和阅读来学习。
我希望这会有所帮助。

* {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
    text-decoration-line: none;
    scroll-padding-top: 100px;
}

.header {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    background: #666699;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.navbar {
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.navBtn {
    width: 80px;
    height: 40px;
    margin: 0 10px;
    font-size: 20px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navBtn a {
    color: #000;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section {
    width: 100%;
    height: 90vh;
    z-index: -1;
    display: flex;
    color: white;
    font-size: 40px;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.homeSect {
    background: #0066ff;
    margin-top: 100px;
    height: 100vh;
}

.workSect {
    background: #33cc33;
}

.aboutSect {
    background: #ffcc00;
}

</head>
  <header class="header" id="header">
    <nav class="navbar">
      
      <button class="navBtn homeBtn" id="homeBtn"> 
        <a href="#homeSect">Home</a>
        </button>
      <button class="navBtn workBtn" id="workBtn">
      <a href="#workSect">Work</a>
      </button>
      <button class="navBtn aboutBtn" id="aboutBtn">
      <a href="#aboutSect">About</a>
      </button>
    </nav>
    
  </header>
  
<body class="body">
    
    <div class="onscrolldiv" id="onscrolldiv"></div>

  <section class="homeSect section" id="homeSect">Home section</section>
  <section class="workSect section" id="workSect">Work section</section>
  <section class="aboutSect section" id="aboutSect">About section</section>

赞(0）回复(0）举报 12个月前

7kjnsjlb2#

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

赞(0）回复(0）举报 12个月前

我来回答

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

2条答案

相关问题

热门标签

最新问答