master

分支 (1)

管理

管理

master

ceshi2
/
index.html

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./bootstrap-4.5.0-dist/css/bootstrap.css">
    <script src="../moban5171/js/jquery-3.4.1.min.js"></script>
    <title>bootstrap 4</title>
    <style>
         body{
            position: relative;
         }
        #end{
           background-color: #3DC2CA;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            margin-top: 5px;
            width: 100%;
            display: flex;
            border-radius:5px  5px 0px 0px;
            padding: 3px 0px;
            position: fixed;
            bottom: 0px;
        }
        #end a{
            flex: 1;
            text-align: center;
            text-decoration: none;
            }
        #end a:first-of-type::before{
            content: "";
            display: block;
            background-image: url("images/shouye1.png");
            background-repeat: no-repeat;
            background-position:3px 0px;
            background-size: 87% auto;
            width: 30px;
            height: 25px;
            margin: 0 auto;
        }
        #end a:nth-of-type(2)::before{
            content: "";
            display: block;
            background-image: url("images/shangping.png");
            background-repeat: no-repeat;
            background-position: 3px 0px;
            background-size: 87%, auto;
            width: 30px;
            height: 25px;
            margin: 0 auto;}
        #end a:nth-of-type(3)::before{
            content: "";
            display: block;
            background-image: url("images/gouwu.png");
            background-repeat: no-repeat;
            background-position: 3px 0px;
            background-size: 87%, auto;
            width: 30px;
            height: 25px;
            margin: 0 auto;}
        #end a:last-of-type::before{
            content: "";
            display: block;
            background-image: url("images/wode.png");
            background-repeat: no-repeat;
            background-position: 3px 0px;;
            background-size: 87% auto;
            width: 30px;
            height: 25px;
            margin: 0 auto;}
 #lunbo li{
     width: 10px;
     height: 10px;
     border-radius: 50%;
 }
 .sp{
     background-color:#3DC2CA ;width: 100%;margin-top: 50px;
 }
.sp img{
    width: 8rem;
    position: relative;top:5%;
    margin-left:50%;
    transform: translateX(-50%)
}
.sp h1{
    color: white;
}
.sp button{
    background-color: #203247;
    color: white;
    margin-top: 3rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    line-height: 35px;
    border-radius: 5px;
    width: 150px;
}
.about{
    vertical-align: middle;
    margin:30px auto;width: 90%;
    margin-top: 100px;
}
.about img{
    width: 100%;
}
.dibu1{
    font-size: 25px;
   padding-top: 2rem;
    margin-left: 2rem;
    margin-bottom: 2rem;
}
.dibu p:not(:first-of-type){
    margin-left: 2rem;
    margin-bottom: 0.5rem;
}
.dibu p input{
    border: none;
    border-bottom: 1px solid white;
    background-color: transparent;
    width: 90%;
    height: 45px;
    color: #ffffff;
    outline: none;
}
         .dibu span{
             font-size: 20px;
             display: inline-block;
             position: relative;
             left: 50%;
             transform: translateX(-50%);
             width: 50%;
             height: 2rem;
             text-align: center;
             background-color: #3DC2CA;
             margin-top: 10px;
             border: none;
             border-radius: 5px;
         }
         #bs1{
             padding: 0.2rem 1rem;
             background-color: #3DC2CA;
         }
    </style>

</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light  sticky-top "id="bs1">
    <a class="navbar-brand" href="#">玩具网</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="index.html">主页<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="2.html">商城</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="3.html">购物车</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="6.html">我的</a>
            </li>
        </ul>
    </div>
</nav>
<div class="bd-example carousel-fade " id="imgs">
    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators" id="lunbo">
            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner ">
            <div class="carousel-item active">
                <img src="images/AD0ItLuaChACGAAg-_3G8AUo8ZHRkwMw7gU46AI!900x900.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="images/AD0ItLuaChACGAAg-_3G8AUomPrumgMw7gU46AI!900x900.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
                <img src="images/AD0ItLuaChACGAAg-_3G8AUokuj8tgIw7gU46AI!900x900.jpg" class="d-block w-100" alt="...">
        </div>
        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
    <marquee><font size=+1 color=orange>买玩具，就上玩具网！</font></marquee>
<div style="width: 90%;background-color:#203247;margin: 10px auto;border-radius: 10px; height: 12rem;text-align: center;color: white;padding-top: 3px">
    <p style="width: 3.5rem;height: 3.5rem;margin: 0 auto;border-radius: 50%;background-color: white"><svg style="width: 3rem;height: 3rem;margin-top: 5px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                  <g>
                    <g>
                      <path d="M476.158,231.363l-13.259-53.035c3.625-0.77,6.345-3.986,6.345-7.839v-8.551c0-18.566-15.105-33.67-33.67-33.67h-60.392
                   V110.63c0-9.136-7.432-16.568-16.568-16.568H50.772c-9.136,0-16.568,7.432-16.568,16.568V256c0,4.427,3.589,8.017,8.017,8.017
                   c4.427,0,8.017-3.589,8.017-8.017V110.63c0-0.295,0.239-0.534,0.534-0.534h307.841c0.295,0,0.534,0.239,0.534,0.534v145.372
                   c0,4.427,3.589,8.017,8.017,8.017c4.427,0,8.017-3.589,8.017-8.017v-9.088h94.569c0.008,0,0.014,0.002,0.021,0.002
                   c0.008,0,0.015-0.001,0.022-0.001c11.637,0.008,21.518,7.646,24.912,18.171h-24.928c-4.427,0-8.017,3.589-8.017,8.017v17.102
                   c0,13.851,11.268,25.119,25.119,25.119h9.086v35.273h-20.962c-6.886-19.883-25.787-34.205-47.982-34.205
                   s-41.097,14.322-47.982,34.205h-3.86v-60.393c0-4.427-3.589-8.017-8.017-8.017c-4.427,0-8.017,3.589-8.017,8.017v60.391H192.817
                   c-6.886-19.883-25.787-34.205-47.982-34.205s-41.097,14.322-47.982,34.205H50.772c-0.295,0-0.534-0.239-0.534-0.534v-17.637
                   h34.739c4.427,0,8.017-3.589,8.017-8.017s-3.589-8.017-8.017-8.017H8.017c-4.427,0-8.017,3.589-8.017,8.017
                   s3.589,8.017,8.017,8.017h26.188v17.637c0,9.136,7.432,16.568,16.568,16.568h43.304c-0.002,0.178-0.014,0.355-0.014,0.534
                   c0,27.996,22.777,50.772,50.772,50.772s50.772-22.776,50.772-50.772c0-0.18-0.012-0.356-0.014-0.534h180.67
                   c-0.002,0.178-0.014,0.355-0.014,0.534c0,27.996,22.777,50.772,50.772,50.772c27.995,0,50.772-22.776,50.772-50.772
                   c0-0.18-0.012-0.356-0.014-0.534h26.203c4.427,0,8.017-3.589,8.017-8.017v-85.511C512,251.989,496.423,234.448,476.158,231.363z
                    M375.182,144.301h60.392c9.725,0,17.637,7.912,17.637,17.637v0.534h-78.029V144.301z M375.182,230.881v-52.376h71.235
                   l13.094,52.376H375.182z M144.835,401.904c-19.155,0-34.739-15.583-34.739-34.739s15.584-34.739,34.739-34.739
                   c19.155,0,34.739,15.583,34.739,34.739S163.99,401.904,144.835,401.904z M427.023,401.904c-19.155,0-34.739-15.583-34.739-34.739
                   s15.584-34.739,34.739-34.739c19.155,0,34.739,15.583,34.739,34.739S446.178,401.904,427.023,401.904z M495.967,299.29h-9.086
                   c-5.01,0-9.086-4.076-9.086-9.086v-9.086h18.171V299.29z" />
                    </g>
                  </g></svg></p>
    <h2>快速送货 </h2>
    <span>我们有着自己专属的物流线，<br>
        所以能以最快的速度把货送到您的手上 </span>
