链接样式

链接状态

注意 如果要给所有这些状态都添加样式,请遵循 LVHFA 顺序法则。

导航栏

<nav>
  <ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">HTTP</a></li>
  </ul>
</nav>
body { 
  margin: 0; 
  font-family: 'Source Code Pro', monospace;
}

nav { 
  width: 680px;
  margin: auto;
}

ul {
  padding: 0;
  overflow: hidden;
  list-style: none; 
}

ul > li { 
  float: left;
}

ul > li > a {
  color: white;
  width: 170px;
  height: 50px;
  display: block;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  transition: all .2s ease;
}

ul > li > a:hover {
  font-size: 24px;
}

ul > li:nth-child(1) > a {
  background: deepskyblue;
}

ul > li:nth-child(2) > a {
  background: limegreen;
}

ul > li:nth-child(3) > a {
  background: darkorange;
}

ul > li:nth-child(4) > a {
  background: blueviolet;
}

🚀 https://codepen.io/twhy/pen/zzqeVp

参考链接

results matching ""

    No results matching ""