短视频商城源码，商城左侧菜单栏网页模板

原创

yunbaokeji柯基

修改于 2020-10-19 17:55:25

1.7K0

修改于 2020-10-19 17:55:25


<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   .wrapper{
    width: 1200px;
    height:500px;
    background-color: green;
    margin: 0 auto;  /* 居中 */
    position: relative;    /* 子绝父相 */
   }
   .rightbox{
    width: 1000px;
    height: 500px;
    background-color: slateblue;
    position: absolute;
    right: 0;
    top:0;
   }
   .leftbox{
    width: 200px;
    height: 500px;
    background-color: #eee;
   }
   .leftbox ul{
    list-style: none;
   }
   .leftbox ul li{
    height: 30px;
    line-height: 30px;
   }
   .leftbox a{
    text-decoration: none;
    color: #323232;
   }
   .leftbox{
    color:#323232;
   }
   .leftbox li p{
    width:180px;
    height: 30px;
    padding-left: 20px;
   }
   .leftbox li:hover p{
    width:180px;
    height: 30px;
    border: solid 1px blue;
    padding-left: 20px;
    border-right:0;
    position: relative;
    z-index: 2; /* 这个也就相当于是权重的意思 */
    background-color: #eee;
   }
   .submenu{
    width:998px;
    height:498px;
    background-color:#eee;
    border: solid 1px blue;
    position: absolute;
    top: 0;
    left: 200px;
    z-index: 1;
    display: none;
   }
   .leftbox li:hover div.submenu{
    display: block;  /* 块级元素 */
   }
  </style>
 </head>
 <body>
  <div class="wrapper">
   <div class="leftbox">
    <ul>
     <li>
      <p><a href="">周杰伦</a>/<a href="">昆凌</a> </p>
      <div class="submenu"><img src="img/J.jpg"/></div>
     </li>
     <li>
      <p><a href="">电子书</a>/<a href="">网络文学</a></p>
      <div class="submenu"><img src="img/p2.png"/></div>
     </li>
     <li>
      <p><a href=""></a>/<a href="">拍卖</a>/<a href="">电子书</a> </p>
      <div class="submenu">333</div>
     </li>
     <li>
      <p><a href="">服饰</a>/<a href="">内衣</a> </p>
      <div class="submenu">4444</div>
     </li>
     <li>
      <p><a href="">鞋靴</a>/<a href="">箱包</a> </p>
      <div class="submenu">5555</div>
     </li>
     <li>
      <p><a href="">运动</a>/<a href="">户外</a> </p>
      <div class="submenu">666</div>
     </li>
     <li>
      <p><a href="">孕</a>/<a href="">婴</a>/<a href="">童</a> </p
      <div class="submenu">7777</div>
     </li>
     <li>
      <p><a href="">家居</a>/<a href="">家纺</a>/<a href="">汽车</a> </p>
      <div class="submenu">8888</div>
     </li>
    </ul>
   </div>
   <div class="rightbox"></div>
  </div>
 </body>
</html>

以上就是短视频商城源码，商城左侧菜单栏网页模板更多内容欢迎关注之后的文章

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

互动直播