Как мне переместить мой первый заголовок и абзац под мою панель навигации? - PullRequest
Новая
       42

Как мне переместить мой первый заголовок и абзац под мою панель навигации?

0 голосов
/ 12 июня 2018

Правильно, я новичок в кодировании и понятия не имею, как мне поступить.Как вы можете видеть, заголовок и абзац просто располагались над моей панелью навигации, что я хотел сделать, так это чтобы панель навигации была в самом верху, а затем текст в середине экрана, а не только по центру вверху.площадь.

Честно говоря, я почти не знаю, что делаю, и мне было интересно, может ли кто-нибудь здесь помочь?

Чтобы избежать путаницы, я говорю о "Онас "раздел внизу.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title> About us </title>

  <body background="backgroundimagebase.jpg" </head>
    <body>
      <style>
        body {
          margin: 0;
          font-family: 'Work Sans', sans-serif;
          font-weight: 300;
        }
        
        .container {
          width: 80% margin: 0 auto;
        }
        
        header {
          background: #7D7D7D;
        }
        
        header::after {
          content: '';
          display: table;
          clear: both;
        }
        
        .logo {
          display: inline-block;
          margin-left: -4px;
        }
        
        nav {
          display: inline-block
        }
        
        nav ul {
          margin: 0;
          padding: 0;
          list-style: none;
        }
        
        nav li {
          display: inline-block;
          margin-left: 60px;
          padding-top: 0px;
        }
        
        nav a {
          color: #444;
          text-decoration: none;
          text-transform: uppercase;
          font-size: 18px;
        }
        
        nav a:hover {
          color: #000;
        }
        
        nav a::before {
          content: '';
          display: block;
          height: 5px width: 100%;
          background-color: #444;
          position: absolute;
          top: 0;
          width: 0%;
          transition: all ease-in-out 250ms;
        }
      </style>

      <article style="margin:20px">
        <font color="white">
          <h1>About us:</h1>
          <p align="middle">

            </br>
            </br>

            <br>
            </br>
          </p>
        </font>
      </article>

      <!-- Logo and navbar-->
      <header>
        <div class="container">

          <img src="evolutionlogo.jpg" />

          <nav>
            <ul>
              <li><a href="projectwebsite.html">Home</a></li>
              <li><a href="projectwebsite2.html">About</a></li>
              <li><a href="projectwebsite3.html">Games</a></li>
              <li><a href="projectwebsite4.html">Hardware</a></li>
              <li><a href="projectwebsite5.html">Contact</a></li>
            </ul>
          </nav>
        </div>
      </header>


    </body>

</html>

1 Ответ

0 голосов
/ 12 июня 2018

Получение элементов для вертикального и горизонтального расположения посередине было общеизвестной проблемой с момента начала разработки интерфейса.К счастью, есть новые инструменты, которые мы можем использовать, чтобы это произошло.Для этого попробуйте использовать flexbox .

Это не лучший способ сделать это с точки зрения качества кода, но я постарался внести как можно меньше изменений.(Это также не оскорбляет ваш код, мы все должны с чего-то начинать) 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> About us </title>
<style>
body {
 margin: 0;
 font-family: 'Work Sans', sans-serif;
 font-weight: 300;
}

.container {
 width: 80%
  margin: 0 auto;
}

header {
 background: #7D7D7D;
 }

 header::after {
 content: '';
 display

: table;
 clear: both;
}

.logo {
 display: inline-block; margin-left: -4px;
}

nav { 
 display: inline-block
}

nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

nav li {
 display: inline-block;
 margin-left: 60px;
 padding-top: 0px;

}

nav a {
 color: #444;
 text-decoration: none;
 text-transform: uppercase;
 font-size: 18px;
}

nav a:hover {
 color: #000;
}

nav a::before {
 content: '';
 display: block;
 height: 5px;
 width: 100%;
 background-color:#444;


 position: absolute;
 top: 0;
 width: 0%;

transition: all ease-in-out 250ms;
}

.middle {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
</head>
<body background="backgroundimagebase.jpg" style="height: 100%;">
<!-- Logo and navbar-->
<header>
    <div class="container">

    <img src="evolutionlogo.jpg"/>

    <nav>
      <ul>
        <li><a href="projectwebsite.html">Home</a></li>
        <li><a href="projectwebsite2.html">About</a></li>
        <li><a href="projectwebsite3.html">Games</a></li>
        <li><a href="projectwebsite4.html">Hardware</a></li>
        <li><a href="projectwebsite5.html">Contact</a></li>
       </ul>
    </nav>
    </div>
    </header>

    <article class="middle" style="margin:20px">

<h1>About us:</h1>
     <p align="middle" >
        Example text
     </br>
    </br>

     <br>
    </br>
    </p>
</article>

 </body>

</html>

Основные различия:

Класс .middle: 

.middle {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Высота: 100vh также является относительно новым.Это заставляет элемент быть на 100% от «высоты просмотра».Это быстрый способ сделать это без необходимости создавать группу высоты: 100% атрибутов css повсюду.

Затем вы увидите новую функцию flexbox, которая фактически выполняет центрирование.Надеюсь, это поможет.

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

Похожие темы

...