master

分支 (1)

管理

管理

master

requirejs-flexible-jdmobile
/
index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>标题</title>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Expires" content="-1">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">

    <link rel="stylesheet" href="css/font-awesome-4.5.0/css/font-awesome.min.css" />
    <!--<link rel="stylesheet" href="css/swiper-3.4.2.min.css" />-->
    <!--<link rel="stylesheet" href="css/animate.min.css" />-->
    <link rel="stylesheet" href="css/index.css" />
</head>

<body ontouchstart>
    <!--顶部   begin-->
    <div class="topbar">
        <ul>
            <li>
                <i class="fa fa-angle-left"></i>
            </li>
            <li>
                <h1>京东全球购</h1>
            </li>
            <li>
                <i class="fa fa-angle-right"></i>
            </li>
        </ul>
    </div>
    <!--顶部   end-->

    <!--搜索栏   begin-->
    <div class="search-header">
        <ul>
            <li class="bars">
                <i class="fa fa-bars"></i>
            </li>
            <li class="search-input-group">
                <input type="text" placeholder="请输入关键词">
                <span><i class="fa fa-search"></i></span>
            </li>
        </ul>
    </div>
    <!--搜索栏   end-->

    <!-- 广告焦点图  begin -->
    <div class="swiper-container swiper-banner">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(images/5914512cNe4854e0d.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(images/5914512cNe4854e0d.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(images/5914512cNe4854e0d.jpg)"></div>
            <div class="swiper-slide" style="background-image:url(images/5914512cNe4854e0d.jpg)"></div>
        </div>
        <div class="swiper-pagination swiper-pagination-white"></div>
    </div>
    <!-- 广告焦点图  end -->

    <!--分类，9宫格  begin-->
    <div class="grid">
        <ul>
            <li>
                <a href="">
                    <i class="fa fa-glass"></i>
                    <span>进口美食</span>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fa fa-bath"></i>
                    <span>母婴用品</span>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fa fa-eyedropper"></i>
                    <span>个护美妆</span>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fa fa-creative-commons"></i>
                    <span>营养保健</span>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fa fa-gift"></i>
                    <span>全球名店</span>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fa fa-camera"></i>
                    <span>数码家电</span>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fa fa-child"></i>
                    <span>运动服饰</span>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fa fa-bicycle"></i>
                    <span>打牌奢侈</span>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fa fa-car"></i>
                    <span>汽车用品</span>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="fa fa-bed"></i>
                    <span>家具厨具</span>
                </a>
            </li>
        </ul>
    </div>
    <!--分类，9宫格  end-->

    <!--全球名店   begin-->
    <div class="floor globalShoppes">
        <h2>全球名店</h2>
        <ul class="globalshoppes-list">
            <li class="item" style="background-image:url('images/58ef277fN036de809.jpg')">
                <a href="">
                    <div class="name">
                        <div class="bg"></div>
                        <div class="text">日本Rakuten旗舰店</div>
                    </div>
                </a>
            </li>
            <li class="item" style="background-image:url('images/58ef279fN36f18ca8.jpg')">
                <a href="">
                    <div class="name">
                        <div class="bg"></div>
                        <div class="text">沃尔玛全球购旗舰店沃尔玛全球购旗舰店</div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <!--全球名店   end-->


    <!---->
    <div class="floor swiper-tabs">
        <div class="columnTab">
            <dl class="swiper-wrapper clearfix">
                <dd class="swiper-slide active">母婴用品</dd>
                <dd class="swiper-slide">个护美妆</dd>
                <dd class="swiper-slide">营养保健</dd>
                <dd class="swiper-slide">进口美食</dd>
                <dd class="swiper-slide">数码电器</dd>
                <dd class="swiper-slide">品质家居</dd>
                <dd class="swiper-slide">全球名店</dd>
                <dd class="swiper-slide">汽车用品</dd>
            </dl>
            <ul class="sub-cat clearfix">
                <li><a href="">营养奶粉</a></li>
                <li><a href="">婴儿尿裤</a></li>
                <li><a href="">洗护用品</a></li>
                <li><a href="">母婴用品</a></li>
                <li><a href="">婴儿湿巾</a></li>
                <li><a href="">孕妈美容</a></li>
                <li><a href="">安全座椅</a></li>
            </ul>
        </div>
        <div class="swiper-tabs-content">
            <div class="swiper-slide">
                <ul class="cat-list">
                    <li>
                        <a href="">
                            <div class="img">
                                <img src="images/58228257N70d6aa14.jpg" alt="">
                            </div>
                            <div class="name">
                                澳洲a2 Platinum 白金版婴幼儿奶粉3段900g（1-3岁）新西兰
                            </div>
                            <p class="price">¥228</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="img">
                                <img src="images/57b160f2N1fdab039.jpg" alt="">
                            </div>
                            <div class="name">
                                荷兰牛栏诺优能Nutrilon婴幼儿奶粉 4段(1岁以上)800g
                            </div>
                            <p class="price">¥228</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="img">
                                <img src="images/57b160f2N1fdab039.jpg" alt="">
                            </div>
                            <div class="name">
                                荷兰牛栏诺优能Nutrilon婴幼儿奶粉 4段(1岁以上)800g
                            </div>
                            <p class="price">¥228</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="img">
                                <img src="images/57b160f2N1fdab039.jpg" alt="">
                            </div>
                            <div class="name">
                                荷兰牛栏诺优能Nutrilon婴幼儿奶粉 4段(1岁以上)800g
                            </div>
                            <p class="price">¥228</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="img">
                                <img src="images/57b160f2N1fdab039.jpg" alt="">
                            </div>
                            <div class="name">
                                荷兰牛栏诺优能Nutrilon婴幼儿奶粉 4段(1岁以上)800g
                            </div>
                            <p class="price">¥228</p>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <div class="img">
                                <img src="images/57b160f2N1fdab039.jpg" alt="">
                            </div>
                            <div class="name">
                                荷兰牛栏诺优能Nutrilon婴幼儿奶粉 4段(1岁以上)800g
                            </div>
                            <p class="price">¥228</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <nav class="toolbar navBottom">
        <ul>
            <li>
                <a href="">
                <i class="fa fa-home"></i>
                <p>首页</p>
                </a>
            </li>
            <li>
                <a href="">
                <i class="fa fa-gift"></i>
                <p>自营</p></a>
            </li>
            <li>
                <a href="">
                <i class="fa fa-tags"></i>
                <p>全球特卖</p></a>
            </li>
            <li>
                <a href="">
                <i class="fa fa-thumbs-o-up"></i>
                <p>识货指南</p></a>
            </li>
            <li>
                <a href="">
                <i class="fa fa-navicon"></i>
                <p>分类</p></a>
            </li>
        </ul>
    </nav>


    <script type="text/javascript" data-main="js/main" src="js/require.js"></script>
    <script>
        require(["zepto", "flexible_css", "flexible", "makegrid"], function ($) {
            require(["Swiper"], function (Swiper) {
                $(function () {
                    var swiperBanner = new Swiper('.swiper-banner', {
                        pagination: '.swiper-pagination',
                        paginationClickable: '.swiper-pagination',
                        spaceBetween: 30,
                        effect: 'fade',
                        loop: true,
                    });

                    var swiperTabs = new Swiper('.swiper-tabs .columnTab', {
                        slidesPerView: 4,
                        freeMode: true,
                        lazyLoading: true,
                        freeModeSticky: false
                    });
                });
            });
        });
    </script>


    <!--<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>-->
    <!--<script src="js/swiper-3.4.2.jquery.min.js"></script>-->
    <!--<script src="js/swiper.animate1.0.2.min.js"></script>-->
    <script>

    </script>

</body>

</html>