博客列表 >练习做导航

练习做导航

「flasky」
「flasky」原创
2021年11月12日 14:41:03470浏览
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>php中文网</title>
  6. <style>
  7. *{
  8. margin: 0;
  9. padding: 0;
  10. }
  11. a{
  12. text-decoration: none;
  13. color: #333;
  14. }
  15. body{
  16. background-color: #eee;
  17. }
  18. li{
  19. list-style: none;
  20. }
  21. nav{
  22. background-color: #fff;
  23. /*height: 60px;*/
  24. }
  25. nav>ul{
  26. display: flex;
  27. height: 60px;
  28. justify-content: center;
  29. /*align-items: center;*/
  30. /*overflow: hidden;*/
  31. }
  32. nav>ul>li:hover,nav>ul>li>ul>li:hover{
  33. /*padding: 15px 25px;*/
  34. background: #eaeaea;
  35. }
  36. nav>ul>li:hover>ul{
  37. display: block;
  38. }
  39. nav>ul>li:hover>a,nav>ul>li>ul>li:hover>a{
  40. color: red;
  41. }
  42. nav>ul>li>a, nav>ul>li>ul>li>a{
  43. padding: 15px 25px;
  44. display: block;
  45. }
  46. nav>ul>a>li>img{
  47. /*width: 100px;*/
  48. /*overflow: hidden;*/
  49. height: 50px;
  50. }
  51. .logophp{
  52. background: url("https://www.php.cn/static/images/PHPlogo.png") no-repeat center center;
  53. display: block;
  54. height: 60px;
  55. width: 140px;
  56. overflow: hidden;
  57. background-size: 100%;
  58. white-space: nowrap;
  59. text-indent:100%;
  60. float: left;
  61. /*align-self:flex-start;*/
  62. }
  63. nav>ul>li:first-child>a{
  64. color: red;
  65. }
  66. nav>ul>li{
  67. position: relative;
  68. }
  69. nav>ul>li>ul{
  70. background: #fff;
  71. position: absolute;
  72. left: 0;
  73. top: 60px;
  74. display: none;
  75. }
  76. </style>
  77. </head>
  78. <body>
  79. <nav>
  80. <div class="logophp">
  81. </div>
  82. <ul>
  83. <!-- <a href=""><li><img src="https://www.php.cn/static/images/logos.png" alt=""></li></a>-->
  84. <li><a href="">首页</a></li>
  85. <li><a href="">视频教程</a>
  86. <ul>
  87. <li><a href="">视频课程</a></li>
  88. <li><a href="">直翻课程</a></li>
  89. </ul>
  90. </li>
  91. <li><a href="">学习路径</a>
  92. <ul>
  93. <li><a href="">入门教程</a></li>
  94. <li><a href="">独孤九贱</a></li>
  95. <li><a href="">玉女心经</a></li>
  96. <li><a href="">天龙八部</a></li>
  97. <li><a href="">趣味闯关</a></li>
  98. </ul>
  99. </li>
  100. <li><a href="">技术文章</a>
  101. <ul>
  102. <li><a href="">头条</a></li>
  103. <li><a href="">前端开发</a></li>
  104. <li><a href="">后端开发</a></li>
  105. <li><a href="">数据库</a></li>
  106. <li><a href="">PHP框架</a></li>
  107. <li><a href="">每日编程</a></li>
  108. </ul>
  109. </li>
  110. <li><a href="">编程词典</a>
  111. <ul>
  112. <li><a href="">HTML/CSS</a></li>
  113. <li><a href="">JavaCript</a></li>
  114. <li><a href="">服务器</a></li>
  115. <li><a href="">数据库</a></li>
  116. <li><a href="">移动源</a></li>
  117. <li><a href="">XML</a></li>
  118. <li><a href="">ASP.NET</a></li>
  119. <li><a href="">Web Services</a></li>
  120. <li><a href="">开发工具</a></li>
  121. <li><a href="">网站建设</a></li>
  122. </ul>
  123. </li>
  124. <li><a href="">资料下载</a>
  125. <ul>
  126. <li><a href="">工具下载</a></li>
  127. <li><a href="">在线工具</a></li>
  128. <li><a href="">手册下载</a></li>
  129. <li><a href="">电子课件</a></li>
  130. <li><a href="">JS特效</a></li>
  131. <li><a href="">网站源码</a></li>
  132. <li><a href="">网站素材</a></li>
  133. <li><a href="">类库下载</a></li>
  134. </ul>
  135. </li>
  136. <li><a href="">社区</a>
  137. <ul>
  138. <li><a href="">问答</a></li>
  139. <li><a href="">博客</a></li>
  140. </ul>
  141. </li>
  142. </ul>
  143. </nav>
  144. </body>
  145. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议