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

练习做导航

程序员文章站 2022-03-03 23:13:56
...
    

  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: 0;
    9. 

  9.             padding: 0;
    10. 

  10.         }
    11. 

  11.         a{
    12. 

  12.             text-decoration: none;
    13. 

  13.             color: #333;
    14. 

    15. 

  15.         }
    16. 

  16.         body{
    17. 

  17.             background-color: #eee;
    18. 

  18.         }
    19. 

  19.         li{
    20. 

  20.             list-style: none;
    21. 

  21.         }
    22. 

  22.         nav{
    23. 

  23.             background-color: #fff;
    24. 

  24.             /*height: 60px;*/
    25. 

  25.         }
    26. 

  26.         nav>ul{
    27. 

  27.             display: flex;
    28. 

  28.             height: 60px;
    29. 

  29.             justify-content: center;
    30. 

  30.             /*align-items: center;*/
    31. 

  31.             /*overflow: hidden;*/
    32. 

    33. 

    34. 

  34.         }
    35. 

  35.         nav>ul>li:hover,nav>ul>li>ul>li:hover{
    36. 

  36.             /*padding: 15px 25px;*/
    37. 

  37.             background: #eaeaea;
    38. 

  38.         }
    39. 

  39.         nav>ul>li:hover>ul{
    40. 

  40.         display: block;
    41. 

  41.         }
    42. 

  42.         nav>ul>li:hover>a,nav>ul>li>ul>li:hover>a{
    43. 

  43.             color: red;
    44. 

  44.         }
    45. 

    46. 

  46.         nav>ul>li>a, nav>ul>li>ul>li>a{
    47. 

  47.             padding: 15px 25px;
    48. 

  48.             display: block;
    49. 

  49.         }
    50. 

  50.         nav>ul>a>li>img{
    51. 

  51.             /*width: 100px;*/
    52. 

  52.             /*overflow: hidden;*/
    53. 

  53.             height: 50px;
    54. 

  54.         }
    55. 

    56. 

  56.         .logophp{
    57. 

  57.             background: url("https://www.php.cn/static/images/PHPlogo.png") no-repeat center center;
    58. 

  58.             display: block;
    59. 

  59.             height: 60px;
    60. 

  60.             width: 140px;
    61. 

  61.             overflow: hidden;
    62. 

  62.             background-size: 100%;
    63. 

  63.             white-space: nowrap;
    64. 

  64.             text-indent:100%;
    65. 

  65.             float: left;
    66. 

  66.             /*align-self:flex-start;*/
    67. 

    68. 

  68.         }
    69. 

  69.     nav>ul>li:first-child>a{
    70. 

  70.         color: red;
    71. 

  71.     }
    72. 

  72.     nav>ul>li{
    73. 

  73.         position: relative;
    74. 

  74.     }
    75. 

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

  76.             background: #fff;
    77. 

  77.             position: absolute;
    78. 

  78.             left: 0;
    79. 

  79.             top: 60px;
    80. 

  80.             display: none;
    81. 

  81.         }
    82. 

  82.     </style>
    83. 

  83. </head>
    84. 

  84. <body>
    85. 

  85. <nav>
    86. 

  86.     <div class="logophp">
    87. 

  87.     </div>
    88. 

  88.     <ul>
    89. 

    90. 

  90. <!--        <a href=""><li><img src="https://www.php.cn/static/images/logos.png" alt=""></li></a>-->
    91. 

  91.         <li><a href="">首页</a></li>
    92. 

  92.         <li><a href="">视频教程</a>
    93. 

  93.             <ul>
    94. 

  94.                 <li><a href="">视频课程</a></li>
    95. 

  95.                 <li><a href="">直翻课程</a></li>
    96. 

  96.             </ul>
    97. 

  97.         </li>
    98. 

  98.         <li><a href="">学习路径</a>
    99. 

  99.             <ul>
    100. 

  100.                 <li><a href="">入门教程</a></li>
    101. 

  101.                 <li><a href="">独孤九贱</a></li>
    102. 

  102.                 <li><a href="">玉女心经</a></li>
    103. 

  103.                 <li><a href="">天龙八部</a></li>
    104. 

  104.                 <li><a href="">趣味闯关</a></li>
    105. 

  105.             </ul>
    106. 

  106.         </li>
    107. 

  107.         <li><a href="">技术文章</a>
    108. 

  108.             <ul>
    109. 

  109.                 <li><a href="">头条</a></li>
    110. 

  110.                 <li><a href="">前端开发</a></li>
    111. 

  111.                 <li><a href="">后端开发</a></li>
    112. 

  112.                 <li><a href="">数据库</a></li>
    113. 

  113.                 <li><a href="">PHP框架</a></li>
    114. 

  114.                 <li><a href="">每日编程</a></li>
    115. 

  115.             </ul>
    116. 

  116.         </li>
    117. 

  117.         <li><a href="">编程词典</a>
    118. 

  118.             <ul>
    119. 

  119.                 <li><a href="">HTML/CSS</a></li>
    120. 

  120.                 <li><a href="">JavaCript</a></li>
    121. 

  121.                 <li><a href="">服务器</a></li>
    122. 

  122.                 <li><a href="">数据库</a></li>
    123. 

  123.                 <li><a href="">移动源</a></li>
    124. 

  124.                 <li><a href="">XML</a></li>
    125. 

  125.                 <li><a href="">ASP.NET</a></li>
    126. 

  126.                 <li><a href="">Web Services</a></li>
    127. 

  127.                 <li><a href="">开发工具</a></li>
    128. 

  128.                 <li><a href="">网站建设</a></li>
    129. 

  129.             </ul>
    130. 

  130.         </li>
    131. 

  131.         <li><a href="">资料下载</a>
    132. 

  132.             <ul>
    133. 

  133.                 <li><a href="">工具下载</a></li>
    134. 

  134.                 <li><a href="">在线工具</a></li>
    135. 

  135.                 <li><a href="">手册下载</a></li>
    136. 

  136.                 <li><a href="">电子课件</a></li>
    137. 

  137.                 <li><a href="">JS特效</a></li>
    138. 

  138.                 <li><a href="">网站源码</a></li>
    139. 

  139.                 <li><a href="">网站素材</a></li>
    140. 

  140.                 <li><a href="">类库下载</a></li>
    141. 

  141.             </ul>
    142. 

  142.         </li>
    143. 

  143.         <li><a href="">社区</a>
    144. 

  144.             <ul>
    145. 

  145.                 <li><a href="">问答</a></li>
    146. 

  146.                 <li><a href="">博客</a></li>
    147. 

  147.             </ul>
    148. 

  148.         </li>
    149. 

  149.     </ul>
    150. 

  150. </nav>
    151. 

  151. </body>
    152. 

  152. </html>
    153.

上一篇： 如何用PHP编辑一盒简单的图形计算器？

下一篇： HTML学习(二) 表单的制作习作

推荐阅读