理解弹性盒子

效果图

弹性盒子

  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>

更多相关文章

  1. 弹性盒flex的使用
  2. 云原生中定时弹性伸缩之CronHPA实战
  3. position定位:absolute绝对定位,relative相对定位,fixed固定定位
  4. HTML伪类、盒子模型学习与应用
  5. CSS 盒子模型理解
  6. 字体样式调用、布局原则、盒模型等
  7. 图标，布局，元素类型，盒子模型
  8. 字体图标的使用和盒模型的理解与box-sizing解决了什么问题以及布
  9. css盒模型以及如何计算盒子的宽度

随机推荐

  1. Android开发你需要具备的基本功
  2. 空闲时间玩玩Andriod，你知道如何配置环境
  3. AndroidStudio安装教程(Windows环境下)
  4. android文字阴影效果设置
  5. 原生态Android操作介绍之一
  6. android 布局 px or dip
  7. Android(安卓)共享文件的 Runtime 权限
  8. Android SDK中 tools 工具介绍
  9. Android之UI
  10. 浅谈android的am命令