SYNTAX QUERY - панель навигации с поддержкой HTML и CSS с использованием FlexBox - PullRequest
Новая
       7

SYNTAX QUERY - панель навигации с поддержкой HTML и CSS с использованием FlexBox

0 голосов
/ 26 ноября 2018

Я создал свой собственный взгляд на панель навигации с помощью FlexBox (в настоящее время не уточняется для небольших медиазапросов на экране).Я просто хотел бы, чтобы кто-то просмотрел мои примечания к коду и увидел, правильно ли я это делаю.

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

Игнорируйте тот факт, что я не использовал классы, пожалуйста.

HTML: 

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="styles/style.css" />
  <meta name="viewport" content-type="width=device-width initial-scale=1" />
  <title>NavBar Examples</title>
</head>

<body>

  <header>
    <nav class="centered-navigation-bar">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  </header>

</body>
</html>

CSS: 

*{
  margin: 0;
  padding: 0;
}

body{
  background-color: #FFF;

font-size: 1.2em;
}

header{
  display: grid;
  grid-template-columns: 20% 60% 20%; /*used to keep the grey bar along the whole of the top, but keep navigation selection area squashed in slightly*/
  width: 100%;
  background-color: #A6A6A6;
}

nav{
  grid-column: 2;

}

nav ul{
  display: flex;
  min-width: 500px; /*stops list items overlapping when smaller screen - will later include media query to fix*/
  margin: auto;
  /*do not use 'justify content' this causes gaps between each list item, and i want seamless link to lin kwhen hovering*/
}

nav ul li{
  width: 20%; /*width of each flex item is 20% as there are 5 items*/
  text-align: center; /*move text to center of individual list item*/
  list-style: none;
}


nav ul li a{
  display: block; /*devault is set to inline which does not expand the 'link area' to fill the list element*/
  color: #FFF;
  padding: 20px;/*this padding changes size of parent list item too*/
  text-decoration: none;
  border-right: solid #FFF 1px;
}

/* border decoration-------------------------------------*/
nav ul li:hover{
  background-color: #767676;
}

nav ul li:first-child{
  border-left: solid #FFF 1px;
}
...