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

导航制作flex

程序员文章站 2022-03-03 23:25:01
...
    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <title>flex练习</title>
    5. 

  5. <meta name="keywords" content="html5,css3,js">
    6. 

  6. <meta name="description" content="html5,css3,js,描述的内容">
    7. 

    8. 

  8. <style>
    9. 

  9.    body,ul
    10. 

  10.       {
    11. 

  11.        padding: 0;
    12. 

  12.        margin: 0;
    13. 

  13.       }
    14. 

  14.     li {list-style: none;}
    15. 

  15.     a{
    16. 

  16.         text-decoration: none;
    17. 

  17.         color: white;
    18. 

  18.     }
    19. 

  19.     .dh>ul{
    20. 

  20.         display: flex;
    21. 

  21.         justify-content: center;
    22. 

  22.         background-color: red;
    23. 

  23.     }
    24. 

  24.    .dh>ul>li{
    25. 

    26. 

  26.        height: 40px;
    27. 

  27.        width: 80px;
    28. 

  28.        line-height: 40px;
    29. 

  29.        text-align: center;
    30. 

    31. 

  31.    }
    32. 

  32.    .dh>ul>li:hover{
    33. 

  33.        background-color: brown;
    34. 

  34.    }
    35. 

  35.    .list{
    36. 

  36.        position: relative;
    37. 

  37.    }
    38. 

    39. 

  39.    .list_1{
    40. 

  40.         background-color: red;
    41. 

  41.         width: 80px;
    42. 

  42.        position: absolute;
    43. 

  43.        left: 0px;
    44. 

  44.        display: none;
    45. 

  45.    }
    46. 

  46.    .list_1>li:hover{
    47. 

  47.        background-color: brown;
    48. 

  48.    }
    49. 

  49.    .list:hover .list_1{
    50. 

  50.        display: block;
    51. 

  51.    }
    52. 

    53. 

    54. 

  54. </style>
    55. 

  55. </head>
    56. 

  56. <body>
    57. 

  57.   <nav class="dh">
    58. 

  58.       <ul>
    59. 

  59.           <li><a href="#">要闻</a></li>
    60. 

  60.           <li><a href="#">国际</a></li>
    61. 

  61.           <li><a href="#">国内</a></li>
    62. 

  62.           <li><a href="#">娱乐</a></li>
    63. 

  63.           <li class="list"><a href="#">体育</a>
    64. 

  64.           <ul class="list_1">
    65. 

  65.               <li><a href="#">篮球</a></li>
    66. 

  66.               <li><a href="#">足球</a></li>
    67. 

  67.               <li><a href="#">羽毛球</a></li>
    68. 

  68.               <li><a href="#">网球</a></li>
    69. 

  69.           </ul>
    70. 

  70.           </li>
    71. 

  71.           <li><a href="#">军事</a></li>
    72. 

    73. 

  73.       </ul>
    74. 

  74.   </nav>
    75. 

    76. 

    77. 

    78. 

  78. </body>
    79. 

  79. </html>![](https://img.php.cn/upload/image/354/315/532/1636700782815960.png)
    80.

上一篇： 箭头函数的基础使用

下一篇： NPM 和webpack 的基础使用

推荐阅读