Возникли проблемы с форматированием моего "клона" на сайте Apple - PullRequest
Новая
       7

Возникли проблемы с форматированием моего "клона" на сайте Apple

0 голосов
/ 17 января 2020

Я довольно плохо знаком с dev в целом (2 недели), пытаясь выучить некоторые базовые c навыки в html / css, прежде чем перейти к реальному языку.

Я возникли проблемы при получении моего сайта, похожего на домашнюю страницу apple. В основном я хочу, чтобы моя навигационная панель заполняла весь экран и корректно корректировала баннер «пожертвовать».

Опять же, я довольно новичок, поэтому меня пока не интересует функциональность. Это также не обязательно должна быть «точная» копия, просто где-то в этом парке шаров.

Я использую розовый в качестве цвета фона, поэтому я могу видеть свои правки немного легче, раньше я использовал черный фон, который, казалось, замаскировал многие мои проблемы с полями / плавающей точкой. Это привело к возникновению проблем в будущем, когда мне нужно было добавить контент.

Вот взгляд (снова отказ от ответственности, я буквально взял веб-разработчик 10 дней a go): 

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>

1 Ответ

0 голосов
/ 17 января 2020

Это то, что вы ищете?

Я удалил 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>
...