HTML | Тег header & nav

151

16 марта 2022, 00:40

Всем привет. Тут дали задание написать сайт. кому было интересно

В HTML я рыбка, огурчик и самоучка по SoloLearn (не реклама)

Хотел сделать такое вот

Но, я же рыбка, и выходит что-то такое ~(-.-~

Хотел бы узнать, как можно так сделать и если есть ошибки, сделать замечание :)

Вод исходник:

<!DOCTYPE HTML>
<html>
    <head>
        <title> Trip to Chernobyl </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body class="page">
        <header class="header__inner">
            <img src="img/logo.png" height="5%" width="5%" align="left" alt="Error ~(-.-~">
        </header>
        <nav align="right" class="nav_inner">
        <a href="about.html" class="my" style="color:white"> About </a>
        <a href="price.html" style="color:white"> Price </a>
        <a href="contact.html" style="color:white"> Contact </a>
        <a href="faq.html" style="color:white"> FAQ </a>
        </nav>
        <hr />
    </body>
</html>

В CSS только задний фон на body #151515

Заранее простите за мой тупизм ~(-.-~

Answer 1

Все делается очень просто. Предлагаю сделать данный хедер с помощью флексов. Делаем контейнер main и в нем 2 блока main-logo и main-items. Родителю, то есть main прописываем display: flex; justify-content: space-between; align-items: center; и наше меню готово. Полосу стилизуем с помощью border-botom, который присваиваем нашему main

*{ 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  text-decoration: none; 
  color: #fff; 
} 
 
body{ 
  background: #000; 
} 
 
.menu{ 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-end; 
  border-bottom: 4px solid #fff; 
  padding-bottom: 5px; 
} 
 
.menu-logo{ 
  margin-left: 10px; 
} 
 
.menu-items{ 
  margin-right: 10px; 
} 
 
.menu-item{ 
  margin-left: 30px; 
}

<!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>Document</title> 
</head> 
<body> 
  <menu class="menu"> 
    <div class="menu-logo"> 
      <h1>Logo</h1> 
    </div> 
    <div class="menu-items"> 
      <a class="menu-item" href="#">About</a> 
      <a class="menu-item" href="#">Price</a> 
      <a class="menu-item" href="#">Contact</a> 
      <a class="menu-item" href="#">Faq</a> 
    </div> 
  </menu> 
</body> 
</html>

Answer 2

Ну так измени размеры элементов на css

.header__inner{
  width: 200px;
}
.nav_inner>a{
  font-size: 35px;
  text-decoration: none;
}
hr{
  width: 10px;
  margin-top: 210px;
}

что-то типо того.

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

HTML

html <textarea> не выводит весь текст

Из дб берётся текст, записывается в переменнуюПеременная выводится через php на страницу в <textarea>

102

HTML | Тег header & nav

Форма создания новой страницы на сайте

Как связать селект с чекбоксом?

Разметка страницы в две колонки

html <textarea> не выводит весь текст