search

博客列表 >理解弹性盒子

理解弹性盒子

培(信仰)
培(信仰)原创
2021年11月12日 19:56:19542浏览

理解弹性盒子

效果图

弹性盒子

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>理解弹性盒子</title>
  9.     <style>
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         li {
  16.             list-style: none;
  17.         }
  19.         a {
  20.             text-decoration: none;
  21.             color: #aaa
  22.         }
  24.         a:hover {
  25.             color: red;
  26.             text-decoration: underline;
  27.         }
  29.         .myjd a:hover {
  30.             color: red;
  31.             text-decoration: underline;
  32.             background-color: #fff;
  33.         }
  35.         .myjd:hover ul {
  36.             background-color: #fff;
  37.             display: block;
  38.         }
  40.         nav {
  41.             height: 50px;
  42.             margin: 0 auto;
  43.             background: #ccc;
  44.         }
  46.         nav>ul {
  47.             box-sizing: border-box;
  48.             display: flex;
  49.             justify-content: center;
  50.             align-items: center;
  51.         }
  53.         nav>ul>li {
  54.             position: relative;
  55.             margin: 10px 20px;
  56.         }
  58.         .jd-group ul {
  59.             position: absolute;
  60.             background: #fff;
  61.             left: 0px;
  62.             display: none;
  63.         }
  65.         .jd-group ul>li {
  66.             padding: 10px 10px;
  67.             width: 90px;
  68.         }
  69.     </style>
  70. </head>
  72. <body>
  73.     <nav>
  74.         <ul>
  75.             <li><a href="">我的订单</a></li>
  76.             <li class="myjd">
  77.                 <a href="">我的京东</a>
  78.                 <div class="jd-group">
  79.                     <ul>
  80.                         <li><a href="">我的京豆</a></li>
  81.                         <li><a href="">我的优惠券</a></li>
  82.                         <li><a href="">我的白条</a></li>
  83.                         <li><a href="">我的理财</a></li>
  84.                     </ul>
  85.                 </div>
  86.             </li>
  88.             <li><a href="">京东会员</a></li>
  89.             <li><a href="">企业采购</a></li>
  90.             <li><a href="">客户服务</a></li>
  91.             <li><a href="">网站导航</a></li>
  92.             <li><a href="">手机京东</a></li>
  93.             <li><a href="">网站无障碍</a></li>
  94.         </ul>
  95.     </nav>
  96. </body>
  98. </html>
上一条：表格制作excel教程,excel表格制作教程入门,自学excel视频教程全集,ppt制作教程下一条：11.11flex布局导航
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多