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>

效果图

更多相关文章

  1. 自定义导航条样式
  2. 使用css浮动完成网页顶部导航
  3. flex导航制作
  4. 【前端】移动端吸顶后页面滚动，导航也随之变化定位的组件 大家有
  5. 数组遍历代码
  6. 意派Epub360丨国庆节品牌推广H5案例，有趣的作品才更吸引人
  7. 模态框 flex grid
  8. 一句话次导航相关问题
  9. 网站导航如何SEO优化？

随机推荐

  1. Android底层控件随键盘上移
  2. android webkit 网页标签的解析与预下载
  3. Android(安卓)StudioV3.2.1的两种模式及
  4. android手机屏幕横竖屏切换禁止调用生命
  5. 转载：Android中如何修改系统时间（应用程序
  6. Android(安卓)5.0(Lollipop)中的SurfaceT
  7. 【android】 百度地图应用开发（一）
  8. 初学Android——闪光灯当做手电筒使用
  9. Ruby实现Android自动化屏幕适配
  10. 深入浅出Android(安卓)Handler