文章编号：42 / 更新时间：2024-12-29 11:04:25 / 浏览：次

水平导航菜单

• 使用 html

• 使用 CSS

  
  nav {display: flex;justify-content: space-between;align-items: center;padding: 0.5rem 1rem;background-color: f5f5f5;
  }ul {list-style-type: none;display: flex;justify-content: space-around;align-items: center;padding: 0;
  }li {padding: 0.5rem;
  }a {text-decoration: none;color: 000;
  }a:hover {color: 666;
  }
  

垂直导航菜单

• 使用 HTML

• : none;display: flex;flex-direction: column;justify-content: space-around;align-items: center;padding: 0; }li {padding: 0.5rem; }a {text-decoration: none;color: 000; }a:hover {color: 666; }

带有下拉菜单的导航菜单

• 使用 HTML

• 使用 CSS

  
  nav {display: flex;justify-content: space-between;align-items: center;padding: 0.5rem 1rem;background-color: f5f5f5;
  }ul {list-style-type: none;display: flex;justify-content: space-around;align-items: center;padding: 0;
  }li {padding

相关标签： 导航菜单代码是什么、 导航菜单代码大全、

本文地址：https://www.qianwe.cn/article/42.html

上一篇：导航菜单代码大全导航菜单代码是什么...
下一篇：虚拟服务器是什么意思虚拟服务器是端口映射...