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

弹性布局和下拉列表

程序员文章站 2022-03-07 19:45:18
...
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. /*去除自带效果*/
  10. body,nav>ul{
  11. margin:0;
  12. padding: 0;
  13. }
  14. /*去除li前的小点*/
  15. nav>ul>li>ul>li{
  16. list-style-type: none;
  17. /* line-height: 70px; */
  18. color: blueviolet;
  19. }
  20. nav>ul>li>ul>li{
  21. border-bottom:1px solid rgb(245, 245, 245);
  22. width: 120px;
  23. }
  24. a{
  25. /*去除a标签下的样式*/
  26. text-decoration: none;
  27. /*设置文字的颜色*/
  28. color: grey;
  29. /* a是行内元素,要用宽度得转成块级元素 */
  30. display:block;
  31. text-align: center;
  32. width:120px;
  33. }
  34. /*设置logo*/
  35. .tupian img{
  36. height: 50px;
  37. width: 120px;
  38. }
  39. .daohang{
  40. background: #74cdf0;
  41. display: flex;
  42. /*宽度铺满*/
  43. width: 100%;
  44. /*最低宽度*/
  45. min-width: 1024px ;
  46. height: 50px;
  47. /*使li分散对齐*/
  48. Justify-content:space-around;
  49. /*超出部分隐藏*/
  50. /*overflow:hidden;*/
  51. list-style-type: none;
  52. /* align-items: center; */
  53. /* height:50px; */
  54. line-height:50px;
  55. /* 固定高度的设置行高, 文字在行中间。
  56. 变高的padding-top:20px; padding-bottom:20px; 设置边距 */
  57. }
  58. .neirong{
  59. background-color: rgb(189, 234, 255);
  60. padding-left: 0;
  61. /*隐藏二级菜单*/
  62. display: none;
  63. }
  64. .liebiao{
  65. background-color: rgb(189, 234, 255);
  66. padding-left: 0;
  67. /*隐藏二级菜单*/
  68. }
  69. nav>ul>li:hover>ul{
  70. /*显示二级菜单*/
  71. display: block;
  72. }
  73. /*一级级菜单鼠标悬停效果*/
  74. nav>ul>li:hover{
  75. background-color: rgb(255, 253, 136);
  76. }
  77. /*二级级菜单鼠标悬停效果*/
  78. .neirong>li>a:hover{
  79. background-color: rgb(138, 255, 187);
  80. }
  81. /* 一二级菜单鼠标悬停效果
  82. nav>ul>li:hover,nav>ul>li>ul>li:hover {
  83. background: #e2ff94;
  84. }
  85. */
  86. /*输入框的样式*/
  87. nav>ul>li>form>input{
  88. border: 1px #8ffff9 solid;border-radius: 5px;height: 30px;
  89. }
  90. </style>
  91. </head>
  92. <body>
  93. <nav>
  94. <ul class="daohang">
  95. <li class="tupian"><span><a href="">
  96. <img src=
  97. "http://d300.paixin.com/thumbs/1028599/3836308/staff_1024.jpg"
  98. alt=""></a></span></li>
  99. <li>
  100. <a href="">文章类</a>
  101. <ul class="neirong">
  102. <li><a class="liebiao" href="">2</a></li>
  103. <li><a class="liebiao" href="">2</a></li>
  104. <li><a class="liebiao" href="">2</a></li>
  105. <li><a class="liebiao" href="">2</a></li>
  106. </ul>
  107. </li>
  108. <li>
  109. <a href="">视频类</a>
  110. <ul class="neirong">
  111. <li><a href=""></a>1</li>
  112. <li><a href=""></a>1</li>
  113. <li><a href=""></a>1</li>
  114. <li><a href=""></a>1</li>
  115. </ul>
  116. </li>
  117. <li>
  118. <a href="">音频类</a>
  119. <ul class="neirong">
  120. <li><a href=""></a>1</li>
  121. <li><a href=""></a>1</li>
  122. <li><a href=""></a>1</li>
  123. <li><a href=""></a>1</li>
  124. </ul>
  125. </li>
  126. <li>
  127. <form action="">
  128. <input type="search" placeholder="搜索" onchange="alert(this.value)" name="" id="">
  129. </form>
  130. </li>
  131. </ul>
  132. </nav>
  133. </body>
  134. </html>