网站导航栏

Question

我需要帮助。

我已经在这里待了几个小时了。我是 html 和 css 的新手。我一直在谷歌搜索这个问题，唯一似乎有效的是：http://codepen.io/wolfcry911/pen/HyLdg。

这是我想要完成的：

创建一个包含 4 link 秒（主页、关于我、联系方式、简历）的导航，中间有一个可以适应任何屏幕尺寸（平板电脑、笔记本电脑、智能手机）的徽标。我尝试了一个无序列表，将徽标作为第 3 个项目（不是很喜欢这种方式。看起来很草率，并且由于文本长度不同，无法让徽标位于屏幕中央）并且我有尝试使用徽标作为背景图像，但我似乎无法将徽标置于页面中间的中心，或者当我这样做时，文本永远不会围绕徽标进行调整，总是通过徽标。使用上面的 link，我能够理解大约 50% 的 css，当我试图调整它时，我无法让文本在导航中心对齐，我不能获取徽标以适应导航。这是我的代码：

body {
  background: #f5f5f5;
  font-family: arial;
  font-size: 11px;
  margin: 0;
}
#header {
  height: 56px;
  position: relative;
  margin: auto;
  background: #fff;
  box-shadow: 0px 2px 2px #ebebeb;
  text-align: center;
  padding: 20px 10px;
}
#header ul {
  margin: 0 auto;
  width: 800px;
  padding: 0;
  list-style: none;
}
#header ul li {
  float: left;
  width: 97px;
}
#header ul li:nth-of-type(4) {
  margin-left: 217px;
}
#header ul li a {
  text-transform: uppercase;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 12px 0 0 0;
  height: 28px;
}
#header ul li a:hover {
  background: rgb(235, 200, 35);
}
.logo {
  position: absolute;
  left: 50%;
  margin: -48px 0 0 -108px;
  background: url(img/logo.jpg) 50% 0 no-repeat;
  background-size: 125px 56px;
  width: 125px;
  height: 56px;
  top: 20px;
}
@media screen and (max-width: 800px) {
  .logo {
    bottom: 100%;
  }
  #header ul li:nth-of-type(4) {
    margin-left: 0;
  }
  #header ul {
    width: 600px;
    position: relative;
  }
}

<html>

<head>
  <title>Template</title>

  <link rel="stylesheet" href="navigation.css">


</head>

<body>

  <div id="header">
    <a class="logo" href="index.html">
      <img src="img/logo.jpg" alt="Michigan State" width="215" height="140" />
    </a>
    <ul>
      <li><a href="index.html">Home</a>
      </li>
      <li><a href="index.html">About Me</a>
      </li>
      <li><a href="index.html">Contact</a>
      </li>
      <li><a href="index.html">Resume</a>
      </li>
    </ul>
  </div>
</body>

</html>

我能理解大约 50% 的 css 代码。因此，如果有人可以帮助解释 ul、li、徽标和@media 格式的情况，我们将不胜感激。

感谢您的帮助。

Answer 1

ul 是一个无序列表，它将显示要点而不是有序列表 ol 中的数字。他们将 list-style 设置为 none，因此项目符号点将不会显示并将每个元素的宽度设置为 97px 的设置宽度。

ul li:nth-of-type(4) 是在 CSS3 中实现的 CSS 选择器。它基本上告诉浏览器对于无序列表的第 4 项，使用这些设置样式。 http://css-tricks.com/almanac/selectors/n/nth-of-type/

ul li a:hover 就是当用户将鼠标悬停在无序列表的项目上时出现的样式。

.logo 是一个 class。这些样式处理位置、大小、使用的图像和其他样式来格式化图片。

@media 检测浏览器的大小，并根据该大小使用指示的一组不同样式。 http://css-tricks.com/css-media-queries/

查看该站点，css-tricks.com。它有很多信息，这些信息在过去对我有很大帮助，尤其是通过 CSS3.

快速了解所有新技巧和属性

Answer 2

我会给你一个简短的解释，但你真的应该仔细阅读 CSS。还有一些适合初学者的很棒的教程（例如 codeacademy）

#header ul {
   margin: 0 auto; /* Centers the UL. */
   width: 800px; 
   padding: 0;
   list-style: none; /* Remove list bullets */
}

#header ul li {
   float: left; /*Floats the LI's meaning it will place them next to eachother instead of stacking them underneath eachother*/
   width: 97px;
}

  #header ul li:nth-of-type(4) {
    margin-left: 217px; /* Adds a left-margin to your fourth LI-itme(Resume). This is here so to prevent the link from overlapping the image. The left-margin should be the same width as you image. This needs to be added because your logo has position:absolute. */
  }

.logo {
position: absolute; /* This means that the image is taken out of the flow and can be placed anywhere on the page. 
Position absolute elements are relative to parent elements containing the position:relative style. In your case that's #header*/

left: 50%;/* places the left edge of the imaget 50% from the left*/
margin: -48px 0 0 -108px; /* adds a negative top/bottom margin to center the image. */
width: 125px;
height: 56px;
top: 20px; /* places the image 20px from the top.
}

媒体查询用于定义当 window 尺寸小于 800px

时菜单会发生什么

Answer 3

这是为您准备的基本 markup/layout。（顺便说一句，它非常基本）。它使用定位，并允许您轻松自定义点点滴滴。

.nav {
  margin-top: 50px;
  height: 40px;
  width: 100%;
  background-color: blue;
  position: relative;
  border-bottom: 5px solid gold;
  border-top: 5px solid gold;
}
.link {
  position: absolute;
  width: 20%;
  height: 100%;
  background: red;
}
.link2 {
  left: 20%;
  background: green;
}
.logo {
  left: 40%;
  background: orange;
}
.link3 {
  left: 60%;
  background: purple;
}
.link4 {
  left: 80%;
  background: pink;
}

@media screen and (max-width: 800px) {
  .link {
  position: absolute;
  width: 25%;
  height: 100%;
  background: red;
}
.link2 {
  left: 25%;
  background: green;
}
.logo {
  display:none;
}
.link3 {
  left: 50%;
  background: purple;
}
.link4 {
  left: 75%;
  background: pink;
}
  }

<div class="nav">
  <div class="link link1">Link1</div>
  <div class="link link2">Link2</div>
  <div class="link logo">logo</div>
  <div class="link link3">Link3</div>
  <div class="link link4">Link4</div>
</div>

您可以使用媒体查询为不同尺寸的屏幕添加样式。例如，当我的片段宽度小于 800px 时，'logo' div 将消失，但当它变宽时，徽标 div 将重新出现。（最好全屏观看才能看到这个效果）

这只是一些简单的事情，但我认为你可以使用它。

网站导航栏

Navigation Bar for Website

html

css

navigationbar