Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 理解弹性盒子
Blogger Information
Blog 32
fans 0
comment 0
visits 22263
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
理解弹性盒子
培(信仰)
Original
543 people have browsed it

理解弹性盒子

效果图

弹性盒子

  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>
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