Question

因此，我尝试为实验室重新创建以下布局：http://i.imgur.com/T24vvGu.jpg

我是通过解决导航栏开始的。我把位置设置为绝对，所以我可以给它一个顶部：50px;财产从顶部向下移动50px。

我尝试将徽标的位置设置为相对位置，这样相对于导航栏，我可以将它从左侧移动20px左右。但是当我使用相对定位时，徽标位于导航栏内部并使导航栏的高度更大。

我认为通过将徽标的位置设置为相对位置，它会将徽标视为不是导航栏的一部分。然而，事实并非如此。所以我所做的就是将徽标的位置设置为绝对。这整件事只是在扼杀我的灵魂。出于某种原因，我无法理解如何做到这一点。

我去了网站存档，查找了插件设计的网站。他们做了什么，是他们将导航栏的位置设置为固定，并将徽标设置为相对位置。我也试过这样做，但徽标仍然位于导航栏内并延伸到它的高度。

此外，当浏览器为768px及以下时，我必须将徽标设置在导航栏的中间。然后，两个菜单链接位于徽标的左侧，另外两个菜单链接位于徽标的右侧。我完全迷失了如何做到这一点。我不认为我的布局其余部分有问题。只是这个导航栏和徽标定位让我疯狂。

这是我的代码：http://cryptb.in/v48Y#cf572c29a798b3c6593631d831c8a323

我是否应该使用徽标图像上传我的代码？这可能会更容易遵循。我不确定最佳做法是什么，因为我是新的堆栈溢出。

HTML：

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Lab Eight</title>
  <link href="css/styles.css" rel="stylesheet">
</head>

<body>
  <!-- navigation bar left -->
  <div class="navbar">
    <div id="logo"></div>
    <div class="container">
      <ul class="float-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Media</a></li>
      </ul>
    </div>
  </div>

  <div class="container">

    <div class="row">

      <div class="column-twelve">

      </div>

      <div class="column-twelve">

      </div>

    </div>

  </div>

</body>

</html>

CSS：

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
  background: #f3f3f3;
  font-family: 'Open Sans', sans-serif;
  margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.1;
}
/* Horizontal line to divide content */
hr {
  margin-top: 10px;
  margin-bottom: 10px;
  border: 0;
  border-top: 1px solid #332929;
}
#logo {
  background: url('images/logo-left.png');
  display: block;
  width: 250px;
  height: 100px;
  position: absolute;
  left: 15px;
  top: -20px;
}
.column-twelve h1, h2, h3, h4, h5, h6 {
  color: #f2f2f2;
}
.column-twelve h2 {
  font-size: 1.875em;
}
.row .column-twelve p {
  color: #f2f2f2;
  font-weight: 400;
  font-size: 0.875em;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
/* Acts as a container to wrap all the content so it doesn't take up 100% of the page. */
.container {
  width: 90%;
  padding-right: 10px;
  padding-left: 10px;
  margin-right: auto;
  margin-left: auto;
}
.navbar {
  position: absolute;
  width: 100%;
  min-height: 58px;
  top: 50px;
  background: #fefefe;
}
.navbar li {
  position: relative;
  display: inline;
  list-style: none;
}
.navbar li a {
  color: #333333;
  text-decoration: none;
  font-size: 0.75em;
  font-weight: bold;
  padding: 10px 10px;
  text-transform: uppercase;
}
/* The row for the columns. */
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.column-twelve {
  width: 100%;
}
.column-eleven {
  width: 91.66666667%;
}
.column-ten {
  width: 83.33333333%;
}
.column-nine {
  width: 75%;
}
.column-eight {
  width: 66.66666667%;
}
.column-seven {
  width: 58.33333333%;
}
.column-six {
  width: 50%;
}
.column-five {
  width: 41.66666667%;
}
.column-four {
  width: 33.33333333%;
}
.column-three {
  width: 25%;
}
.column-two {
  width: 16.66666667%;
}
.column-one {
  width: 8.33333333%;
}
@media screen and (max-width: 768px) {
  #logo {
    position: absolute;
    margin: 0 auto;
    background: url('images/logo-center.png');
    height: 146px;
    width: 250px;
  }
}

Answer 1

在这里：http://codepen.io/n3ptun3/pen/avrXaE?editors=110

为完成此操作，我将#navbar相对于其正常位置定位。然后我绝对定位#logo和#container（来自他们的第一个定位的祖先元素，即#navbar。）

高度问题来自min-height: 58px;上设置.navbar。相反，您想使用height: 58px;。

仅供参考 - 在使用媒体查询时，最好先编写代码 移动设备 。这意味着首先为最小的屏幕编写代码。为此，您必须使用min-width代替max-width。此外，您还想使用@media only screen，而不是@media screen。这仅针对可以理解媒体查询的浏览器。

希望这会有所帮助。请随意在评论部分询问有关代码的任何问题。

<强> HTML

<div id="page">
  <div id="navbar">
    <div id="logo"></div>
    <ul id="container">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Media</a></li>
    </ul>
  </div>
</div>

<强> CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

body {
  background: #f3f3f3;
  font-family: 'Open Sans', sans-serif;
  margin: 0 auto;
}

#page {
  height: 600px;
}

#navbar {
  position: relative;
  width: 100%;
  height: 50px;
  top: 75px;
  background-color: #fefefe;
}

#logo {
  width: 150px;
  height: 150px;
  border-radius: 75px;
  background-color: #333;
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translate(-50%);
}

#container {
  position: absolute;
  top: 13px;
  padding: 0;
  margin: 0;
  width: 100%;
}

#navbar li {
  display: none;
}

#navbar li a {
  color: #333333;
  text-decoration: none;
  font-size: 0.75em;
  font-weight: bold;
  text-transform: uppercase;
}

#navbar li:nth-child(3) a, 
#navbar li:nth-child(4) a {
  position: relative;
  left: 100%;
}

@media only screen and (min-width: 569px) {
  #navbar li {
    display: inline-block;
    list-style: none;
    width: 20%;
    float: left;
    text-align: center;
  }
}

@media only screen and (min-width: 769px) {
  #logo {
    left: 50px;
    transform: translate(0);
  }

  #container {
    width: 30%;
    right: 50px;
  }

  #navbar li {
    width: 25%;
  }

  #navbar li:nth-child(3) a, 
  #navbar li:nth-child(4) a {
    left: 0;
  }
}

修改：回答您的其他问题：

:nth-child()是一个伪类选择器。它选择其父级所需的序数（即第1，第2，第3，第4，第5等）。序号由括号中的数字指定。因此，如果您查看我的代码，您会看到li:nth-child(3)。这意味着：选择所有 li 元素，这些元素是其父级的第三个孩子。如果第3个孩子不是li元素，则会选择不。

关于您的媒体查询问题：我将left: 50%; transform: translate(-50%);代码置于媒体查询之外的原因是因为我首先使用 移动设备 编码方法。 Mobile First 设计是响应式设计的当前标准。这意味着您首先要设计最小的屏幕（移动）。因此，我将徽标居中，并删除媒体查询之外的文本链接。然后，我在第一个媒体查询中定位平板电脑：@media only screen and (min-width: 569px)。这会定位分辨率为569像素或更高的屏幕，并在导航栏中添加文本链接。最后，我使用另一个媒体查询：@media only screen and (min-width: 769px)来定位大屏幕（计算机），屏幕大小为769px或更高。在此媒体查询中，我将徽标放在左侧，将文本链接放在右侧。

注意：在您的代码中，您使用的是桌面设计。您首先要为大屏幕设计。然后使用较小尺寸的媒体查询。这就是您的媒体查询使用max-width的原因。我正在使用 移动优先 设计。我先为小屏幕设计。然后我使用更大尺寸的媒体查询。这就是我的媒体查询使用min-width。
的原因
希望这有帮助！

涉及媒体查询的绝对和相对定位？

1 个答案: