为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 新年刚过完，再给大家来一波干货，请叫我雷锋111

新年刚过完，再给大家来一波干货，请叫我雷锋111

标签：
Html5 CSS3 产品 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <title>首页</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/weui/0.4.3/style/weui.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css">
    <link rel="stylesheet" href="http://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css"><!--swiper滚动插件-->
    <link rel="stylesheet" href="iconfont/iconfont.css"><!--引用阿里云矢量图标-->
    <style>
        body{font-family: "微软雅黑";background-color: #2A2A2A;}
        .has-max{max-width: 640px;padding-bottom: 55px;}
        /*滚动图*/
        .swiper-container1 img{width: 100%;}
        /*最新公告滚动信息*/
        .news{margin-top: -6px;}
        .swiper-container2{height: 20px;line-height: 20px;}
        .scroll-information{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;font-size: 12px;width: 90%;color: #bb1818;}
        .hide-active .weui_cell{padding: 6px 15px;}
        .hide-active .weui_cell:not(.no_access):active{background-color: initial;}
        .scroll-image{width: 14%;padding-right: 8px;margin-right: 8px;border-right: 1px solid #dcd5d5;}
        .scroll-image img{width: 100%;}
        .weui_cells_access .weui_cell_ft:after{border-color: #888;}
        .weui_cell_ft{display: block;}
        /*九宫格展示*/
        .class-box{background-color: #fff;}
        .class-box .class-one-box{width: 20%;padding: 8px 0px;}
        .class-box .class-title{font-size: 12px;}
        .weui_grid:before{border: 0;}
        .weui_grids:before{border: 0;}
        /*产品展示*/
        .pro-list-title{color: #fff;font-size: 12px;padding: 5px 10px;}
        .pro-list-img{width: 100%;}
        .weui-row{padding: 0 4px;}
        .weui-row .weui-col-50{background-color: #fff;width: calc((100% - 5px*1)/ 2);margin-top: 8px;}
        .weui-row .weui-col-33{background-color: #fff;width: calc((100% - 4px*2)/ 3);}
        .pro-name{font-size: 14px;font-family: initial;min-height: 44px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;color: #000;padding-left: 5px;}
        .pro-img{width: 100%;}
        .pro-hr{border-top: 1px dashed #e5e5e5;padding-left: 5px;}
        .pro-hr .pro-price{color: #000;}
        .pro-hr .pro-store{font-size: 12px;color: #5a5a5a;}
        .pro-store span{text-decoration: line-through;}
        /*搜索定位图标*/
        .weui_icon_clear:before, .weui_icon_search:before{color: #fff;}
        .search-btn{position: fixed;z-index: 10;top: 10px;right: 10px;background-color: rgba(0, 0, 0, 0.23);width: 30px;height: 30px;text-align: center;border-radius: 50%;font-weight: bold;}
        /*底部菜单栏*/
        .footer-menu{position: fixed;max-width: 640px;}
        .weui_tabbar_item{color: #888;padding: 0;}
        .weui_bar_item_on{color: #EB4F38;}
        .weui_tabbar_item.weui_bar_item_on .weui_tabbar_label{color: #EB4F38;}
        .weui_tabbar:before{border-top: 1px solid #d5d5d6;}
        .footer-menu-icon{margin-top: 10px!important;}
        .foot-icon{font-size: 20px;}
        .weui_tabbar_icon{width: 20px; height: 20px;}
    </style>
</head>
<body>

<div class="has-max">

    <!--搜索定位图标-->
    <span class="search-btn"><a href="search.html"><i class="weui_icon_search"></i></a></span>

    <!--滚动图-->
    <div class="swiper-container swiper-container1">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/4affe94cff752a4ea52af92ac849d842?fid=1764694843-250528-1001017398555176&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-puxT1BpFqNX8IAy0F4tqCDD%2be2o%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007062188043351105&dp-callid=0&size=c1920_u1080&quality=90" /></div>
            <div class="swiper-slide"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/2c16e907413058edd75cb3ce4fbd71d1?fid=1764694843-250528-774117316935347&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-3oDydtiPwY%2bIJeAE%2flNebCUNI9k%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90" /></div>
            <div class="swiper-slide"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/3145b57dea789c5de6e304c754c5ee25?fid=1764694843-250528-436084773853039&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-hQFLBehSAD7gtDHa26no6UVP2jc%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90" /></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination swiper-pagination1"></div>
    </div>

    <!--最新公告滚动信息-->
    <div class="weui_panel news">
        <div class="weui_panel_bd">
            <div class="weui_media_box weui_media_small_appmsg">
                <div class="weui_cells weui_cells_access hide-active">
                    <div class="weui_cell">
                        <div class="weui_cell_hd scroll-image">
                            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/d2823343094244f52e4c2e123c932e17?fid=1764694843-250528-1036019978584622&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-2mbBXp%2bUuWMmF9irEhG5kLM1wqY%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90">
                        </div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <div class="swiper-container swiper-container2">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><a href=""><p class="scroll-information">处变不惊拨开层层迷雾，透视技术学习本质</p></a><span class="weui_cell_ft"></span></div>
                                    <div class="swiper-slide"><a href=""><p class="scroll-information">站在巨人肩头和高管大咖取经，培育全局的眼光</p></a><span class="weui_cell_ft"></span></div>
                                    <div class="swiper-slide"><a href=""><p class="scroll-information">掌握技术干货与行业大牛交流，学习主流的，融汇先锋的</p></a><span class="weui_cell_ft"></span></div>
                                    <div class="swiper-slide"><a href=""><p class="scroll-information">保持开放心态要挥汗挖掘更多出路，也要听取同行者的建议</p></a><span class="weui_cell_ft"></span></div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--九宫格展示-->
    <div class="weui_grids class-box">
        <a href="" class="weui_grid js_grid class-one-box">
            <div class="weui_grid_icon">
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/db3949712283852bea73ff847a8c3817?fid=1764694843-250528-346592753489557&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-dzmprGzTcRb%2bzfbsCM8Tehyni4c%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90">
            </div>
            <p class="weui_grid_label class-title">
                待付款
            </p>
        </a>
        <a href="" class="weui_grid js_grid class-one-box">
            <div class="weui_grid_icon">
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/e7ec9f9866606cc5ac60192100645857?fid=1764694843-250528-349540882684017&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-gYTSMeIlHo%2fuwEPj%2bPgbkZ8Mw8g%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90">
            </div>
            <p class="weui_grid_label class-title">
                待发货
            </p>
        </a>
        <a href="" class="weui_grid js_grid class-one-box">
            <div class="weui_grid_icon">
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/657ba9d5aac2ad850a0ce944f54db20b?fid=1764694843-250528-76210066274843&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-ojuA%2feDqtdeubEZ%2bzixsv%2fj0gGM%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90">
            </div>
            <p class="weui_grid_label class-title">
                待收货
            </p>
        </a>
        <a href="" class="weui_grid js_grid class-one-box">
            <div class="weui_grid_icon">
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/6c6048266844ddf9f1e5b5cb598e3c6a?fid=1764694843-250528-396960012617617&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-OqmN8oi5M2FM41UHvl3VrSdfBfk%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90">
            </div>
            <p class="weui_grid_label class-title">
                已完成
            </p>
        </a>
        <a href="" class="weui_grid js_grid class-one-box">
            <div class="weui_grid_icon">
                <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/8b7f31b511a59cd73c15ab8936ade94f?fid=1764694843-250528-227597450283272&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-42NMtwJ9FWUFVSBsE8%2biNvAonFg%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90">
            </div>
            <p class="weui_grid_label class-title">
                查看更多
            </p>
        </a>
    </div>

    <!--产品展示-->
    <div>
        <div class="pro-list-title">女士健康无痕内衣</div>
        <div><img class="pro-list-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/4dc7fcdb7b5d0dee77abc4253ead4485?fid=1764694843-250528-212642672333357&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-xFPHNA48Rb1skiF%2fsvJOyegyZiw%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90"></div>
        <div class="weui-row">
            <a href="product_details.html" class="weui-col-50">
                <img class="pro-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/591d0dd9f85920b82bd3dcdc3c648803?fid=1764694843-250528-27676914765163&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-FwMoXwIoxIrzDLTuiF6o5WZ7wVo%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90">
                <div class="pro-name">掌上明珠无钢圈文胸套装</div>
                <div class="pro-hr">
                    <p class="pro-price">￥168.00</p>
                    <p class="pro-store">商场均价：<span>￥328.00</span></p>
                </div>
            </a>
            <a href="product_details.html" class="weui-col-50">
                <img class="pro-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/8a9ccc4568765237fbece2a71afa2600?fid=1764694843-250528-176418826600873&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-FaDL2txSObi%2b8zfvGh757QD%2fvq8%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90">
                <div class="pro-name">微奢阿米无痕文胸套装【黑色】</div>
                <div class="pro-hr">
                    <p class="pro-price">￥368.00</p>
                    <p class="pro-store">商场均价：<span>￥498.00</span></p>
                </div>
            </a>
            <a href="product_details.html" class="weui-col-50">
                <img class="pro-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/033ae94a2942ae088fd61a592d569a83?fid=1764694843-250528-912420316462115&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-39AfYTsDNFxMRE3OsKQaXSXmNJM%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90">
                <div class="pro-name">微奢阿米女士蕾丝短裤3条/盒</div>
                <div class="pro-hr">
                    <p class="pro-price">￥128.00</p>
                    <p class="pro-store">商场均价：<span>￥248.00</span></p>
                </div>
            </a>
            <a href="product_details.html" class="weui-col-50">
                <img class="pro-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/f59ab7491ca2a64740925b6b72ccd535?fid=1764694843-250528-108177706324326&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-EvwRZytqLVcAm30vgXr1dfH6aGM%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90">
                <div class="pro-name">微奢阿米女士蕾丝短裤3条/盒</div>
                <div class="pro-hr">
                    <p class="pro-price">￥128.00</p>
                    <p class="pro-store">商场均价：<span>￥128.00</span></p>
                </div>
            </a>
        </div>
    </div>
    <div>
        <div class="pro-list-title">纯柔触感女士披肩围巾</div>
        <div><img class="pro-list-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/1517e5568f1e8842bd8e12766b3b378f?fid=1764694843-250528-1123562822874379&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-f1cRvhPdFfDtISZ8r%2ffyxtKHMFs%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90"></div>
        <div class="weui-row">
            <a href="product_details.html" class="weui-col-50">
                <img class="pro-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/2f4df4e80eda6d0ee25f426735c34c29?fid=1764694843-250528-16641393054151&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-TOZzIvbH%2f6VG0V17D%2bK%2bEOvfOSg%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90">
                <div class="pro-name">微奢阿米天马印花披肩围巾</div>
                <div class="pro-hr">
                    <p class="pro-price">￥107.00</p>
                    <p class="pro-store">商场均价：<span>￥398.00</span></p>
                </div>
            </a>
            <a href="product_details.html" class="weui-col-50">
                <img class="pro-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/6cb695d90d6852ba688b479ade5365a0?fid=1764694843-250528-237245897976867&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-jNTbso8AydTv5e0Wh6jc9Cut%2fsU%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90">
                <div class="pro-name">微奢阿米花朵提花拉绒披肩围巾</div>
                <div class="pro-hr">
                    <p class="pro-price">￥77.00</p>
                    <p class="pro-store">商场均价：<span>￥298.00</span></p>
                </div>
            </a>
        </div>
    </div>
    <div>
        <div class="pro-list-title">高档男士保暖双面围巾</div>
        <div><img class="pro-list-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/445c92fc547d5c2d4e32873396e44b88?fid=1764694843-250528-543956124905793&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-E98vSqSuU%2fUI8y8n9WP10Oy7Yx4%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90"></div>
        <div class="weui-row">
            <a href="product_details.html" class="weui-col-33">
                <img class="pro-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/2767e8e486b86898fd19d1fd2b47150f?fid=1764694843-250528-426581453358347&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-U%2fKLB8p3pyHoXwurTQaZe1HR%2bYI%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90">
                <div class="pro-name">微奢阿米男士格子保暖双面围巾</div>
                <div class="pro-hr">
                    <p class="pro-price">￥49.00</p>
                </div>
            </a>
            <a href="product_details.html" class="weui-col-33">
                <img class="pro-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/8945f4e00c1b2613ffa48d8e19b33d32?fid=1764694843-250528-379226386018072&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-LxmO21GP4Yd5EPbTE2FqR5RHKUo%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90">
                <div class="pro-name">微奢阿米男士格子保暖双面围巾</div>
                <div class="pro-hr">
                    <p class="pro-price">￥49.00</p>
                </div>
            </a>
            <a href="product_details.html" class="weui-col-33">
                <img class="pro-img" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://thumbnail0.baidupcs.com/thumbnail/6a5c8a474540c9661f1b3a8d10a17395?fid=1764694843-250528-792895448130363&time=1486951200&rt=pr&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-2NlHH%2bzzfrhVZIgGW3rrbwaFcSI%3d&expires=8h&chkbd=0&chkv=0&dp-logid=1007444763431540834&dp-callid=0&size=c1920_u1080&quality=90">
                <div class="pro-name">微奢阿米男士格子保暖双面围巾</div>
                <div class="pro-hr">
                    <p class="pro-price">￥49.00</p>
                </div>
            </a>
        </div>
    </div>

    <!--底部菜单栏-->
    <div class="weui_tabbar footer-menu">
        <a href="index.html" class="weui_tabbar_item weui_bar_item_on">
            <div class="weui_tabbar_icon">
                <i class="iconfont icon-shouye foot-icon"></i>
            </div>
            <p class="weui_tabbar_label footer-menu-icon">首页</p>
        </a>
        <a href="product_class.html" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <i class="iconfont icon-fenlei foot-icon"></i>
            </div>
            <p class="weui_tabbar_label footer-menu-icon">分类</p>
        </a>
        <a href="shopping_cart.html" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <i class="iconfont icon-gouwuche foot-icon"></i>
            </div>
            <p class="weui_tabbar_label footer-menu-icon">购物车</p>
        </a>
        <a href="user.html" class="weui_tabbar_item">
            <div class="weui_tabbar_icon">
                <i class="iconfont icon-gerenzhongxin foot-icon"></i>
            </div>
            <p class="weui_tabbar_label footer-menu-icon">个人中心</p>
        </a>
    </div>

</div>

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script><!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.bootcss.com/jquery-weui/0.8.2/js/jquery-weui.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.min.js"></script><!--swiper滚动插件-->
<script>
    // 滚动图
    var mySwiper1 = new Swiper('.swiper-container1', {
        direction: 'horizontal',
        loop: true,
        autoplay : 2500,
        speed:2000,
        autoplayDisableOnInteraction : false,

        // 如果需要分页器
        pagination: '.swiper-pagination1'
    });

    // 最新公告滚动信息
    var mySwiper2 = new Swiper('.swiper-container2', {
        direction: 'vertical',
        loop: true,
        autoplay : 3000,
        speed:1500,
        autoplayDisableOnInteraction : false
    });
</script>
</body>
</html>

允许我加个自己项目外联，谢谢！

<a href="http://www.pt-story.com" target="_blank">你的故事</a>
点击查看更多内容
发表于 2017.02.13 10:53， 共 4637 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
5人点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

杜发明

Web前端工程师
手记
篇
粉丝
60
获赞与收藏
333

关注作者，订阅最新文章

阅读免费教程

感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消