apple
/
index.html

<!DOCTYPE html>
<html manifest="./index.manifest">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <title></title>
    <script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.js"></script>
    <!-- <link rel="stylesheet" href="./css/bootstrap-theme.css"> -->
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <header id="header">
        <div class="">
            <广告>
        </div>
    </header>
    <nav class="navbar navbar-default" style="background: rgba(0,0,0,0.8);border:none;">
        <div class="container" >
            <div class="navbar-header">
                <button type="button" name="button" class="navbar-toggle " aria-controls="navbar" data-target="#navbar" aria-expanded="false" data-toggle="collapse" style="float:left;margin-left:5%;margin-top:20px;border:none;">
              <span class="sr-only"></span>
              <span class="icon-bar" style="background-color:white"></span>
              <span class="icon-bar"style="background-color:white"></span>
            </button>
                <img class="navbar-toggle " src="./images/nav_03.png" style="float:left;margin:7px 0px 0px 31%;border:none;">
                <span id="shop" class="glyphicon glyphicon-shopping-cart navbar-toggle" style="float:right;margin:12px 5% 0px 0px;border:none;"></span>
                <span id="imgbag" class="glyphicon glyphicon-triangle-top"></span>
                <ul id="bag">
                    <p>你的购物车是空的</p>
                    <li><img src="./images/a1.png" alt=""><a href="#">购物车</a></li>
                    <li><img src="./images/a2.png" alt=""><a href="#">收藏</a></li>
                    <li><img src="./images/a3.png" alt=""><a href="#">订单</a></li>
                    <li><img src="./images/a4.png" alt=""><a href="#">账户</a></li>
                    <li><img src="./images/a5.png" alt=""><a href="#" id="log_a" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">登录</a></li>
                </ul>
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="exampleModalLabel" style="font-weight:bold">请登录</h4>
                            </div>
                            <div class="modal-body">
                                <form style="margin:5% 10%;">
                                    <div class="form-group">
                                        <label for="recipient-name" class="control-label" style="font-weight:bold">登录 Apple Store</label>
                                        <input type="text" placeholder="Apple ID*" class="form-control" id="userName" style="width:60%;margin-bottom:10px;">
                                        <input type="text" placeholder="密码*" class="form-control" id="userPsw" style="width:60%;margin-bottom:10px;">
                                        <span style="color:blue;font-size:10px;display:inline-block;width:130px;">忘了自己的Apple Id 或密码？</span>
                                        <button id="login" type="button" class="btn btn-primary" data-dismiss="modal" style="float:right;margin-right:40%;">登录</button>
                                    </div>
                                </form>

                            </div>
                        </div>
                    </div>
                </div>
              </div>
                <div id="showdiv"  class="navbar-collapse collapse">
                    <ul class="nav navbar-nav site-navbar">

                        <li>
                            <a href="#"><img src="./images/nav_03.png"></a>
                        </li>
                        <li><a href="#">Mac</a></li>
                        <li><a href="#">iPad</a></li>
                        <li><a href="#">iPhone</a></li>
                        <li><a href="#">Watch</a></li>
                        <li><a href="#">Music</a></li>
                        <li><a href="#">技术支持</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
                        <li style="position:relative;"><a href="#"><span class="glyphicon glyphicon-shopping-cart" id="fshop"></span></a>
                            <span id="fimgbag" class="glyphicon glyphicon-triangle-top"></span>
                            <ul id="fbag">
                                <p>你的购物车是空的</p>
                                <li><img src="./images/a1.png" alt=""><a href="#">购物车</a></li>
                                <li><img src="./images/a2.png" alt=""><a href="#">收藏</a></li>
                                <li><img src="./images/a3.png" alt=""><a href="#">订单</a></li>
                                <li><img src="./images/a4.png" alt=""><a href="#">账户</a></li>
                                <li><img src="./images/a5.png" alt=""><a href="#">登录</a></li>
                            </ul>
                        </li>

                    </ul>
                </div>


                <div id="navbar" class="collapse" aria-atomic="false">
                    <ul class="nav navbar-nav site-navbar">
                        <li><a href="#">Mac</a></li>
                        <li><a href="#">iPad</a></li>
                        <li><a href="#">iPhone</a></li>
                        <li><a href="#">Watch</a></li>
                        <li><a href="#">Music</a></li>
                        <li><a href="#">技术支持</a></li>
                        <li><a href="#" style="padding:0px;"><span class="glyphicon glyphicon-search" style="margin:15px 5px 0px 15px;"></span>搜索apple.com</a></li>
                    </ul>
                </div>


            </div>


    </nav>

    <main>
        <div style="background:#f9f0eb;width:100%;height:576px;overflow:hidden;margin-bottom:15px;">
            <img src="./images/i8.png" class="img-responsive center-block" alt="Responsive image" style="margin-top:3%;">
        </div>
        <div style="background:#fafafa;width:100%;height:650px;overflow:hidden;margin-bottom:15px;">
            <img src="./images/ix.png" class="img-responsive center-block" alt="Responsive image" style="margin-top:3%;">
        </div>
        <div style="background:#fafafa;width:100%;height:650px;overflow:hidden;margin-bottom:15px;">
            <img src="./images/y3.png" class="img-responsive center-block" alt="Responsive image" style="margin-top:3%;">
        </div>
        <div class="row container">
            <div class="col-sm-6" style="height:550px;background-color:#fafafa;box-shadow:inset 0px 0px 0px 10px #fff;">
                <img src="./images/i11.png" class="img-responsive center-block center-vertical" alt="Responsive image" style="margin-top:3%;">
            </div>
            <div class="col-sm-6" style="height:550px;background-color:#fafafa;box-shadow:inset 0px 0px 0px 10px #fff;">
                <img src="./images/w4.png" class="img-responsive center-block center-vertical" alt="Responsive image">
            </div>
        </div>
        <div class="row container">
            <div class="col-sm-6" style="height:550px;background-color:#fafafa;box-shadow:inset 0px 0px 0px 10px #fff;">
                <img src="./images/y1.png" class="img-responsive center-block center-vertical" alt="Responsive image" style="margin-top:3%;">
            </div>
            <div class="col-sm-6" style="height:550px;background-color:#fafafa;box-shadow:inset 0px 0px 0px 10px #fff;">
                <img src="./images/y2.png" class="img-responsive center-block center-vertical" alt="Responsive image">
            </div>
        </div>
    </main>
    <footer>
        <div class="container">

            <div id="footdiv" class="container navbar-collapse row">
                <div class="col-sm-1">

                </div>

                <div id="xg" class="col-xs-12 col-sm-2" style="line-height:40px;">
                    <p class="navbar-header" style="float:right;">
                        <button type="button" name="button" class="navbar-toggle " aria-controls="navbar" data-target="#ul1" aria-expanded="false" data-toggle="collapse">
               <span style="float:right;width:10px;height:10px;margin-top:-15px;">+</span>
              </button>
                    </p>
                    选购及了解
                    <ul id="ul1" class="navbar-collapse collapse" aria-atomic="false">
                        <li><a href="#">Mac</a></li>
                        <li><a href="#">Mac</a></li>
                        <li><a href="#">Mac</a></li>
                        <li><a href="#">Mac</a></li>
                        <li><a href="#">Mac</a></li>
                        <li><a href="#">Mac</a></li>
                        <li><a href="#">Mac</a></li>
                        <li><a href="#">Mac</a></li>
                        <li><a href="#">Mac</a></li>
                    </ul>
                </div>
                <div id="app" class="col-xs-12 col-sm-2" style="line-height:40px;">
                    <p class="navbar-header" style="float:right;">
                        <button type="button" name="button" class="navbar-toggle " aria-controls="navbar" data-target="#ul2" aria-expanded="false" data-toggle="collapse">
             <span style="float:right;width:10px;height:10px;margin-top:-15px;">+</span>
            </button>
                    </p>
                    apple商店
                    <ul id="ul2" class="navbar-collapse collapse" aria-atomic="false">
                        <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>
                        <li><a href="#">零售店</a></li>
                        <li><a href="#">零售店</a></li>
                        <li><a href="#">零售店</a></li>
                        <li><a href="#">零售店</a></li>

                    </ul>
                </div>
                <div id="jyyy" class="col-xs-12 col-sm-2" style="line-height:40px;">
                    <p class="navbar-header" style="float:right;">
                        <button type="button" name="button" class="navbar-toggle " aria-controls="navbar" data-target="#ul3" aria-expanded="false" data-toggle="collapse">
             <span style="float:right;width:10px;height:10px;margin-top:-15px;">+</span>
            </button>
                    </p>
                    教育应用
                    <ul id="ul3" class="navbar-collapse collapse" aria-atomic="false">
                        <li><a href="#">教育</a></li>
                        <li><a href="#">教育</a></li>
                    </ul>
                </div>
                <div id="zh" class="col-xs-12 col-sm-2" style="line-height:40px;">
                    <p class="navbar-header" style="float:right;">
                        <button type="button" name="button" class="navbar-toggle " aria-controls="navbar" data-target="#ul4" aria-expanded="false" data-toggle="collapse">
             <span style="float:right;width:10px;height:10px;margin-top:-15px;">+</span>
            </button>
                    </p>
                    账户
                    <ul id="ul4" class="navbar-collapse collapse" aria-atomic="false">
                        <li><a href="#">管理你的id</a></li>
                        <li><a href="#">管理你的id</a></li>
                        <li><a href="#">管理你的id</a></li>
                    </ul>


                </div>
                <div id="gy" class="col-xs-12 col-sm-2" style="line-height:40px;">
                    <p class="navbar-header" style="float:right;">
                        <button type="button" name="button" class="navbar-toggle " aria-controls="navbar" data-target="#ul5" aria-expanded="false" data-toggle="collapse">
             <span style="float:right;width:10px;height:10px;margin-top:-15px;">+</span>
            </button>
                    </p>
                    关于apple
                    <ul id="ul5" class="navbar-collapse collapse" aria-atomic="false">
                        <li><a href="#">关于apple</a></li>
                        <li><a href="#">关于apple</a></li>
                        <li><a href="#">关于apple</a></li>
                        <li><a href="#">关于apple</a></li>
                        <li><a href="#">关于apple</a></li>
                    </ul>
                </div>
                <div id="swyy" class="col-xs-12 col-sm-2" style="line-height:40px;">
                    <p class="navbar-header" style="float:right;">
                        <button type="button" name="button" class="navbar-toggle " aria-controls="navbar" data-target="#ul6" aria-expanded="false" data-toggle="collapse">
             <span style="float:right;width:10px;height:10px;margin-top:-15px;">+</span>
            </button>
                    </p>
                    商务应用
                    <ul id="ul6" class="navbar-collapse collapse" aria-atomic="false">
                        <li><a href="#">商务</a></li>
                        <li><a href="#">商务</a></li>
                    </ul>

                </div>

                <div id="jzg" class="col-xs-12 col-sm-2" style="line-height:40px;">
                    <p class="navbar-header" style="float:right;">
                        <button type="button" name="button" class="navbar-toggle " aria-controls="navbar" data-target="#ul7" aria-expanded="false" data-toggle="collapse">
             <span style="float:right;width:10px;height:10px;margin-top:-15px;">+</span>
            </button>
                    </p>
                    价值观
                    <ul id="ul7" class="navbar-collapse collapse" aria-atomic="false">
                        <li><a href="#">价值观</a></li>
                        <li><a href="#">价值观</a></li>
                        <li><a href="#">价值观</a></li>
                        <li><a href="#">价值观</a></li>
                    </ul>

                </div>

            </div>


        </div>
        <div class="bottom" style="font-size:12px;color:#c0c0c0;">
            <div class="">
                更多选购方式：前往 <span style="color:blue;"><a href="#">Apple Store 零售店</a></span>，致电 400-666-8800 或查找在你附近的<span style="color:blue;"><a href="#">授权经销商</a></span>
            </div>
            <div class="">
                Copyright © 2017 Apple Inc. 保留所有权利。
                <ul>
                    <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>
            <p>京公安网安备 11010502008968<a href="#" style="color:#c0c0c0;">京ICP备10214630</a> </p>
        </div>


    </footer>
</body>
<script type="text/javascript" src="./js/index.js">
</script>

</html>