search

博客列表 >11.11flex布局导航

11.11flex布局导航

A
A原创
2021年11月12日 19:40:42405浏览

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>

效果图

上一条：理解弹性盒子下一条：HTML标签作业之table-lesson02
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多