如何製作功能性的HTML5導航欄

我試圖通過爲我的頁面製作導航欄來練習我的HTML5和CSS3技能，但我遇到了很多麻煩。我試圖使用HTML5語義標籤來製作它，但他們中沒有一個正在尋找我想要它們的方式，這是一個巨大的定位問題。有人可以告訴我怎樣才能製作出功能性的導航欄嗎？如何製作功能性的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>

來源

2013-08-03 John

您好！你應該把你的代碼放在jsFiddle中，以便其他人可以使用它，使它更容易幫助你。 – Andrew

@Andrew製作一個[jsFiddle]（http://jsfiddle.net/）很有幫助，但我認爲「應該」誇大了它的必要性。你必須確保人們知道只把代碼放在問題上比只在jsFiddle上更好。 –

好的，我會怎麼做呢？ – John

首先你需要重置所有的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"> left maybe sa sa logo

#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-03 10:19:43

如何製作功能性的HTML5導航欄

回答

相關問題