Шпаргалки для начинающего верстальщика HTML/CSS. Елена Эберт
Чтение книги онлайн.

Читать онлайн книгу Шпаргалки для начинающего верстальщика HTML/CSS - Елена Эберт страница 4

СКАЧАТЬ получился такой:

      <header>

      <div class=«container»>

      <div class=«header»>

      <img src="img/Logo.png» alt=«logo» class=«logo»>

      <nav class=«menu-list»>

      <a href=«#» class=«menu-link»> Menu One </a>

      <a href=«#» class=«menu-link»> Menu Two </a>

      <a href=«#» class=«menu-link»> Menu Three </a>

      <a href=«#» class=«menu-link»> Menu Four </a>

      </nav>

      <div class=«user»>

      <img src=«img/User icon.png» alt=«user» class=«user-icon»>

      <p class=«user-text»> User </p>

      </div>

      </div>

      </div>

      </header>

      Кратко опишу теги, примененные выше в коде

      <a href=«»> Menu </a> – это тег ссылки. Нажимая на ссылку, мы можем перейти на другую страницу сайта или на другой сайт. В данном теге обязательно должен быть атрибут href, в него записывают адрес страницы, на которую ведет ссылка.

      Лайфхак к ссылке: когда мы только пишем код, на любые ссылки необходимо ставить «затычки» #:

      <a href=«#»> </a>

      <nav> – используют для обозначения содержимого в форме основных навигационных ссылок. Документ может иметь несколько данных элементов, к примеру, один для навигации по сайту, а второй для навигации по странице.

      <p> – определяет абзац в HTML-документе, при его отображении браузер автоматически вставляет до и после него отступы.

      Оформляем шапку первого типа в CSS

      Описать универсальное оформление шапки сайта в CSS на порядок сложнее, чем в HTML, постараюсь указать основное.

      Во-первых, нам нужно ограничить контейнер, то есть задать ему максимальную ширину, для каждого макета она своя, а также выравниваем содержимое данного контейнера по середине – margin: auto;

      .container {

      max-width: 1140px;

      margin: auto;

      }

      В классе header можно поставить универсальное выравнивание элементов по центру, чтобы выровнять логотип соответственно прочим элементам шапки, также универсально распределение элементов органично по длине шапки и пр.

      .header {

      display: flex; /*выравнивание по центру по вертикали*/

      align-items: center; /*раскидываем по сторонам*/

      justify-content: space-between;

      }

      justify-cоntent: space-between; – данное свойство равномерно распределяет элементы по всей строке. Первый и последний элемент прижимаются к соответствующим краям нашего контейнера. В целом про свойство justify-content смотрите далее.

      display: flex; – делает все дочерние элементы резиновыми – flex, а не блочными, как было изначально. Если родительский блок содержит, например, графические элементы, они становятся анонимными flex-элементами.

      Оформим непосредственно меню, ниже указан пример, отмечу, что при работе над проектом данные вы должны смотреть в своем макете (боковая панель слева).

      .menu-link {

      font-size: 16px;

      line-height: 24px;

      color: #2E266F;

      text-decoration: none;

      margin-right: 45px;

      }

      Кратко опишу теги, примененные выше в коде

      text-decoration: none; – убирает автоматическое подчеркивание в созданном нами списке

      font-size: – СКАЧАТЬ