Question

我对HTML / CSS比较陌生。如果一切都可以逐步解释，我会很感激。

我想模仿（出于培训目的）this menu (including a custom logo image)。我不知道如何处理它或如何将它放在网站的每个页面上。如果可能，只能使用HTML5和CSS吗？

Answer 1

制作一个列表。<ul><li></ul>。将图像放在第一个li <li><img></img></li>内。其余的只是一些css格式化使用在css内联显示并调整颜色和img大小：）

Answer 2

以下是使用您提供的链接中的代码的fiddle。您必须使用我放在小提琴上的HTML并隔离样式表中的topNav，main-nav和li元素。

Answer 3

试试这个

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 4

首先，为链接创建一个容器。在容器中，您需要具有到目的地的“hrefs”的元素。用于此的主要内容是列表（ul）。然后你让这个ul里面的元素具有属性display:inline-block，这使得它们水平堆叠。这些所谓的列表项将有要点。

要删除这些内容，您必须添加list-style-type: none'。

您可以在此处看到：https://jsfiddle.net/0ffzj93f/5/

要将其放在每个页面上，只需复制粘贴并将“当前”类更改为相应的链接。

Answer 5

您可以非常轻松地使用http://foundation.zurb.com/。我总是使用它。它具有响应切换栏，您可以选择使其粘性（无论如何总是在顶部）。您可以使用更多功能。这是一个例子：

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

如果您需要更多信息，请告诉我

如何仅使用HTML和CSS制作此菜单

5 个答案: