Question

我进入网页设计领域，出于实践目的，我试图创建以真实网站为模型的响应式HTML和CSS网站，所以我只关心开发而不是设计。截至目前，我正在重新设计apple.com。我的问题是，在apple.com导航栏中，Apple徽标始终距离指向站点其他部分的链接大约一英寸。当您调整浏览器大小时，它会保持在一英寸之外。问题是，在我的（未完成）版本的网站上，当您调整浏览器大小时，苹果徽标会固定在一个位置。

这是我的代码：

＆＃13;

html {
  font-size: 100%;
}

body {
  padding: 0;
  margin: 0;
}

@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

.font {
  font-family: San Francisco;
}

.logo {
  position: absolute;
  left: 5em;
  top: .5em;
}

.center {
  display: inline;
  text-align: center;
}

.search {
  display: block;
  position: fixed;
  right: 1em;
  top: .7em;
}

header {
  list-style-type: none;
  word-spacing: 40px;
  background-color: #323232;
  height: 2.8em;
  width: 100%;
  position: fixed;
  opacity: .98;
}

.ul-header {
  margin: .8em;
}

.li-header {
  display: inline;
}

.a-header {
  text-decoration: none;
  color: white;
  font-family: San Francisco;
  font-size: 15px;
}

.iphoneximg {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.iphone {
  text-align: center;
  font-size: 3em;
  line-height: 0.5em;
}

.sayhello {
  text-align: center;
  font-size: 1.6em;
  line-height: 0;
  font-weight: 550;
}

@media(min-width: 1500px) {
  .iphoneximg {
    width: 50%;
  }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Apple</title>
  <link rel="icon" href="Images/Apple.ico">
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <header>
    <div class="center">
      <img src="Images/Screenshot%20from%202018-03-20%2020-59-01.png" class="logo">
      <ul class="ul-header">
        <li class="li-header"><a href="#" class="a-header">Mac</a></li>
        <li class="li-header"><a href="#" class="a-header">iPad</a></li>
        <li class="li-header"><a href="#" class="a-header">iPhone</a></li>
        <li class="li-header"><a href="#" class="a-header">Watch</a></li>
        <li class="li-header"><a href="#" class="a-header">TV</a></li>
        <li class="li-header"><a href="#" class="a-header">Music</a></li>
        <li class="li-header"><a href="#" class="a-header">Support</a></li>
        <img src="Images/Search.png" class="search">
      </ul>
    </div>
  </header>
  <br><br><br><br><br><br><br><br><br>
  <section class="iphonex">
    <h1 class="font iphone">iPhone X</h1>
    <p class="font sayhello">Say hello to the future.</p>
    <img src="Images/iphone.png" width="76%" class="iphoneximg">
  </section>
  <section class="iphonex">
    <h1 class="font iphone">iPhone 8</h1>
    <p class="font sayhello">A new generation of iPhone.</p>
    <img src="Images/generation.jpg" width="76%" class="iphoneximg">
  </section>
</body>

</html>

＆＃13;

有人提出了这个解决方案： How to horizontally center a <div> in another <div>? 问题在于我试图弄清楚如何处理图像和文本之间的差异以使它们居中，所以简单地将它们放入div中就不会起作用。

我尝试将文本和图片放在div中并将其居中，％值，弄乱显示属性以及其他一些内容，但似乎没有任何效果。

我也是一个新手网络开发者，所以如果还有其他我需要解决的问题，请随时告诉我。谢谢， LYFE

Answer 1

如果我们实际查看了Apple页面的CSS和HTML，那就是这样做的：

HTML：

<ul class="ac-gn-list">
 <li class="ac-gn-item ac-gn-apple">
  <a class="ac-gn-link ac-gn-link-apple" href="/" data-analytics-title="apple home" id="ac-gn-firstfocus">
    <span class="ac-gn-link-text">Apple</span>
 </a>
  </li>
  <li class="ac-gn-item ac-gn-item-menu ac-gn-mac">
   <a class="ac-gn-link ac-gn-link-mac" href="/mac/" data-analytics-title="mac">
    <span class="ac-gn-link-text">Mac</span>
   </a>
  </li>
  <li class="ac-gn-item ac-gn-item-menu ac-gn-ipad">
   <a class="ac-gn-link ac-gn-link-ipad" href="/ipad/" data-analytics-title="ipad">
    <span class="ac-gn-link-text">iPad</span>
   </a>
  </li>
                ... There are More...
 </ul>

的CSS：

@media only screen and (max-width: 767px){#ac-globalnav .ac-gn-item-menu{
height:43px;
border-bottom:1px solid #333;
opacity:0;
pointer-events:none;
}

.ac-gn-apple{
    position:absolute;
    width:48px;
    top:0;
    left:50%;
    margin-left:-24px;
    text-align:center;
    z-index:1
}

注释：

我敢打赌

的位置是：绝对的;

诀窍，然而，我删除了所有的webkit代码。如果您想要创建一个动态页面/响应页面，您需要学习Bootstrap库，它真的非常容易使用并开始使用。使一切变得动态和响应。

Answer 2

在Apple page上运行检查元素，您会看到他们将他们的图片作为另一个列表元素。另一方面，您将放在列表之外。

以下是您的代码，Apple徽标作为第一个列表元素：

<ul class="ul-header">
        <li class="li-header"><a href="#" class="a-header"><img src="apple_logo.png" width='20px'></a></li>
        <li class="li-header"><a href="#" class="a-header">Mac</a></li>
        <li class="li-header"><a href="#" class="a-header">iPad</a></li>
        <li class="li-header"><a href="#" class="a-header">iPhone</a></li>
        <li class="li-header"><a href="#" class="a-header">Watch</a></li>
        <li class="li-header"><a href="#" class="a-header">TV</a></li>
        <li class="li-header"><a href="#" class="a-header">Music</a></li>
        <li class="li-header"><a href="#" class="a-header">Support</a></li>
</ul>

修改

要确保您的Apple徽标与列表中的其他元素垂直对齐，请将其添加到 CSS ：

#app_logo { margin-top: -10px; } .center ul img { vertical-align: middle; }

注意我在图像中添加了ID。此外，您的设置可能会略有不同。

HTML＆amp; CSS将文本和图像集中在一起

2 个答案: