无法格式化我的 "clone" 苹果网站

Question

总的来说，我对开发还很陌生（2 周），尝试在 html/css 中学习一些基本技能，然后再转向实际的语言。

我无法让我的网站看起来与 Apple 主页相似。主要是我希望我的导航栏在屏幕上一直填满并正确调整 "donate" 横幅。

同样，我还是新手，所以我对这些功能还不感兴趣。它也不需要是 "exact" 复制品，只需在那个球场内的某个地方即可。

我使用粉红色作为背景颜色，这样我可以更容易地看到我的编辑，之前我使用的黑色背景似乎掩盖了我的很多 margin/float 问题。当我需要添加内容时，它最终导致了问题。

看一下（再次免责声明，我 10 天前才开始学习 Web 开发）：

body{
    background-color:rgb(253, 94, 214);
    margin: 0px;
    border: 0px;
    padding: 0px;
}
ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    border: 0px;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    font-size: 13px;
    font-family: 'Roboto', sans-serif;
    width: 100%;
    background-color: rgb(87, 87, 87);
    position: absolute;
    z-index: 100;
  }
  
  li a:hover {
    font-size: 15px;
    font-family: 'Roboto', sans-serif;
  }
  .banner{
        position: absolute;
        right: 0px;
        top: 0px;
        bottom: 0px;
        left: 0px;
        margin-top: 40px;
        margin-bottom: 62%;
        
        font-size: 18px;
        text-align: center;
        padding: 15px;
        font-family: 'Roboto', sans-serif;
        color: rgb(4, 133, 255);
    }
    .main{
        position: absolute;
        right: 0px;
        top: 0px;
        bottom: 0px;
        left: 0px;
        margin-top: 150px;
        margin-bottom: 48%;
        color: white;
        font-size: 18px;
        text-align: center;
        padding: 15px;
        font-family: 'Roboto', sans-serif;
        
    }
    h3{
        color: rgb(4, 133, 255);
        font-size: 16px;
    }

 #redcross{
    height: 40px;
    width: 40px;
    float: left;
 }
.promobanner{
    color: rgb(4, 133, 255);
    padding: 50px;
    float: left;
    vertical-align: center;
}
#mainimg{
    width: 100%;
    left: 0px;
    right: 0px;
    position: absolute;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Apple</title>
    <link rel="stylesheet" href="mystyle.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class=nav>
<ul>
    <li> <a href="#">Mac </a></li>
    <li> <a href="#">iPad </a></li>
    <li> <a href="#">iPhone </a></li>
    <li> <a href="#">Watch </a></li>
    <li> <a href="#">TV </a></li>
    <li> <a href="#">Music </a></li>
    <li> <a href="#">Support </a></li>
</ul>
</div>
<div class="banner">
</div>
<div class="promobanner">
    <img id="redcross" src="redcross.png" alt="redcross">
<span> Donate to Australian Bushfire Relief > </span>
</div>
<div class="main">
    <h1>iPhone 11 Pro</h1>
    <h2>Pro cameras.Pro display.Pro performance</h2>
    <p>From .29/mo. or 9 with trade-in.</p>
    <h3>Learn more >     Buy > </h3>
    <img id="mainimg" src="iphone.jpg" alt="mainiphoneimage">
    </div>


    
</body>
</html>

Answer 1

这是您要找的吗？

我从 li a 中删除了 width: 100%; position: absolute;，并将 width: 100%; display:flex; justify-content:center; background-color: rgb(87, 87, 87); max-height:35px; 添加到 ul。

至于横幅：我将其替换为：

.promobanner {
   background-color: rgb(242, 242, 242);
   padding: 25px 0;
   width:100%;
   justify-content: center;
   display: flex;
}

body {
  background-color: rgb(253, 94, 214);
  margin: 0px;
  border: 0px;
  padding: 0px;
}

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  border: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: rgb(87, 87, 87);
  max-height: 35px;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 13px;
  font-family: 'Roboto', sans-serif;
  background-color: rgb(87, 87, 87);
  z-index: 100;
}

li a:hover {
  font-size: 15px;
  font-family: 'Roboto', sans-serif;
}

.banner {
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  margin-top: 40px;
  margin-bottom: 62%;
  font-size: 18px;
  text-align: center;
  padding: 15px;
  font-family: 'Roboto', sans-serif;
  color: rgb(4, 133, 255);
}

.main {
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  left: 0px;
  margin-top: 150px;
  margin-bottom: 48%;
  color: white;
  font-size: 18px;
  text-align: center;
  padding: 15px;
  font-family: 'Roboto', sans-serif;
}

h3 {
  color: rgb(4, 133, 255);
  font-size: 16px;
}

#redcross {
  height: 40px;
  width: 40px;
}

.promobanner {
  background-color: rgb(242, 242, 242);
  padding: 25px 0;
  width:100%;
  justify-content: center;
  display: flex;
}

#mainimg {
  width: 100%;
  left: 0px;
  right: 0px;
  position: absolute;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Apple</title>
  <link rel="stylesheet" href="mystyle.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
</head>

<body>
  <div class=nav>
    <ul>
      <li> <a href="#">Mac </a></li>
      <li> <a href="#">iPad </a></li>
      <li> <a href="#">iPhone </a></li>
      <li> <a href="#">Watch </a></li>
      <li> <a href="#">TV </a></li>
      <li> <a href="#">Music </a></li>
      <li> <a href="#">Support </a></li>
    </ul>
  </div>
  <div class="banner"></div>
  <div class="promobanner">
    <img id="redcross" src="redcross.png" alt="redcross">
    <span> Donate to Australian Bushfire Relief > </span>
  </div>
  <div class="main">
    <h1>iPhone 11 Pro</h1>
    <h2>Pro cameras.Pro display.Pro performance</h2>
    <p>From .29/mo. or 9 with trade-in.</p>
    <h3>Learn more > Buy > </h3>
    <img id="mainimg" src="iphone.jpg" alt="mainiphoneimage">
  </div>



</body>

</html>

无法格式化我的 "clone" 苹果网站

Having trouble formating my "clone" of the apple website

html

css

list

margin

width