</div>
<div style="width: 90%;background-color:#203247;margin: 10px auto;border-radius: 10px; height: 12rem;text-align: center;color: white;padding-top: 3px">
    <p style="width: 3.5rem;height: 3.5rem;margin: 0 auto;border-radius: 50%;background-color: white"><svg style="width: 3rem;height: 3rem;margin-top: 5px" id="_30_Premium" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" data-name="30_Premium">
    <g><g>
        <path d="m252.92 300h3.08a124.245 124.245 0 1 0 -4.49-.09c.075.009.15.023.226.03.394.039.789.06 1.184.06zm-96.92-124a100 100 0 1 1 100 100 100.113 100.113 0 0 1 -100-100z" />
        <path d="m447.445 387.635-80.4-80.4a171.682 171.682 0 0 0 60.955-131.235c0-94.841-77.159-172-172-172s-172 77.159-172 172c0 73.747 46.657 136.794 112 161.2v158.8c-.3 9.289 11.094 15.384 18.656 9.984l41.344-27.562 41.344 27.562c7.574 5.4 18.949-.7 18.656-9.984v-70.109l46.6 46.594c6.395 6.789 18.712 3.025 20.253-6.132l9.74-48.724 48.725-9.742c9.163-1.531 12.904-13.893 6.127-20.252zm-339.445-211.635c0-81.607 66.393-148 148-148s148 66.393 148 148-66.393 148-148 148-148-66.393-148-148zm154.656 278.016a12 12 0 0 0 -13.312 0l-29.344 19.562v-129.378a172.338 172.338 0 0 0 72 0v129.38zm117.381-58.353a12 12 0 0 0 -9.415 9.415l-6.913 34.58-47.709-47.709v-54.749a171.469 171.469 0 0 0 31.467-15.6l67.151 67.152z" />
        <path d="m287.62 236.985c8.349 4.694 19.251-3.212 17.367-12.618l-5.841-35.145 25.384-25c7.049-6.5 2.89-19.3-6.634-20.415l-35.23-5.306-15.933-31.867c-4.009-8.713-17.457-8.711-21.466 0l-15.933 31.866-35.23 5.306c-9.526 1.119-13.681 13.911-6.634 20.415l25.384 25-5.841 35.145c-1.879 9.406 9 17.31 17.367 12.618l31.62-16.414zm-53-32.359 2.928-17.615a12 12 0 0 0 -3.417-10.516l-12.721-12.531 17.658-2.66a12 12 0 0 0 8.947-6.5l7.985-15.971 7.985 15.972a12 12 0 0 0 8.947 6.5l17.658 2.66-12.723 12.535a12 12 0 0 0 -3.417 10.516l2.928 17.615-15.849-8.231a12 12 0 0 0 -11.058 0z" />
    </g></g></svg></p>
    <h2>质量保证 </h2>
    <span>我们的商品都是通过精挑细选出来的优质品，
        <br>跟我们合作的生厂商也是知名厂商，<br>顾客不用担心质量问题 </span>
