如何使用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

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