css:topnav

topnav.css

/* 导航条 */
nav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
nav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
nav a:hover {
  background-color: #ddd;
  color: black;
}

/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  nav a {
    float: none;
    width: 100%;
  }
}