Проблемы с заголовком в HTML (не покрывает весь вес) - PullRequest
Новая
       3

Проблемы с заголовком в HTML (не покрывает весь вес)

0 голосов
/ 27 октября 2019

Я новичок в HTML и CSS и пытаюсь создать страницу, но у меня проблема с заголовком, так как он не охватывает всю ширину. Изображение сайта

Вот мой HTML-код: 

<nav class="links"> 
            <a href="#home"> Home </a>
            <a href="#about"> About </a>
            <a href="#products"> Products </a>
            <a href="#services"> Services </a>
            <a href="#locations"> Locations </a>
            <a href="#contact"> Contact us </a>
        </nav>
    </head>
    <body class="body">
        <header>
            <img class="gato" src="Imagenes/cat.jpg">
            <h1>ArchiteXture</h1>
            <p></p>
            </header>

А вот мой CSS-код: 

header{
    background-color:#ACBBF0;
    padding:20px;
    width:96%;
    border-style:solid;
    border-left:0px;
    border-right:0px;
    border-color:#5666A0;
}
.body{
    background-color:#CBDFE8;
    width:96%;
    border-right:3px;
    border-bottom:3px;
    border-top:0px;
    border-style:solid;
    border-color:#5666A0;
    margin-left:2%;
}
.links{
  background-color: #ACBBF0;
  background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
  linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
  linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
  linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
  background-size: 13px, 29px, 37px, 53px;
  font-weight:bold;
  padding:20px;
  text-align:center;
  border-bottom:3px;
  border-left:0px;
  border-right:0px;
  border-style:solid;
  border-color:#5666A0;
}

Я пытался удалить отступыи маржа. Я также пытался использовать инструмент F12 в Chrome для проверки кода, но я не понимаю, почему я получаю это пространство между заголовком и телом, поскольку body является «отцом». Заранее спасибо

1 Ответ

0 голосов
/ 27 октября 2019

Существует три основных ошибки:

  • Заполнение и поля должны быть установлены на 0. Sol .: Удалить все отступы и поля сразу (с *{margin:0; padding;0;},
  • Тамнекоторые неправильные закрывающие вкладки (строка 9). Sol .: правильный порядок открытия и закрытия вкладок (1-я голова, 2-е тело), ​​
  • , и вы не даете дополнительный размер фотографии. Sol.: укажите размер в процентах (ширину или высоту, как вам удобно). 

*{
  padding: 0;
  margin: 0;
}

header{
    background-color:#ACBBF0;
    padding:20px;
    width: inherit;
    border-style:solid;
    border-color:#5666A0;
}
.body{
    background-color:#CBDFE8;
    width: inherit;
    border-right:3px;
    border-bottom:3px;
    border-style:solid;
    border-color:#5666A0;
}
.links{
  background-color: #ACBBF0;
  background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
  linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
  linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
  linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
  background-size: 13px, 29px, 37px, 53px;
  font-weight:bold;
  padding:20px;
  text-align:center;
  border-bottom:3px;
  border-style:solid;
  border-color:#5666A0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

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

<body>
  <nav class="links">
    <a href="#home"> Home </a>
    <a href="#about"> About </a>
    <a href="#products"> Products </a>
    <a href="#services"> Services </a>
    <a href="#locations"> Locations </a>
    <a href="#contact"> Contact us </a>
  </nav>
  <header>
    <img class="gato" src="photo.jpg" style="width: 100%;">
    <h1>ArchiteXture</h1>
    <p></p>
  </header>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...