移动端购物车商品分类页面通用方案

<pre class="blockcode"><code class="hljs"><!doctype html>
<html>

<head>
      <meta charset="UTF-8">
      <title>分类</title>
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
      <link href="css/mui.min.css" rel="stylesheet" />
      <link rel="stylesheet" type="text/css" href="css/index.css" />
      <link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
      <link rel="stylesheet" type="text/css" href="fonts2/iconfont.css" />
      <link rel="stylesheet" type="text/css" href="css/classs.css" />
      <style type="text/css">
         /*底部导航栏样式active*/
         .mui-bar-tab .mui-tab-item.mui-active {
            color: #d3b780;
         }
      </style>
</head>

<body style="background-color: #f7f7f7;">
      
      <header class="mui-bar mui-bar-nav">
         
         <div class="mui-input-row mui-search input-row-class">
            <input type="search" class="mui-input-clear mui-input-clear-class" placeholder="输入您要搜索的内容">
         </div>
      </header>
      
      <div class="con">

         <aside>
            <div class="menu-left scrollbar-none r-line" id="sidebar">
                  <ul>
                     <li class="active">美妆日化</li>
                     <li>食品生鲜</li>
                     <li>女装</li>
                     <li>家居百货</li>
                     <li>数码家电</li>
                     <li>配饰</li>
                     <li>内衣</li>
                     <li>童装</li>
                     <li>玩具</li>
                     <li>母婴</li>
                     <li>包装</li>
                     <li>进口</li>
                     <li>家装建材</li>
                     <li>安防</li>
                     <li>安防</li>
                     <li>安防</li>
                     <li>安防</li>
                     <li>安防</li>
                     <li>安防</li>
                  </ul>
            </div>
         </aside>
         <section class="menu-right padding-all j-content">
            <ul>
                  <li class="w-3">
                     <a href="listofGoods.html"></a> <span>彩妆</span><img src="img/class1.png" />
                  </li>
                  <li class="w-3">
                     <a href="listofGoods.html"></a> <span>面部护理</span><img src="img/class2.png" />
                  </li>
                  <li class="w-3">
                     <a href="listofGoods.html"></a> <span>美妆工具</span><img src="img/class3.png" />
                  </li>
                  <li class="w-3">
                     <a href="listofGoods.html"></a> <span>香水香氛</span><img src="img/class4.png" />
                  </li>
                  <li class="w-3">
                     <a href="listofGoods.html"></a> <span>美甲产品</span><img src="img/class5.png" />
                  </li>
                  <li class="w-3">
                     <a href="listofGoods.html"></a> <span>身体护理</span><img src="img/class4.png" />
                  </li>
                  <li class="w-3">
                     <a href="listofGoods.html"></a> <span>身体护理</span><img src="img/class3.png" />
                  </li>
                  <li class="w-3">
                     <a href="listofGoods.html"></a> <span>身体护理</span><img src="img/class2.png" />
                  </li>
            </ul>
         </section>
         <section class="menu-right padding-all j-content" style="display:none">
            <ul>
                  <li class="w-3">
                     <a href="listofGoods.html"></a> <span>面部护理</span><img src="img/class2.png" />
                  </li>