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

自定义导航条样式

程序员文章站 2023-12-21 17:29:40
...
    

  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.         body,nav>ul{
    9. 

  9.             margin: 0;
    10. 

  10.             padding: 0;
    11. 

  11.         }
    12. 

  12.         body{
    13. 

  13.             background: #e1dada;
    14. 

  14.         }
    15. 

  15.         nav>ul{
    16. 

  16.             background: white;
    17. 

  17.         }
    18. 

  18.         /*定义伸缩盒子*/
    19. 

  19.         .flex{
    20. 

  20.             display: flex;
    21. 

  21.             /*宽度铺满*/
    22. 

  22.             width: 100%;
    23. 

  23.             /*最低宽度*/
    24. 

  24.             min-width: 1024px ;
    25. 

  25.             height: 70px;
    26. 

  26.             /*使li分散对齐*/
    27. 

  27.             Justify-content:space-around;
    28. 

  28.             /*超出部分隐藏*/
    29. 

  29.             /*overflow:hidden;*/
    30. 

  30.         }
    31. 

  31.         /*去除li前的小点*/
    32. 

  32.         nav>ul>li{
    33. 

  33.             list-style-type: none;
    34. 

  34.             line-height: 70px;
    35. 

  35.         }
    36. 

  36.         a{
    37. 

  37.             /*去除a标签下的样式*/
    38. 

  38.             text-decoration: none;
    39. 

  39.             /*设置文字的颜色*/
    40. 

  40.             color: grey;
    41. 

  41.         }
    42. 

  42.         /*设置logo*/
    43. 

  43.         .logo img{
    44. 

  44.             height: 70px;
    45. 

  45.             width: 120px;
    46. 

  46.         }
    47. 

  47.         /*一级菜单鼠标悬停效果*/
    48. 

  48.         nav>ul>li>a:hover{
    49. 

  49.             color: red;
    50. 

  50.             background-color: white;
    51. 

  51.         }
    52. 

  52.         .erjiul{
    53. 

  53.             background-color: white;
    54. 

  54.             width: 200px;
    55. 

  55.             padding-left: 0;
    56. 

  56.             /*隐藏二级菜单*/
    57. 

  57.             display: none;
    58. 

  58.         }
    59. 

  59.         .erjiul>li{
    60. 

  60.             list-style-type: none;
    61. 

  61.         }
    62. 

  62.         .erjiul>li>a{
    63. 

  63.             text-align: left;
    64. 

  64.             padding-left: 5px;
    65. 

  65.         }
    66. 

  66.         /*二级菜单的悬停效果*/
    67. 

  67.         .erjiul>li>a:hover{
    68. 

  68.             color: red;
    69. 

  69.         }
    70. 

  70.         nav>ul>li:hover>ul{
    71. 

  71.             /*显示二级菜单*/
    72. 

  72.             display: block;
    73. 

  73.         }
    74. 

  74.         /*输入框的样式*/
    75. 

  75.         nav>ul>li>form>input{
    76. 

  76.             border: 1px #e1dada solid;border-radius: 5px;height: 30px;
    77. 

  77.         }
    78. 

  78.     </style>
    79. 

  79. </head>
    80. 

  80. <body>
    81. 

  81. <nav>
    82. 

  82.     <ul class="flex">
    83. 

  83.         <li class="logo"><span><a href="" ><img src="https://www.php.cn/static/images/PHPlogo.png" alt=""> </a></span></li>
    84. 

  84.         <li>
    85. 

  85.             <a href=""> 下载站首页 v </a>
    86. 

  86.             <ul class="erjiul">
    87. 

  87.                 <li><a href="">PHP开发编辑器</a></li>
    88. 

  88.                 <li><a href="">JAVA开发编辑器</a></li>
    89. 

  89.                 <li><a href="">PYTHON开发编辑器</a></li>
    90. 

  90.             </ul>
    91. 

  91.         </li>
    92. 

  92.         <li>
    93. 

  93.             <a href=""> JS特效 v </a>
    94. 

  94.             <ul class="erjiul">
    95. 

  95.                 <li><a href="">聚焦幻灯</a></li>
    96. 

  96.                 <li><a href="">图片特效</a></li>
    97. 

  97.             </ul>
    98. 

  98.         </li>
    99. 

  99.         <li><a href=""> 网站源码 v </a></li>
    100. 

  100.         <li><a href=""> 工具下载 v </a></li>
    101. 

  101.         <li><a href=""> 手册下载 v </a></li>
    102. 

  102.         <li>
    103. 

  103.             <form action="">
    104. 

  104.                 <input  type="search" placeholder="搜索" onchange="alert(this.value)" name="" id="">
    105. 

  105.             </form>
    106. 

    107. 

  107.         </li>
    108. 

    109. 

  109.     </ul>
    110. 

  110. </nav>
    111. 

    112. 

  112. </body>
    113. 

  113. </html>
    114.

上一篇：

下一篇：

推荐阅读