Question

我需要帮助。

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

这是我想要完成的事情：

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

＆＃13;

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;
  }
}

＆＃13;

<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>

＆＃13;

我能够理解大约50％的css代码。因此，如果有人可以帮助解释ul，li，logo和@media格式的内容，那将非常感激。

感谢您的帮助。

Answer 1

ul是一个无序列表，它将显示项目符号而不是数字和有序列表ol。它们将list-style设置为无，因此子弹点不会显示，并将每个元素的宽度设置为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是一个班级。这些样式处理位置，大小，使用的图像以及其他样式以格式化图片。

@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.
}

媒体查询用于定义窗口大小小于800px时菜单会发生什么

Answer 3

这是您的基本标记/布局。（顺便说一下，非常基本）。它使用定位，并允许您轻松自定义零碎。

＆＃13;

.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;
}
  }

＆＃13;

<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>

＆＃13;

您可以使用媒体查询为不同大小的屏幕添加样式。例如，当我的代码段小于800px的宽度时，＆＃39;徽标＆＃39; div将消失，但当它变宽时，徽标div将重新出现。（最好以全屏模式观看以查看此效果）

这只是一些简单的事情，但我认为你可以解决这个问题。

网站导航栏

3 个答案: