博客列表 >flex导航制作

flex导航制作

「flasky」
「flasky」原创
2021年11月12日 11:58:18425浏览
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>导航条</title>
  6. <style>
  7. *{
  8. margin: 0px;
  9. padding: 0px;
  10. text-decoration: none;
  11. }
  12. a{
  13. color:#fff;
  14. }
  15. nav{
  16. /*height: 60px;*/
  17. background-color: red;
  18. }
  19. li{
  20. list-style: none;
  21. /*padding: 6px 20px;*/
  22. }
  23. li:hover{
  24. background-color: darkred;
  25. }
  26. nav>ul{
  27. /*height: 60px;*/
  28. /*background-color: cornflowerblue;*/
  29. display:flex;
  30. justify-content: center;
  31. align-items: center;
  32. /*margin: 10px auto;*/
  33. }
  34. nav>ul>li{
  35. position: relative;
  36. padding: 10px 20px;
  37. }
  38. nav>ul>li>ul{
  39. background-color:red;
  40. position:absolute;
  41. left:0px;
  42. top: 40px;
  43. display: none;
  44. }
  45. nav>ul>li>ul>li{
  46. padding: 6px 20px;
  47. }
  48. nav>ul>li>ul>li>a{
  49. /*font-size: 14px;*/
  50. }
  51. nav>ul>li:hover>ul{
  52. display: block;
  53. }
  54. </style>
  55. </head>
  56. <body>
  57. <nav>
  58. <ul>
  59. <li><a href="">首 页</a></li>
  60. <li><a href="">直 播</a>
  61. <ul>
  62. <li><a href="">英雄联盟</a></li>
  63. <li><a href="">和平精英</a></li>
  64. <li><a href="">王者荣耀</a></li>
  65. <li><a href="">穿越火线</a></li>
  66. </ul>
  67. </li>
  68. <li><a href="">分类</a>
  69. <ul>
  70. <li><a href="">网游竞技</a></li>
  71. <li><a href="">单机热游</a></li>
  72. <li><a href="">娱乐天地</a></li>
  73. <li><a href="">休闲手游</a></li>
  74. </ul>
  75. </li>
  76. <li><a href="">赛事</a></li>
  77. <li><a href="">视频</a></li>
  78. <li><a href="">网游</a></li>
  79. <li><a href="">云游戏</a></li>
  80. </ul>
  81. </nav>
  82. </body>
  83. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议