</div>
<div style="width: 90%;background-color:#203247;margin: 10px auto;border-radius: 10px; height: 12rem;text-align: center;color: white;padding-top: 3px">
    <p style="width: 3.5rem;height: 3.5rem;margin: 0 auto;border-radius: 50%;background-color: white"><svg style="width: 3rem;height: 3rem;margin-top: 5px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490.667 490.667" style="enable-background:new 0 0 490.667 490.667;" xml:space="preserve">
    <g><g>
    <path d="M138.667,192H96c-5.888,0-10.667,4.779-10.667,10.667V288c0,5.888,4.779,10.667,10.667,10.667s10.667-4.779,10.667-10.667
                   v-74.667h32c5.888,0,10.667-4.779,10.667-10.667S144.555,192,138.667,192z" />
        <path d="M117.333,234.667H96c-5.888,0-10.667,4.779-10.667,10.667S90.112,256,96,256h21.333c5.888,0,10.667-4.779,10.667-10.667
                   S123.221,234.667,117.333,234.667z" />
        <path d="M245.333,0C110.059,0,0,110.059,0,245.333s110.059,245.333,245.333,245.333s245.333-110.059,245.333-245.333
                   S380.608,0,245.333,0z M245.333,469.333c-123.52,0-224-100.48-224-224s100.48-224,224-224s224,100.48,224,224
                   S368.853,469.333,245.333,469.333z" />
        <path d="M386.752,131.989C352.085,88.789,300.544,64,245.333,64s-106.752,24.789-141.419,67.989
                   c-3.691,4.587-2.965,11.307,1.643,14.997c4.587,3.691,11.307,2.965,14.976-1.643c30.613-38.144,76.096-60.011,124.8-60.011
                   s94.187,21.867,124.779,60.011c2.112,2.624,5.205,3.989,8.32,3.989c2.368,0,4.715-0.768,6.677-2.347
                   C389.717,143.296,390.443,136.576,386.752,131.989z" />
        <path d="M376.405,354.923c-4.224-4.032-11.008-3.861-15.061,0.405c-30.613,32.235-71.808,50.005-116.011,50.005
                   s-85.397-17.771-115.989-50.005c-4.032-4.309-10.816-4.437-15.061-0.405c-4.309,4.053-4.459,10.816-0.405,15.083
                   c34.667,36.544,81.344,56.661,131.456,56.661s96.789-20.117,131.477-56.661C380.864,365.739,380.693,358.976,376.405,354.923z" />
        <path d="M206.805,255.723c15.701-2.027,27.861-15.488,27.861-31.723c0-17.643-14.357-32-32-32h-21.333
                   c-5.888,0-10.667,4.779-10.667,10.667v42.581c0,0.043,0,0.107,0,0.149V288c0,5.888,4.779,10.667,10.667,10.667
                   S192,293.888,192,288v-16.917l24.448,24.469c2.091,2.069,4.821,3.115,7.552,3.115c2.731,0,5.461-1.045,7.531-3.136
                   c4.16-4.16,4.16-10.923,0-15.083L206.805,255.723z M192,234.667v-21.333h10.667c5.867,0,10.667,4.779,10.667,10.667
                   s-4.8,10.667-10.667,10.667H192z" />
        <path d="M309.333,277.333h-32v-64h32c5.888,0,10.667-4.779,10.667-10.667S315.221,192,309.333,192h-42.667
                   c-5.888,0-10.667,4.779-10.667,10.667V288c0,5.888,4.779,10.667,10.667,10.667h42.667c5.888,0,10.667-4.779,10.667-10.667
                   S315.221,277.333,309.333,277.333z" />
        <path d="M288,234.667h-21.333c-5.888,0-10.667,4.779-10.667,10.667S260.779,256,266.667,256H288
                   c5.888,0,10.667-4.779,10.667-10.667S293.888,234.667,288,234.667z" />
        <path d="M394.667,277.333h-32v-64h32c5.888,0,10.667-4.779,10.667-10.667S400.555,192,394.667,192H352
                   c-5.888,0-10.667,4.779-10.667,10.667V288c0,5.888,4.779,10.667,10.667,10.667h42.667c5.888,0,10.667-4.779,10.667-10.667
                   S400.555,277.333,394.667,277.333z" />
        <path d="M373.333,234.667H352c-5.888,0-10.667,4.779-10.667,10.667S346.112,256,352,256h21.333
                   c5.888,0,10.667-4.779,10.667-10.667S379.221,234.667,373.333,234.667z" />
    </g></g></svg></p>
    <h2>免费派送 </h2>
    <span>我们的商品都是面运费的，运费由我们来 <br>
        承担，顾客可以放心下单，不用担心高额运费 </span>
</div>
<!--关于我们-->
<div class="about">
    <img src="images/about-img.jpg" alt="">
</div>
<div style="width: 90%;margin: 10px auto">
    <h1>About Us</h1>
    <span>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All </span>
    <br><br><button style="background-color: #203247;width: 10rem;height: 2.5rem;border-radius: 5px;color: white">阅读更多</button>
