文章目录
- 1.设计来源
- 1.1 主界面
- 1.2 购物车界面
- 1.3 电子产品界面
- 1.4 商品详情界面
- 1.5 联系我们界面
- 1.6 各种标签演示界面
- 2.效果和源码
- 2.1 动态效果
- 2.2 源代码
- 源码下载
- 万套模板，程序开发，在线开发，在线沟通
【博主推荐】：前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。提供给爱学习的你。点击跳转到学习网站。
对人工智能感兴趣的，快速入口：人工智能学习教程
作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/141321910
HTML5服装电商网上商城模板源码，前端商城源码，商城网站源码，商城模板，服装商城源码，内置8个页面，各种好看的商品的展示，可以让自己的设计思路更加明确，表单，轮播图，演示，表格，登录，弹框等界面效果齐全，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
1.设计来源
1.1 主界面
1.2 购物车界面
1.3 电子产品界面
1.4 商品详情界面
1.5 联系我们界面
1.6 各种标签演示界面
2.效果和源码
2.1 动态效果
这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的服装商城。
HTML5服装电商网上商城模板源码
2.2 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。
<!DOCTYPE html> <html> <head> <title>服装商城</title> <!-- for-mobile-apps --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="" /> <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/pignose.layerslider.css" rel="stylesheet" type="text/css" media="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <script src="js/simpleCart.min.js"></script> <script type="text/javascript" src="js/bootstrap-3.1.1.min.js"></script> <script src="js/jquery.easing.min.js"></script> </head> <body> <!-- header --> <div class="header"> <div class="container"> <ul> <li><span class="glyphicon glyphicon-time" aria-hidden="true"></span>免费快速送货</li> <li><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>所有订单免运费</li> <li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span><a href="mailto:test@126.com">test@126.com</a></li> </ul> </div> </div> <!-- //header --> <!-- header-bot --> <div class="header-bot"> <div class="container"> <div class="col-md-3 header-left"> <h1><a href="index.html"><img src="images/logo3.jpg"></a></h1> </div> <div class="col-md-6 header-middle"> <form> <div class="search"> <input type="search" value="搜索" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '搜索';}" required=""> </div> <div class="section_room"> <select id="country" onchange="change_country(this.value)" class="frm-field required"> <option value="null">所有类别</option> <option value="null">电子产品</option> <option value="AX">童装</option> <option value="AX">男装</option> <option value="AX">女装</option> <option value="AX">手表</option> </select> </div> <div class="sear-sub"> <input type="submit" value=" "> </div> <div class="clearfix"></div> </form> </div> <div class="col-md-3 header-right footer-bottom"> <ul> <li><a href="#" class="use1" data-toggle="modal" data-target="#myModal4"><span>登录</span></a> </li> <li><a class="fb" href="#"></a></li> <li><a class="twi" href="#"></a></li> <li><a class="insta" href="#"></a></li> <li><a class="you" href="#"></a></li> </ul> </div> <div class="clearfix"></div> </div> </div> <!-- //header-bot --> <!-- banner --> <div class="ban-top"> <div class="container"> <div class="top_nav_left"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse menu--shylock" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav menu__list"> <li class="active menu__item menu__item--current"><a class="menu__link" href="index.html">首页 <span class="sr-only">(current)</span></a></li> <li class="dropdown menu__item"> <a href="#" class="dropdown-toggle menu__link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">男装 <span class="caret"></span></a> <ul class="dropdown-menu multi-column columns-3"> <div class="row"> <div class="col-sm-6 multi-gd-img1 multi-gd-text "> <a href="mens.html"><img src="images/woo1.jpg" alt=" "/></a> </div> <div class="col-sm-3 multi-gd-img"> <ul class="multi-column-dropdown"> <li><a href="mens.html">Clothing</a></li> <li><a href="mens.html">Wallets</a></li> <li><a href="mens.html">Footwear</a></li> <li><a href="mens.html">Watches</a></li> <li><a href="mens.html">Accessories</a></li> <li><a href="mens.html">Bags</a></li> <li><a href="mens.html">Caps & Hats</a></li> </ul> </div> <div class="col-sm-3 multi-gd-img"> <ul class="multi-column-dropdown"> <li><a href="mens.html">Jewellery</a></li> <li><a href="mens.html">Sunglasses</a></li> <li><a href="mens.html">Perfumes</a></li> <li><a href="mens.html">Beauty</a></li> <li><a href="mens.html">Shirts</a></li> <li><a href="mens.html">Sunglasses</a></li> <li><a href="mens.html">Swimwear</a></li> </ul> </div> <div class="clearfix"></div> </div> </ul> </li> <li class="dropdown menu__item"> <a href="#" class="dropdown-toggle menu__link" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">女装 <span class="caret"></span></a> <ul class="dropdown-menu multi-column columns-3"> <div class="row"> <div class="col-sm-3 multi-gd-img"> <ul class="multi-column-dropdown"> <li><a href="womens.html">Clothing</a></li> <li><a href="womens.html">Wallets</a></li> <li><a href="womens.html">Footwear</a></li> <li><a href="womens.html">Watches</a></li> <li><a href="womens.html">Accessories</a></li> <li><a href="womens.html">Bags</a></li> <li><a href="womens.html">Caps & Hats</a></li> </ul> </div> <div class="col-sm-3 multi-gd-img"> <ul class="multi-column-dropdown"> <li><a href="womens.html">Jewellery</a></li> <li><a href="womens.html">Sunglasses</a></li> <li><a href="womens.html">Perfumes</a></li> <li><a href="womens.html">Beauty</a></li> <li><a href="womens.html">Shirts</a></li> <li><a href="womens.html">Sunglasses</a></li> <li><a href="womens.html">Swimwear</a></li> </ul> </div> <div class="col-sm-6 multi-gd-img multi-gd-text "> <a href="womens.html"><img src="images/woo.jpg" alt=" "/></a> </div> <div class="clearfix"></div> </div> </ul> </li> <li class=" menu__item"><a class="menu__link" href="electronics.html">电子产品</a></li> <li class=" menu__item"><a class="menu__link" href="codes.html">短码</a></li> <li class=" menu__item"><a class="menu__link" href="contact.html">联系我们</a></li> </ul> </div> </div> </nav> </div> <div class="top_nav_right"> <div class="cart box_1"> <a href="checkout.html"> <h3> <div class="total"> <i class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></i> <span class="simpleCart_total"></span> (<span id="simpleCart_quantity" class="simpleCart_quantity"></span> 商品)</div> </h3> </a> <p><a href="javascript:;" class="simpleCart_empty">空的购物车</a></p> </div> </div> <div class="clearfix"></div> </div> </div> <div class="banner-grid"> <div id="visual"> <div class="slide-visual"> <!-- Slide Image Area (1000 x 424) --> <ul class="slide-group"> <li><img class="img-responsive" src="images/ba1.jpg" alt="Dummy Image" /></li> <li><img class="img-responsive" src="images/ba2.jpg" alt="Dummy Image" /></li> <li><img class="img-responsive" src="images/ba3.jpg" alt="Dummy Image" /></li> </ul> <!-- Slide Description Image Area (316 x 328) --> <div class="script-wrap"> <ul class="script-group"> <li><div class="inner-script"><img class="img-responsive" src="images/baa1.jpg" alt="Dummy Image" /></div></li> <li><div class="inner-script"><img class="img-responsive" src="images/baa2.jpg" alt="Dummy Image" /></div></li> <li><div class="inner-script"><img class="img-responsive" src="images/baa3.jpg" alt="Dummy Image" /></div></li> </ul> <div class="slide-controller"> <a href="#" class="btn-prev"><img src="images/btn_prev.png" alt="Prev Slide" /></a> <a href="#" class="btn-play"><img src="images/btn_play.png" alt="Start Slide" /></a> <a href="#" class="btn-pause"><img src="images/btn_pause.png" alt="Pause Slide" /></a> <a href="#" class="btn-next"><img src="images/btn_next.png" alt="Next Slide" /></a> </div> </div> <div class="clearfix"></div> </div> <div class="clearfix"></div> </div> </div> <div class="new_arrivals"> <div class="container"> <h3>打新产品</h3> <p>不只是衣服，更是态度！我们上新了多款时尚衣服，让您在人群中脱颖而出。快来选购，尽享时尚与品质的双重体验！</p> <div class="new_grids"> <div class="col-md-4 new-gd-left"> <img src="images/wed1.jpg" alt=" " /> <div class="wed-brand simpleCart_shelfItem"> <h4>婚礼集合</h4> <h5>五折优惠</h5> <p><i>$250</i> <span class="item_price">$500</span><a class="item_add hvr-outline-out button2" href="#">购物车 </a></p> </div> </div> <div class="col-md-4 new-gd-middle"> <div class="new-levis"> <div class="mid-img"> <img src="images/levis1.png" alt=" " /> </div> <div class="mid-text"> <h4>up to 40% <span>off</span></h4> <a class="hvr-outline-out button2" href="product.html">现在买 </a> </div> <div class="clearfix"></div> </div> <div class="new-levis"> <div class="mid-text"> <h4>up to 50% <span>off</span></h4> <a class="hvr-outline-out button2" href="product.html">现在买 </a> </div> <div class="mid-img"> <img src="images/dig.jpg" alt=" " /> </div> <div class="clearfix"></div> </div> <div class="clearfix"></div> </div> <div class="col-md-4 new-gd-left"> <img src="images/wed2.jpg" alt=" " /> <div class="wed-brandtwo simpleCart_shelfItem"> <h4>春季/夏季</h4> <p>买男装</p> </div> </div> <div class="clearfix"></div> </div> </div> </div> <!-- //content --> <!-- content-bottom --> <div class="content-bottom"> <div class="col-md-7 content-lgrid"> <div class="col-sm-6 content-img-left text-center"> <div class="content-grid-effect slow-zoom vertical"> <div class="img-box"><img src="images/p1.jpg" alt="image" class="img-responsive zoom-img"></div> <div class="info-box"> <div class="info-content simpleCart_shelfItem"> <h4>Mobiles</h4> <span class="separator"></span> <p><span class="item_price">$500</span></p> <span class="separator"></span> <a class="item_add hvr-outline-out button2" href="#">add to cart </a> </div> </div> </div> </div> <div class="col-sm-6 content-img-right"> <h3>Special Offers and 50%<span>Discount On</span> Mobiles</h3> </div> <div class="col-sm-6 content-img-right"> <h3>Buy 1 get 1 free on <span> Branded</span> Watches</h3> </div> <div class="col-sm-6 content-img-left text-center"> <div class="content-grid-effect slow-zoom vertical"> <div class="img-box"><img src="images/p2.jpg" alt="image" class="img-responsive zoom-img"></div> <div class="info-box"> <div class="info-content simpleCart_shelfItem"> <h4>Watches</h4> <span class="separator"></span> <p><span class="item_price">$250</span></p> <span class="separator"></span> <a class="item_add hvr-outline-out button2" href="#">add to cart </a> </div> </div> </div> </div> <div class="clearfix"></div> </div> <div class="col-md-5 content-rgrid text-center"> <div class="content-grid-effect slow-zoom vertical"> <div class="img-box"><img src="images/p4.jpg" alt="image" class="img-responsive zoom-img"></div> <div class="info-box"> <div class="info-content simpleCart_shelfItem"> <h4>Shoes</h4> <span class="separator"></span> <p><span class="item_price">$150</span></p> <span class="separator"></span> <a class="item_add hvr-outline-out button2" href="#">add to cart </a> </div> </div> </div> </div> <div class="clearfix"></div> </div> <div class="product-easy"> <div class="container"> <div class="sap_tabs"> <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;"> <ul class="resp-tabs-list"> <li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><span>Latest Designs</span></li> <li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>Special Offers</span></li> <li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>Collections</span></li> </ul> <div class="resp-tabs-container"> <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0"> <div class="col-md-3 product-men"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/a1.png" alt="" class="pro-image-front"> <img src="images/a1.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Air Tshirt Black</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/a8.png" alt="" class="pro-image-front"> <img src="images/a8.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">1+1 Offer</span> </div> <div class="item-info-product "> <h4><a href="single.html">Next Blue Blazer</a></h4> <div class="info-product-price"> <span class="item_price">$99.99</span> <del>$109.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/a3.png" alt="" class="pro-image-front"> <img src="images/a3.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Air Tshirt Black </a></h4> <div class="info-product-price"> <span class="item_price">$119.99</span> <del>$120.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/a4.png" alt="" class="pro-image-front"> <img src="images/a4.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Maroon Puma Tshirt</a></h4> <div class="info-product-price"> <span class="item_price">$79.99</span> <del>$120.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men yes-marg"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/a5.png" alt="" class="pro-image-front"> <img src="images/a5.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">Combo Pack</span> </div> <div class="item-info-product "> <h4><a href="single.html">Multicoloured TShirts</a></h4> <div class="info-product-price"> <span class="item_price">$129.99</span> <del>$150.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men yes-marg"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/a6.png" alt="" class="pro-image-front"> <img src="images/a6.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Air Tshirt Black </a></h4> <div class="info-product-price"> <span class="item_price">$129.99</span> <del>$150.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men yes-marg"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/a7.png" alt="" class="pro-image-front"> <img src="images/a7.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Dresses</a></h4> <div class="info-product-price"> <span class="item_price">$129.99</span> <del>$150.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men yes-marg"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/a2.png" alt="" class="pro-image-front"> <img src="images/a2.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Wedding Blazers</a></h4> <div class="info-product-price"> <span class="item_price">$129.99</span> <del>$150.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men yes-marg"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/g1.png" alt="" class="pro-image-front"> <img src="images/g1.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Dresses</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men yes-marg"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/g2.png" alt="" class="pro-image-front"> <img src="images/g2.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html"> Shirts</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men yes-marg"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/g3.png" alt="" class="pro-image-front"> <img src="images/g3.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Shirts</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men yes-marg"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/mw2.png" alt="" class="pro-image-front"> <img src="images/mw2.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">T shirts</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="clearfix"></div> </div> <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1"> <div class="col-md-3 product-men"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/w1.png" alt="" class="pro-image-front"> <img src="images/w1.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Wedges</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/w2.png" alt="" class="pro-image-front"> <img src="images/w2.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Sandals</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/mw1.png" alt="" class="pro-image-front"> <img src="images/mw1.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Casual Shoes</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/mw3.png" alt="" class="pro-image-front"> <img src="images/mw3.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Sport Shoes</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men yes-marg"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/ep2.png" alt="" class="pro-image-front"> <img src="images/ep2.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Watches</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men yes-marg"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/ep3.png" alt="" class="pro-image-front"> <img src="images/ep3.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Watches</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="clearfix"></div> </div> <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-2"> <div class="col-md-3 product-men"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/g1.png" alt="" class="pro-image-front"> <img src="images/g1.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Dresses</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/g2.png" alt="" class="pro-image-front"> <img src="images/g2.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html"> Shirts</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/g3.png" alt="" class="pro-image-front"> <img src="images/g3.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Shirts</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/mw2.png" alt="" class="pro-image-front"> <img src="images/mw2.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">T shirts</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men yes-marg"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/w4.png" alt="" class="pro-image-front"> <img src="images/w4.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Air Tshirt Black Domyos</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="col-md-3 product-men yes-marg"> <div class="men-pro-item simpleCart_shelfItem"> <div class="men-thumb-item"> <img src="images/w3.png" alt="" class="pro-image-front"> <img src="images/w3.png" alt="" class="pro-image-back"> <div class="men-cart-pro"> <div class="inner-men-cart-pro"> <a href="single.html" class="link-product-add-cart">Quick View</a> </div> </div> <span class="product-new-top">New</span> </div> <div class="item-info-product "> <h4><a href="single.html">Hand Bags</a></h4> <div class="info-product-price"> <span class="item_price">$45.99</span> <del>$69.71</del> </div> <a href="#" class="item_add single-item hvr-outline-out button2">Add to cart</a> </div> </div> </div> <div class="clearfix"></div> </div> </div> </div> </div> </div> </div> <!-- //product-nav --> <div class="coupons"> <div class="container"> <div class="coupons-grids text-center"> <div class="col-md-3 coupons-gd"> <h3>用一种简单的方式购买你的产品</h3> </div> <div class="col-md-3 coupons-gd"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span> <h4>登入你的帐户</h4> <p>登录你的账号，可以尽情的购物，畅游商城，也有更多的福利等你来拿。</p> </div> <div class="col-md-3 coupons-gd"> <span class="glyphicon glyphicon-ok" aria-hidden="true"></span> <h4>选择您的项目</h4> <p>登录你的账号，可以尽情的购物，畅游商城，也有更多的福利等你来拿。</p> </div> <div class="col-md-3 coupons-gd"> <span class="glyphicon glyphicon-credit-card" aria-hidden="true"></span> <h4>付款</h4> <p>登录你的账号，可以尽情的购物，畅游商城，也有更多的福利等你来拿。</p> </div> <div class="clearfix"> </div> </div> </div> </div> <!-- footer --> <div class="footer"> <div class="container"> <div class="col-md-3 footer-left"> <h2><a href="index.html"><img src="images/logo3.jpg" alt=" " /></a></h2> <p>琳琅满目的商品：商场内拥有丰富的商品种类，从日常用品到奢侈品，从家电到服装，应有尽有。商场内还有各种美食、娱乐等配套设施，满足消费者的不同需求。</p> </div> <div class="col-md-9 footer-right"> <div class="col-sm-6 newsleft"> <h3>注册时事通讯!</h3> </div> <div class="col-sm-6 newsright"> <form> <input type="text" value="邮箱" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '邮箱';}" required=""> <input type="submit" value="订阅"> </form> </div> <div class="clearfix"></div> <div class="sign-grds"> <div class="col-md-4 sign-gd"> <h4>网站信息</h4> <ul> <li><a href="index.html">Home</a></li> <li><a href="mens.html">Men's Wear</a></li> <li><a href="womens.html">Women's Wear</a></li> <li><a href="electronics.html">电子产品</a></li> <li><a href="codes.html">短码</a></li> <li><a href="contact.html">联系我们</a></li> </ul> </div> <div class="col-md-4 sign-gd-two"> <h4>商城信息</h4> <ul> <li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>地址 : 北京市、朝阳区、安立路、服装商城</li> <li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i>邮箱 : <a href="mailto:test@126.com">test@126.com</a></li> <li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>手机号 : +133 1100 1100</li> </ul> </div> <div class="col-md-4 sign-gd flickr-post"> <h4>九宫消息</h4> <ul> <li><a href="single.html"><img src="images/b15.jpg" alt=" " class="img-responsive" /></a></li> <li><a href="single.html"><img src="images/b16.jpg" alt=" " class="img-responsive" /></a></li> <li><a href="single.html"><img src="images/b17.jpg" alt=" " class="img-responsive" /></a></li> <li><a href="single.html"><img src="images/b18.jpg" alt=" " class="img-responsive" /></a></li> <li><a href="single.html"><img src="images/b15.jpg" alt=" " class="img-responsive" /></a></li> <li><a href="single.html"><img src="images/b16.jpg" alt=" " class="img-responsive" /></a></li> <li><a href="single.html"><img src="images/b17.jpg" alt=" " class="img-responsive" /></a></li> <li><a href="single.html"><img src="images/b18.jpg" alt=" " class="img-responsive" /></a></li> <li><a href="single.html"><img src="images/b15.jpg" alt=" " class="img-responsive" /></a></li> </ul> </div> <div class="clearfix"></div> </div> </div> <div class="clearfix"></div> <p class="copy-right">Copyright © 2024.Company name All rights reserved. <a href="https://blog.csdn.net/weixin_43151418" target="_blank">xcLeigh</a> | <a href="https://item.taobao.com/item.htm?id=805108173963" target="_blank">欣晨软件服务</a></p> </div> </div> </body> </html>
源码下载
HTML5服装电商网上商城模板源码（源码） 点击下载
万套模板，程序开发，在线开发，在线沟通
- 专业后端大佬在线沟通需求开发
- 专业前端大佬在线沟通需求开发
- 专业网站整套大佬在线沟通需求开发
- 专业毕业设计大佬在线沟通需求开发
- 专业大作业大佬在线沟通需求开发
- 【优惠活动】专属定制，程序在线开发
💢 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA，体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署（有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
如🈶合作请联系我，期待您的联系。
注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请 留言（评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/141321910（防止抄袭，原文地址不可删除）
