Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 11.11flex布局导航
Blogger Information
Blog 6
fans 0
comment 0
visits 3175
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
11.11flex布局导航
A
Original
403 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;
  33.         }
  34.         nav>ul>li{
  35.             list-style: none;
  36.             /*width: 20%;*/
  37.             text-align: center;
  38.             padding: 30px 20px;
  39.             position: relative;
  40.         }
  41.         nav>ul>li:hover{
  42.             background: #888888;
  43.         }
  44.         nav>ul>li:hover>ul{
  45.             display: block;
  46.         }
  48.         nav>ul>li>ul{
  49.             display: none;
  50.             position: absolute;
  51.             left: 0;
  52.             top: 86px;
  54.         }
  55.         nav>ul>li>ul>li{
  56.             list-style: none;
  57.             background: #788888;
  58.             padding: 30px 20px;
  59.             border-bottom: 1px solid #000000;
  60.             color: #fff;
  61.         }
  62.         nav>ul>li>ul>li:hover{
  63.             background: #000000;
  64.         }
  66.     </style>
  67. </head>
  68. <body>
  69. <header>
  70.   <nav>
  71.     <ul>
  72.         <li><a href="">首页</a></li>
  73.         <li>
  74.             <a href="">关于我们</a>
  75.              <ul>
  76.                  <li><a href="">公司简介</a></li>
  77.                  <li><a href="">公司荣誉</a></li>
  78.              </ul>
  79.         </li>
  80.         <li><a href="">新闻资讯</a></li>
  81.         <li><a href="">公益动态</a></li>
  82.         <li><a href="">联系我们</a></li>
  83.     </ul>
  84.   </nav>
  85. </header>
  87. </body>
  88. </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