Дублирую панель навигации Youtube, но у меня есть привычка использовать положение: абсолютное;Мне нужен более эффективный способ сделать это - PullRequest
Новая
       5

Дублирую панель навигации Youtube, но у меня есть привычка использовать положение: абсолютное;Мне нужен более эффективный способ сделать это

0 голосов
/ 10 февраля 2019

Это воплощение кода DRY, мне нужно найти эффективный способ написания этого кода.В настоящее время я использую The Odin Project , и рекомендации были в разделе видео Duplicate Youtube.Я закончил навигационную панель, но я недоволен этим, потому что я просто использую положение: абсолютное все время.Я собирался использовать Grid или flexbox, но я не знаю, поможет ли это. 

* {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

body {
  background-color: #f8f8f8;
}

.navigation {
  height: 70px;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 1px 4px #ebebeb;
}

.menu {
  position: absolute;
  left: 30px;
  top: 22px;
  opacity: .4;
  cursor: pointer;
}

.menu:hover {
  opacity: 1;
}

.youtube-logo {
  width: 90px;
  position: absolute;
  left: 70px;
  top: 10px;
}

.search-bar {
  position: absolute;
  top: 21px;
  left: 390px;
  width: 600px;
  height: 33px;
  background: url(images/search.svg) no-repeat 95% 50%;
  background-size: 16px;
  border-radius: 2px;
  border: 1px solid #b3b3b3;
  padding-left: 20px;
  box-sizing: border-box;
  outline: none;
}

 ::placeholder {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2em;
  padding-left: 3px;
}

.video {
  position: absolute;
  left: 1150px;
  top: 25px;
  cursor: pointer;
  opacity: .4;
}

.stack {
  position: absolute;
  left: 1210px;
  cursor: pointer;
  width: 18px;
  opacity: .4;
  top: 27px;
}

.message {
  position: absolute;
  left: 1265px;
  top: 24px;
  ;
  opacity: .4;
  cursor: pointer;
}

.bell {
  position: absolute;
  left: 1320px;
  top: 23px;
  opacity: .4;
  cursor: pointer;
}

.icon {
  position: absolute;
  top: 16px;
  left: 1374px;
  cursor: pointer;
  width: 36px;
  opacity: .4;
}
<nav class="navigation">
  <img src="images/menu.svg" alt="menu for the top left, shaped like a hamburger" class="menu">

  <img src="images/youtube.logo.png" alt="youtube logo" class="youtube-logo">

  <input type="text" name="searchbar" placeholder="Search" class="search-bar">

  <img src="images/video.svg" alt="video icon" class="video">

  <img src="images/google-app-button.png" alt="square stacks" class="stack">

  <img src="images/message-square (1).svg" alt="message forr youtube" class="message">

  <img src="images/bell.svg" alt="bell for top right bar" class="bell">

  <img src="images/icons8-male-user-512.png" alt="profile picture for the bar" class="icon">

</nav>

1 Ответ

0 голосов
/ 10 февраля 2019

Flexbox довольно прост.Вам нужно только установить display: flex; для родительского элемента, и дочерние элементы будут затронуты. 

.parent-flex {
  display: flex;
}
<h2>Without Flexbox</h2>
<div>
  <div>Child 1</div>
  <div>Child 2</div>
  <div>Child 3</div>
</div>

<h2>With Flexbox</h2>
<div class="parent-flex">
  <div class="child-1">Child 1</div>
  <div class="child-2">Child 2</div>
  <div class="child-3">Child 3</div>
</div>

Поскольку вы пытаетесь скопировать панель навигации на YouTube, я бы рекомендовал использовать flexbox для настройки «областей» панели навигации и затем применить justify-content: space-between; кразнесите регионы одинаково. 

.flex {
  display: flex;
}

.parent {
  justify-content: space-between;
}

.child-1 {}

.child-2 {}

.child-3 {
  justify-content: flex-end;
}
<div class="flex parent">
  <div class="flex child-1">
    <div class="menu">[Menu Icon]</div>
    <div class="logo">[Logo]</div>
  </div>
  <div class="flex child-2">
    <div class="search-box">[search box]</div>
    <div class="search-button">[search button]</div>
  </div>
  <div class="flex child-3">
    <div class="user-photo">[the user's photo]</div>
    <div class="etc">[whatever other icons...]</div>
  </div>
</div>

Вы можете проверить эту замечательную статью о трюках css, чтобы узнать больше о плюсах и минусах flexbox.

https://css -tricks.com / сниппеты / CSS / а-руководство к Flexbox /

...