如何使用HTML和CSS製作此菜單

Question

我對HTML/CSS比較陌生。我會很感激，如果一切都可以一步一步解釋。

我想模仿（出於培訓目的）this menu (including a custom logo image)。我不知道如何接近它或如何把它放在網站的每一頁上。如果可能的話，只能使用HTML5和CSS來完成？

Answer 1

首先你要的容器的鏈接。在容器中，需要具有到目的地的「hrefs」元素。用於此的主要內容是一個列表（ul）。 然後你使這個ul中的元素具有屬性display:inline-block，這使得它們水平堆疊。這些所謂的列表項目將具有項目符號點。

要刪除這些，您必須添加list-style-type: none'。

你可以在這裏看到：https://jsfiddle.net/0ffzj93f/5/

爲了把它的每一頁上，只需複製粘貼和改變「電流」類的相應鏈接。

Answer 2

列出。 <ul><li></ul>。把第一李<li><img></img></li>。還有休息內部的圖像只是一些CSS格式化使用內嵌式地顯示在CSS和調整顏色和大小的IMG :)

Answer 3

這裏是一個fiddle使用從您提供的鏈接代碼。您必須使用我放在小提琴上的HTML，並從樣式表中分離出topNav,main-nav和li元素。

Answer 4

試試這個

header:after{ 
 
    content: ''; 
 
    clear: both; 
 
    display: table; 
 
} 
 
h1{ 
 
    float: left; 
 
} 
 
ul{ 
 
    float: right; 
 
} 
 
ul > li{ 
 
    float: left; 
 
    list-style: none; 
 
    margin: 0 10px; 
 
}

<header> 
 
    <h1><img width="200" src="http://static1.squarespace.com/static/51ba2198e4b089e26e4a4631/t/51d47005e4b0386d63b4d738/1422327510900/?format=1000w" alt="logo"></h1> 
 
    <ul> 
 
    <li>Home<li> 
 
    <li>Work<li> 
 
    <li>About<li> 
 
    <li>Contact<li> 
 
    <li>Home<li> 
 
    </ul> 
 
</header>

Answer 5

你可以很容易地使用http://foundation.zurb.com/。我總是使用它。它使用切換條響應，您可以選擇使其變得粘稠（無論如何都始終保持最佳狀態）。有很多功能可以使用。這裏有一個例子：

http://foundation.zurb.com/docs/components/topbar.html

如果您需要更多的信息，讓我知道