</div>
<!--商品介绍-->
<div class="sp">
    <div style="padding-top: 50px;padding-bottom: 30px;text-align: center"><h1>New Arrivals</h1></div>
    <div style="width: 90%;height: 16rem;background-color: white;margin: 0 auto;padding-top: 10px">
        <div style="width: 90%;background-color: #cccccc;margin: 0 auto;height: 10rem;">
            <img src="images/p1.png" alt="">
        </div>
        <p style="font-size: 18px;text-align: center;padding-top: 10px"><strong>玩具飞机</strong></p>
        <p style="text-align: center">价格: ￥100</p>
    </div>
    <div style="background-color:#3DC2CA;height: 1rem;width: 100% "></div>
    <div style="width: 90%;height: 16rem;background-color: white;margin: 0 auto;padding-top: 10px">
        <div style="width: 90%;background-color: #cccccc;margin: 0 auto;height: 10rem;">
            <img src="images/p2.png" alt="">
        </div>
        <p style="font-size: 18px;text-align: center;padding-top: 10px"><strong>玩具积木</strong></p>
        <p style="text-align: center">价格: ￥50</p>
    </div>
    <div style="background-color:#3DC2CA;height: 1rem;width: 100% "></div>
    <div style="width: 90%;height: 16rem;background-color: white;margin: 0 auto;padding-top: 10px">
        <div style="width: 90%;background-color: #cccccc;margin: 0 auto;height: 10rem;">
            <img src="images/p3.png" alt="">
        </div>
        <p style="font-size: 18px;text-align: center;padding-top: 10px"><strong>玩具恐龙</strong></p>
        <p style="text-align: center">价格: ￥50</p>
    </div>
    <div style="background-color:#3DC2CA;height: 1rem;width: 100% "></div>
    <div style="width: 90%;height: 16rem;background-color: white;margin: 0 auto;padding-top: 10px">
        <div style="width: 90%;background-color: #cccccc;margin: 0 auto;height: 10rem;">
            <img src="images/p4.png" alt="">
        </div>
        <p style="font-size: 18px;text-align: center;padding-top: 10px"><strong>玩具排球</strong></p>
        <p style="text-align: center">价格: ￥50</p>
    </div>
    <div style="background-color:#3DC2CA;height: 1rem;width: 100% "></div>
    <div style="width: 90%;height: 16rem;background-color: white;margin: 0 auto;padding-top: 10px">
        <div style="width: 90%;background-color: #cccccc;margin: 0 auto;height: 10rem;">
            <img src="images/p5.png" alt="">
        </div>
        <p style="font-size: 18px;text-align: center;padding-top: 10px"><strong>玩具鼓</strong></p>
        <p style="text-align: center">价格: ￥100</p>
    </div>
    <div style="background-color:#3DC2CA;height: 1rem;width: 100% "></div>
    <div style="width: 90%;height: 16rem;background-color: white;margin: 0 auto;padding-top: 10px">
        <div style="width: 90%;background-color: #cccccc;margin: 0 auto;height: 10rem;">
            <img src="images/p6.png" alt="">
        </div>
        <p style="font-size: 18px;text-align: center;padding-top: 10px"><strong>玩具积木</strong></p>
        <p style="text-align: center">价格: ￥50</p>
    </div>
    <div style="background-color:#3DC2CA;height: 1rem;width: 100% "></div>
    <div style="width: 90%;height: 16rem;background-color: white;margin: 0 auto;padding-top: 10px">
        <div style="width: 90%;background-color: #cccccc;margin: 0 auto;height: 10rem;">
            <img src="images/p7.png" style="width: 75px" alt="">
        </div>
        <p style="font-size: 18px;text-align: center;padding-top: 10px"><strong>玩具火箭</strong></p>
        <p style="text-align: center">价格: ￥200</p>
    </div>
    <div style="background-color:#3DC2CA;height: 1rem;width: 100% "></div>
    <div style="width: 90%;height: 16rem;background-color: white;margin: 0 auto;padding-top: 10px">
        <div style="width: 90%;background-color: #cccccc;margin: 0 auto;height: 10rem;">
            <img src="images/p8.png" style="position: relative;top:14%" alt="">
        </div>
        <p style="font-size: 18px;text-align: center;padding-top: 10px"><strong>玩具火车</strong></p>
        <p style="text-align: center">价格: ￥150</p>
    </div>
    <div>
        <button>View All Products</button>
    </div>
    <div style="width: 100%;height: 5rem;margin-bottom: 0px"></div>
</div>
<!--联系我们-->
<div class="dibu" style="background-color: #203247;color: white;height: auto">
    <p class="dibu1"><strong>Address</strong></p>
    <p>地址:南昌市</p>
    <p>电话:123456789</p>
    <p>邮箱:[email protected]</p>
    <p class="dibu1">Info</p>
    <p style="margin-right: 1rem">necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful</p>
    <p class="dibu1">Links</p>
    <p><a href="index.html" style="color: white">主页</a></p>
    <p><a href="2.html" style="color: white">商城</a></p>
    <p><a href="3.html" style="color: white">购物车</a></p>
    <p><a href="4.html" style="color: white">我的</a></p>
    <p class="dibu1">Subscribe</p>
    <p><input type="text" placeholder="邮箱"></p>
    <span>Subscribe</span>
    <p style="height: 5rem"></p>
</div>
<!--底部-->
<div style="width: 100%"></div>
<div id="end" style="width: 100%">
    <a href="index.html" style="color: red">主页</a>
    <a href="2.html" style="color: white">商城</a>
    <a href="3.html" style="color: white">购物车</a>
    <a href="6.html" style="color: white">我的</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!--
  可以用来实现  弹出框  下拉菜单  提示框功能
  如果说不需要这些功能  可以直接引入bootstrap.min.js  很小 只有62k
-->
<!--<script src="bootstrap4/dist/js/popper.min.js" ></script>
<script src="bootstrap4/dist/js/bootstrap.min.js"></script>-->

<!--如果 想要 popper的功能  可以直接引入 bundle.js 包含所有的功能-->
<script src="./bootstrap-4.5.0-dist/js/bootstrap.bundle.min.js"></script>

</div>
</body>
</html>