欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

flex导航制作

程序员文章站 2023-12-21 17:51:10
...
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>导航条</title>
    6. 

  6.     <style>
    7. 

  7.         *{
    8. 

  8.             margin: 0px;
    9. 

  9.             padding: 0px;
    10. 

  10.             text-decoration: none;
    11. 

    12. 

  12.         }
    13. 

  13.         a{
    14. 

  14.             color:#fff;
    15. 

  15.         }
    16. 

  16.         nav{
    17. 

  17.             /*height: 60px;*/
    18. 

  18.             background-color: red;
    19. 

  19.         }
    20. 

  20.         li{
    21. 

  21.             list-style: none;
    22. 

  22.             /*padding: 6px 20px;*/
    23. 

    24. 

  24.         }
    25. 

  25.         li:hover{
    26. 

  26.             background-color: darkred;
    27. 

  27.         }
    28. 

  28.         nav>ul{
    29. 

  29.             /*height: 60px;*/
    30. 

  30.             /*background-color: cornflowerblue;*/
    31. 

  31.             display:flex;
    32. 

  32.             justify-content: center;
    33. 

  33.             align-items: center;
    34. 

  34.             /*margin: 10px auto;*/
    35. 

    36. 

  36.         }
    37. 

  37.         nav>ul>li{
    38. 

  38.             position: relative;
    39. 

  39.             padding: 10px 20px;
    40. 

    41. 

  41.         }
    42. 

  42.         nav>ul>li>ul{
    43. 

  43.             background-color:red;
    44. 

  44.             position:absolute;
    45. 

  45.             left:0px;
    46. 

  46.             top: 40px;
    47. 

  47.             display: none;
    48. 

  48.         }
    49. 

  49.         nav>ul>li>ul>li{
    50. 

  50.             padding: 6px 20px;
    51. 

  51.         }
    52. 

  52.         nav>ul>li>ul>li>a{
    53. 

  53.             /*font-size: 14px;*/
    54. 

  54.         }
    55. 

  55.         nav>ul>li:hover>ul{
    56. 

  56.             display: block;
    57. 

  57.         }
    58. 

  58.     </style>
    59. 

  59. </head>
    60. 

  60. <body>
    61. 

  61. <nav>
    62. 

  62.     <ul>
    63. 

  63.         <li><a href="">首 页</a></li>
    64. 

  64.         <li><a href="">直 播</a>
    65. 

  65.             <ul>
    66. 

  66.                 <li><a href="">英雄联盟</a></li>
    67. 

  67.                 <li><a href="">和平精英</a></li>
    68. 

  68.                 <li><a href="">王者荣耀</a></li>
    69. 

  69.                 <li><a href="">穿越火线</a></li>
    70. 

  70.             </ul>
    71. 

  71.         </li>
    72. 

  72.         <li><a href="">分类</a>
    73. 

  73.         <ul>
    74. 

  74.             <li><a href="">网游竞技</a></li>
    75. 

  75.             <li><a href="">单机热游</a></li>
    76. 

  76.             <li><a href="">娱乐天地</a></li>
    77. 

  77.             <li><a href="">休闲手游</a></li>
    78. 

  78.         </ul>
    79. 

  79.         </li>
    80. 

  80.         <li><a href="">赛事</a></li>
    81. 

  81.         <li><a href="">视频</a></li>
    82. 

  82.         <li><a href="">网游</a></li>
    83. 

  83.         <li><a href="">云游戏</a></li>
    84. 

  84.     </ul>
    85. 

  85. </nav>
    86. 

  86. </body>
    87. 

  87. </html>
    88.

上一篇：

下一篇：

推荐阅读