首页>>焦点图>>电商焦点轮播图加菜单(2021-09-13)

电商焦点轮播图加菜单

电商焦点轮播图加菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="main" id="main">  
  2.             <div class="menu-box">  
  3.   
  4.             </div>  
  5.             <!--子-->  
  6.             <div class="sub-menu hide" id="sub-menu">  
  7.                 <!--手机-->  
  8.                 <div class="inner-box ">  
  9.                     <div class="sub-inner-box">  
  10.                         <div class="tittle">手机、配件</div>  
  11.                         <div class="sub-row">  
  12.                             <span class="bold mr10">手机通讯：</span>  
  13.                             <a href="#">手机</a>  
  14.                             <span class="ml10 mr10">/</span>  
  15.                             <a href="#">手机</a>  
  16.                             <span class="ml10 mr10">/</span>  
  17.                             <a href="#">手机</a>  
  18.                             <span class="ml10 mr10">/</span>  
  19.                             <a href="#">手机</a>  
  20.                         </div>  
  21.                         <div class="sub-row">  
  22.                             <span class="bold mr10">手机通讯：</span>  
  23.                             <a href="#">手机</a>  
  24.                             <span class="ml10 mr10">/</span>  
  25.                             <a href="#">手机</a>  
  26.                             <span class="ml10 mr10">/</span>  
  27.                             <a href="#">手机</a>  
  28.                             <span class="ml10 mr10">/</span>  
  29.                             <a href="#">手机</a>  
  30.                         </div>  
  31.                         <div class="sub-row">  
  32.                             <span class="bold mr10">手机通讯：</span>  
  33.                             <a href="#">手机</a>  
  34.                             <span class="ml10 mr10">/</span>  
  35.                             <a href="#">手机</a>  
  36.                             <span class="ml10 mr10">/</span>  
  37.                             <a href="#">手机</a>  
  38.                             <span class="ml10 mr10">/</span>  
  39.                             <a href="#">手机</a>  
  40.                         </div>  
  41.   
  42.                     </div>  
  43.   
  44.                 </div>  
  45.                 <!--电脑-->  
  46.                 <div class="inner-box">  
  47.                     <div class="sub-inner-box">  
  48.                         <div class="tittle">电脑</div>  
  49.                         <div class="sub-row">  
  50.                             <span class="bold mr10">手机通讯：</span>  
  51.                             <a href="#">手机</a>  
  52.                             <span class="ml10 mr10">/</span>  
  53.                             <a href="#">手机</a>  
  54.                             <span class="ml10 mr10">/</span>  
  55.                             <a href="#">手机</a>  
  56.                             <span class="ml10 mr10">/</span>  
  57.                             <a href="#">手机</a>  
  58.                         </div>  
  59.                         <div class="sub-row">  
  60.                             <span class="bold mr10">手机通讯：</span>  
  61.                             <a href="#">手机</a>  
  62.                             <span class="ml10 mr10">/</span>  
  63.                             <a href="#">手机</a>  
  64.                             <span class="ml10 mr10">/</span>  
  65.                             <a href="#">手机</a>  
  66.                             <span class="ml10 mr10">/</span>  
  67.                             <a href="#">手机</a>  
  68.                         </div>  
  69.                         <div class="sub-row">  
  70.                             <span class="bold mr10">手机通讯：</span>  
  71.                             <a href="#">手机</a>  
  72.                             <span class="ml10 mr10">/</span>  
  73.                             <a href="#">手机</a>  
  74.                             <span class="ml10 mr10">/</span>  
  75.                             <a href="#">手机</a>  
  76.                             <span class="ml10 mr10">/</span>  
  77.                             <a href="#">手机</a>  
  78.                         </div>  
  79.   
  80.                     </div>  
  81.   
  82.                 </div>  
  83.                 <!--电器-->  
  84.                 <div class="inner-box">  
  85.                     <div class="sub-inner-box">  
  86.                         <div class="tittle">电器</div>  
  87.                         <div class="sub-row">  
  88.                             <span class="bold mr10">手机通讯：</span>  
  89.                             <a href="#">手机</a>  
  90.                             <span class="ml10 mr10">/</span>  
  91.                             <a href="#">手机</a>  
  92.                             <span class="ml10 mr10">/</span>  
  93.                             <a href="#">手机</a>  
  94.                             <span class="ml10 mr10">/</span>  
  95.                             <a href="#">手机</a>  
  96.                         </div>  
  97.                         <div class="sub-row">  
  98.                             <span class="bold mr10">手机通讯：</span>  
  99.                             <a href="#">手机</a>  
  100.                             <span class="ml10 mr10">/</span>  
  101.                             <a href="#">手机</a>  
  102.                             <span class="ml10 mr10">/</span>  
  103.                             <a href="#">手机</a>  
  104.                             <span class="ml10 mr10">/</span>  
  105.                             <a href="#">手机</a>  
  106.                         </div>  
  107.                         <div class="sub-row">  
  108.                             <span class="bold mr10">手机通讯：</span>  
  109.                             <a href="#">手机</a>  
  110.                             <span class="ml10 mr10">/</span>  
  111.                             <a href="#">手机</a>  
  112.                             <span class="ml10 mr10">/</span>  
  113.                             <a href="#">手机</a>  
  114.                             <span class="ml10 mr10">/</span>  
  115.                             <a href="#">手机</a>  
  116.                         </div>  
  117.   
  118.                     </div>  
  119.   
  120.                 </div>  
  121.                 <!--家具-->  
  122.                 <div class="inner-box">  
  123.                     <div class="sub-inner-box">  
  124.                         <div class="tittle">家具</div>  
  125.                         <div class="sub-row">  
  126.                             <span class="bold mr10">手机通讯：</span>  
  127.                             <a href="#">手机</a>  
  128.                             <span class="ml10 mr10">/</span>  
  129.                             <a href="#">手机</a>  
  130.                             <span class="ml10 mr10">/</span>  
  131.                             <a href="#">手机</a>  
  132.                             <span class="ml10 mr10">/</span>  
  133.                             <a href="#">手机</a>  
  134.                         </div>  
  135.                         <div class="sub-row">  
  136.                             <span class="bold mr10">手机通讯：</span>  
  137.                             <a href="#">手机</a>  
  138.                             <span class="ml10 mr10">/</span>  
  139.                             <a href="#">手机</a>  
  140.                             <span class="ml10 mr10">/</span>  
  141.                             <a href="#">手机</a>  
  142.                             <span class="ml10 mr10">/</span>  
  143.                             <a href="#">手机</a>  
  144.                         </div>  
  145.                         <div class="sub-row">  
  146.                             <span class="bold mr10">手机通讯：</span>  
  147.                             <a href="#">手机</a>  
  148.                             <span class="ml10 mr10">/</span>  
  149.                             <a href="#">手机</a>  
  150.                             <span class="ml10 mr10">/</span>  
  151.                             <a href="#">手机</a>  
  152.                             <span class="ml10 mr10">/</span>  
  153.                             <a href="#">手机</a>  
  154.                         </div>  
  155.   
  156.                     </div>  
  157.   
  158.                 </div>  
  159.   
  160.             </div>  
  161.   
  162.             <!--主-->  
  163.             <div class="menu-contern" id="menu-contern">  
  164.                 <div class="menu-item">  
  165.                     <a href="">  
  166.                         <span>手机、配件</span>  
  167.                         <i class="icon"></i>  
  168.                     </a>  
  169.                 </div>  
  170.                 <div class="menu-item">  
  171.                     <a href="">  
  172.                         <span>电脑</span>  
  173.                         <i class="icon"></i>  
  174.                     </a>  
  175.                 </div>  
  176.                 <div class="menu-item">  
  177.                     <a href="">  
  178.                         <span>家用电器</span>  
  179.                         <i class="icon"></i>  
  180.                     </a>  
  181.                 </div>  
  182.                 <div class="menu-item">  
  183.                     <a href="">  
  184.                         <span>家具</span>  
  185.                         <i class="icon"></i>  
  186.                     </a>  
  187.                 </div>  
  188.             </div>  
  189.   
  190.             <!--图片轮播-->  
  191.             <div class="banner" id="banner">  
  192.                 <a href="">  
  193.                     <div class="banner-slide slide1 slide_active"></div>  
  194.                 </a>  
  195.                 <a href="">  
  196.                     <div class="banner-slide slide2"></div>  
  197.                 </a>  
  198.                 <a href="">  
  199.                     <div class="banner-slide slide3"></div>  
  200.                 </a>  
  201.             </div>  
  202.   
  203.             <!--上下按钮-->  
  204.             <a href="javascript:void(0)" class="button prev" id="prev"></a>  
  205.             <a href="javascript:void(0)" class="button next" id="next"></a>  
  206.             <!--圆点-->  
  207.             <div class="dots" id="dots">  
  208.                 <span class="active"></span>  
  209.                 <span></span>  
  210.                 <span></span>  
  211.             </div>  
  212.         </div>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_915.html