Question

我已经使用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;
}

语法查询-使用FlexBox的HTML和CSS响应式导航栏

0 个答案: