如何有導航項目

我想我的導航菜單，左側是3個環節，中間的標誌，和3個環節的權利之間的頭，如何有導航項目

這是我已經嘗試了第一種方式：

 <ul> 
      <li><a href="#">home</a></li> 
      <li><a href="#">about</a></li> 
      <li><a href="#">portfolio</a></li> 
     </ul> 
      <h1> portfolio </h1> 
     <ul> 
      <li><a href="#">services</a></li> 
      <li><a href="#">blog</a></li> 
      <li><a href="#">contact</a></li> 
     </ul>

這是一個好方法嗎？

對不起，我以前從來沒有這樣做過這個，我只是想確保我做的好方法

來源

2011-12-19 user1064634

他們說什麼。只有一點評論：如果你在這裏發佈你的html，不要使用'＃'作爲uri佔位符。 '＃'本身就是一個有效的目標uri，有些迂腐的人可能會過來並開始指出你所有的a指向同一個位置。 – 2011-12-19 11:27:49

你需要你的浮動菜單和中路頭球攻門：

的Html

<div id="header"> 
    <ul class="left"> 
     <li><a href="#">home</a></li> 
     <li><a href="#">about</a></li> 
     <li><a href="#">portfolio</a></li> 
    </ul> 
    <h1> portfolio </h1> 
    <ul class="right"> 
     <li><a href="#">services</a></li> 
     <li><a href="#">blog</a></li> 
     <li><a href="#">contact</a></li> 
    </ul> 
</div>

的CSS

#header h1 { display:block; text-align:center; } 
#header .left { float:left; } 
#header .right { float:right; }

http://jsfiddle.net/Ub3cP/

來源

2011-12-19 11:13:08 Samich

這樣就好了。然後，您將不得不使用CSS float屬性來使所有內容一致。

來源

2011-12-19 11:13:17

沒關係，但有一個值得注意的問題。你將它描述爲一個導航菜單，事實如此，我假定<h1>是頁眉。現在，如果您製作的是HTML5頁面，則需要使用<nav>元素適當標記導航菜單。所以，你可以這樣做：

<nav> 
    <ul> 
     <li><a href="#">home</a></li> 
     <li><a href="#">about</a></li> 
     <li><a href="#">portfolio</a></li> 
    </ul> 
    <h1> portfolio </h1> 
    <ul> 
     <li><a href="#">services</a></li> 
     <li><a href="#">blog</a></li> 
     <li><a href="#">contact</a></li> 
    </ul> 
</nav>

的問題是，這種改變<h1>元素的語義。它會成爲導航區域的標題，而不是頁面的標題。

爲了防止出現這種情況，最好在標記中的導航菜單之前或之後使用<h1>元素，然後將它移動到兩個帶有CSS的<ul>之間的顯示位置。

例如：http://jsfiddle.net/mJELq/

來源

2011-12-19 11:46:33 Alohci

如何有導航項目

回答

相關問題