87

87

关注
发信
关注(28)粉丝(399)

html - 无法格式化苹果网站的“克隆”

对于一般的开发人员（2周内），我是一个新手，他在尝试使用实际语言之前尝试学习html / css的一些基本技能。

我无法让自己的网站看起来与Apple主页相似。主要是我希望我的导航栏在整个屏幕上都填满并正确调整“捐赠”横幅。

同样，我还很新，所以我对功能还不感兴趣。它也不必是“精确的”复制品，只需在那个棒球场内的某个地方即可。

我使用粉红色作为背景色，因此我可以更轻松地看到编辑内容，之前我使用的黑色背景似乎掩盖了很多边距/浮动问题。当我需要添加内容时，最终导致了问题。

这是一个外观（再次免责声明，我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 $28.29/mo. or $689 with trade-in.</p>
    <h3>Learn more >     Buy > </h3>
    <img id="mainimg" src="iphone.jpg" alt="mainiphoneimage">
    </div>



</body>
</html>

最佳答案

这是你想要的？

我从width: 100%; position: absolute;中删除​​了li a并将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 $28.29/mo. or $689 with trade-in.</p>
    <h3>Learn more > Buy > </h3>
    <img id="mainimg" src="iphone.jpg" alt="mainiphoneimage">
  </div>



</body>

</html>

关于html - 无法格式化苹果网站的“克隆”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59786829/

10-11 02:01
Powered by LMLPHP ©2024 87 0.034554