Blogger Information
Blog 6
fans 0
comment 0
visits 3185
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
11.11flex布局导航
A
Original
406 people have browsed it

11.11flex布局导航

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. body,header,nav,ul,li{
  8. padding: 0;
  9. margin: 0;
  10. }
  11. a{
  12. text-decoration: none;
  13. color: #fff;
  14. font-size: 20px;
  15. font-weight: 400;
  16. }
  17. header{
  18. background: #666666;
  19. }
  20. nav{
  21. width: 1200px;
  22. margin: 0 auto;
  23. height: auto;
  24. /*position: relative;*/
  25. }
  26. nav>ul{
  27. display: flex;
  28. Justify-content:center;
  29. align-items:center;
  30. flex-grow:5;
  31. position: relative;
  32. }
  33. nav>ul>li{
  34. list-style: none;
  35. /*width: 20%;*/
  36. text-align: center;
  37. padding: 30px 20px;
  38. position: relative;
  39. }
  40. nav>ul>li:hover{
  41. background: #888888;
  42. }
  43. nav>ul>li:hover>ul{
  44. display: block;
  45. }
  46. nav>ul>li>ul{
  47. display: none;
  48. position: absolute;
  49. left: 0;
  50. top: 86px;
  51. }
  52. nav>ul>li>ul>li{
  53. list-style: none;
  54. background: #788888;
  55. padding: 30px 20px;
  56. border-bottom: 1px solid #000000;
  57. color: #fff;
  58. }
  59. nav>ul>li>ul>li:hover{
  60. background: #000000;
  61. }
  62. </style>
  63. </head>
  64. <body>
  65. <header>
  66. <nav>
  67. <ul>
  68. <li><a href="">首页</a></li>
  69. <li>
  70. <a href="">关于我们</a>
  71. <ul>
  72. <li><a href="">公司简介</a></li>
  73. <li><a href="">公司荣誉</a></li>
  74. </ul>
  75. </li>
  76. <li><a href="">新闻资讯</a></li>
  77. <li><a href="">公益动态</a></li>
  78. <li><a href="">联系我们</a></li>
  79. </ul>
  80. </nav>
  81. </header>
  82. </body>
  83. </html>

效果图

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post