image.png

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title></title>
    7.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    8.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    9.         integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    10.     <link rel="stylesheet" href="css/iconfont.css">
    11.     <link rel="stylesheet" href="css/index.css">
    12. </head>
    14. <body>
    16.     <div class="container-fluid">
    17.         <div class="row justify-content-end">
    18.             <!-- 左边内容 -->
    19.             <div class="col-lg-4 position-fixed border-right leftCon">
    20.                 <!-- 导航栏 -->
    21.                 <header class="navbar d-none d-sm-flex px-0 px-lg-3 py-3 py-lg-4">
    22.                     <a href="#" class="navbar-brand"><img src="images/logo.svg" alt="" width="36"></a>
    23.                     <ul class="nav mr-auto">
    24.                         <li class="nav-item">
    25.                             <a href="#" class="nav-link text-dark font-weight-bold">门店</a>
    26.                         </li>
    27.                         <li class="nav-item">
    28.                             <a href="#" class="nav-link text-dark font-weight-bold">我的账户</a>
    29.                         </li>
    30.                         <li class="nav-item">
    31.                             <a href="#" class="nav-link text-dark font-weight-bold">菜单</a>
    32.                         </li>
    33.                     </ul>
    34.                     <span class="iconfont icon-menu" id="showBtn"></span>
    35.                 </header>
    37.                 <!-- 标题与登录注册 -->
    38.                 <div class="d-flex align-items-center login">
    39.                     <div class="px-0 px-lg-5">
    40.                         <h1 class="font-weight-bold py-3">心情惬意，来杯咖啡吧 <span class="iconfont icon-kafei"></span></h1>
    41.                         <div class="d-none d-sm-block my-3">
    42.                             <a href="#" class="text-success">
    43.                                 <span class="iconfont icon-denglu"></span>
    44.                                 <span>登录</span>
    45.                             </a>
    46.                             <a href="#" class="btn btn-outline-success ml-4 register">注册</a>
    47.                         </div>
    48.                     </div>
    49.                 </div>
    51.                 <!-- 点击菜单后要展示的内容 -->
    52.                 <div class="d-flex bg-white flex-column justify-content-between position-absolute menu hide">
    53.                     <header class="navbar d-flex px-0 px-lg-3 py-3 py-lg-4">
    54.                         <a href="#" class="navbar-brand"><img src="images/logo.svg" alt="" width="36"></a>
    55.                         <span class="iconfont icon-guanbi" id="closeBtn"></span>
    56.                     </header>
    57.                     <div class="list">
    58.                         <ul class="list-unstyled mx-sm-5 pl-sm-5">
    59.                             <li><a href="#" class="font-weight-bold text-dark py-2 d-block">门店</a></li>
    60.                             <li><a href="#" class="font-weight-bold text-dark py-2 d-block">星享俱乐部</a></li>
    61.                             <li><a href="#" class="font-weight-bold text-dark py-2 d-block">菜单</a></li>
    62.                             <hr>
    63.                             <li><a href="#" class="font-weight-bold text-dark py-2 d-block">星巴克移动应用</a></li>
    64.                             <li><a href="#" class="font-weight-bold text-dark py-2 d-block">星礼卡</a></li>
    65.                             <li><a href="#" class="font-weight-bold text-dark py-2 d-block">星巴克臻选™</a></li>
    66.                             <li><a href="#" class="font-weight-bold text-dark py-2 d-block">啡快™ － 在线点 到店取</a></li>
    67.                             <li><a href="#" class="font-weight-bold text-dark py-2 d-block">专星送™</a></li>
    68.                             <li><a href="#" class="font-weight-bold text-dark py-2 d-block">咖啡星讲堂</a></li>
    69.                             <li><a href="#" class="font-weight-bold text-dark py-2 d-block">上海烘焙工坊</a></li>
    70.                             <li><a href="#" class="font-weight-bold text-dark py-2 d-block">关于星巴克</a></li>
    71.                             <li><a href="#" class="font-weight-bold text-dark py-2 d-block">帮助中心</a></li>
    72.                             <hr>
    73.                         </ul>
    74.                         <div class="my-3 mx-sm-5 pl-sm-5 font">
    75.                             <a href="#" class="text-success">
    76.                                 <span class="iconfont icon-denglu"></span>
    77.                                 <span>登录</span>
    78.                             </a>
    79.                             <a href="#" class="btn btn-outline-success ml-4 register">注册</a>
    80.                         </div>
    81.                     </div>
    82.                     <footer class="mx-sm-5 pl-sm-5 pb-5">
    83.                         <div>
    84.                             <a href="#">English</a> | <a href="#">隐私政策</a> | <a href="#">使用条款</a> | 
    85.                         </div>
    86.                         <div>
    87.                             <a href="#"><img src="images/icpicon.png" width="10" height="10" alt="">沪公网安备 31010402000318号</a> | <a href="#">沪ICP备17003747号</a>
    88.                         </div>
    89.                     </footer>
    90.                 </div>
    92.             </div>
    94.             <!-- 右边内容 -->
    95.             <div class="col-lg-8 bg-light">
    96.                 <!-- 轮播图 -->
    97.                 <div class="row">
    98.                     <div class="carousel slide" id="pic" data-ride='carousel'>
    99.                         <div class="carousel-inner">
    100.                             <div class="carousel-item active">
    101.                                 <img src="images/kv1.jpg" class="img-fluid" alt="">
    102.                             </div>
    103.                             <div class="carousel-item">
    104.                                 <img src="images/kv2.jpg" class="img-fluid" alt="">
    105.                             </div>
    106.                             <div class="carousel-item">
    107.                                 <img src="images/kv3.jpg" class="img-fluid" alt="">
    108.                             </div>
    109.                             <div class="carousel-item">
    110.                                 <img src="images/kv4.jpg" class="img-fluid" alt="">
    111.                             </div>
    112.                         </div>
    113.                         <!-- 控制器 -->
    114.                         <a href="#pic" class="carousel-control-prev" data-slide='prev'>
    115.                             <span class="iconfont icon-left"></span>
    116.                         </a>
    117.                         <a href="#pic" class="carousel-control-next" data-slide='next'>
    118.                             <span class="iconfont icon-right"></span>
    119.                         </a>
    120.                         <!-- 指示器 -->
    121.                         <ul class="carousel-indicators">
    122.                             <li class="active" data-target="#pic" data-slide-to="0"></li>
    123.                             <li data-target="#pic" data-slide-to="1"></li>
    124.                             <li data-target="#pic" data-slide-to="2"></li>
    125.                             <li data-target="#pic" data-slide-to="3"></li>
    126.                         </ul>
    127.                     </div>
    128.                 </div>
    130.                 <!-- 三张图片 -->
    131.                 <div class="row py-4">
    132.                     <div class="col-sm-4 my-2 my-sm-0">
    133.                         <a href="#">
    134.                             <img src="images/img_01.jpg" class="img-fluid img-thumbnail" alt=""><!-- img-thumbnail:图片有圆角的边框 -->
    135.                         </a>
    136.                     </div>
    137.                     <div class="col-sm-4 my-2 my-sm-0">
    138.                         <a href="#">
    139.                             <img src="images/img_02.jpg" class="img-fluid img-thumbnail" alt="">
    140.                         </a>
    141.                     </div>
    142.                     <div class="col-sm-4 my-2 my-sm-0">
    143.                         <a href="#">
    144.                             <img src="images/img_03.jpg" class="img-fluid img-thumbnail" alt="">
    145.                         </a>
    146.                     </div>
    147.                 </div>
    149.                 <!-- 星享俱乐部:分为两个结构 -->
    150.                 <div class="row p-5 bg-white align-items-center text-center text-sm-left start">
    151.                     <!-- align-items-center:图片对齐 -->
    152.                     <div class="col-sm-5">
    153.                         <h2>星享俱乐部</h2>
    154.                         <p class="py-3 text-muted">开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。<a href="#">了解更多 ›</a></p>
    155.                         <div>
    156.                             <button class="btn btn-outline-success btn-lg">注册</button>
    157.                             <button class="btn btn-outline-success btn-lg">登录</button>
    158.                         </div>
    159.                     </div>
    160.                     <div class="col mt-5 mt-sm-0 text-sm-right">
    161.                         <img src="images/logo-msr-new.svg" class="img-fluid" alt="">
    162.                     </div>
    163.                 </div>
    165.                 <!-- 星巴克精选 -->
    166.                 <div class="row pb-5 betters">
    167.                     <!-- 标题 -->
    168.                     <div class="col-12 text-center">
    169.                         <h3 class="my-4 text-dark">星巴克精选</h3>
    170.                         <p class="text-muted">在星巴克天猫旗舰店发现更多咖啡心意</p>
    171.                     </div>
    173.                     <!-- 四块内容 -->
    174.                     <div class="col-12">
    175.                         <ul class="row list-unstyled justify-content-around px-5"><!-- 空间是均分的 -->
    176.                             <li class="col-6 col-md-3">
    177.                                 <a href="#" class="d-inline-block text-center px-2 bg-white rounded postion-relative">
    178.                                     <img src="images/tmall-card-01.png" class="img-fluid" alt="">
    179.                                     <h4 class="my-2 text-dark font-weight-bold">会员星礼包</h4>
    180.                                     <p class="text-muted">星享卡新升级<br>更多心意好礼</p>
    181.                                     <p class="caption">了解更多 ›</p><!-- 自己定义的class -->
    182.                                 </a>
    183.                             </li>
    184.                             <li class="col-6 col-md-3">
    185.                                 <a href="#" class="text-center px-2 bg-white rounded d-inline-block position-relative">
    186.                                     <img src="images/tmall-card-02.png" class="img-fluid" alt="">
    187.                                     <h4 class="my-2 text-dark font-weight-bold">星礼卡</h4>
    188.                                     <p class="text-muted">用一份心礼<br>让心意相随</p>
    189.                                     <p class="caption">了解更多 ›</p>
    190.                                 </a>
    191.                             </li>
    192.                             <li class="col-6 col-md-3">
    193.                                 <a href="#" class="text-center px-2 bg-white rounded d-inline-block position-relative">
    194.                                     <img src="images/tmall-card-03.png" class="img-fluid" alt="">
    195.                                     <h4 class="my-2 text-dark font-weight-bold">电子产品券</h4>
    196.                                     <p class="text-muted">心意<br>从这一杯开始</p>
    197.                                     <p class="caption">了解更多 ›</p>
    198.                                 </a>
    199.                             </li>
    200.                             <li class="col-6 col-md-3">
    201.                                 <a href="#" class="text-center px-2 bg-white rounded d-inline-block position-relative">
    202.                                     <img src="images/tmall-card-04.png" class="img-fluid" alt="">
    203.                                     <h4 class="my-2 text-dark font-weight-bold">咖啡生活</h4>
    204.                                     <p class="text-muted">星巴克<br>用心制作</p>
    205.                                     <p class="caption">了解更多 ›</p>
    206.                                 </a>
    207.                             </li>
    208.                         </ul>
    209.                     </div>
    210.                 </div>
    212.                 <!-- 咖啡星讲堂 -->
    213.                 <div class="row bg-white overflow-hidden mb-5 pb-5 teah">
    214.                     <!-- 标题 -->
    215.                     <div class="col-12 text-center">
    216.                         <h3 class="my-4 text-dark">1912 派克街 | 咖啡星讲堂</h3>
    217.                         <p class="text-muted">了解更多星巴克咖啡文化</p>    <!-- text-muted:颜色变化 -->
    218.                     </div>
    220.                     <!-- 滚动内容:无缝滚动 -->
    221.                     <div class="col-12">
    222.                         <div class="scroll pl-3">
    223.                             <ul class="list-unstyled d-flex justify-content-between">    <!-- 两端对齐 -->
    224.                                 <li class="card">
    225.                                     <a href="#"><img src="images/scroll_img_01.jpg" class="card-img-top" alt=""></a>
    226.                                     <div class="card-body">
    227.                                         <h4 class="card-title mb-0">咖啡的起源与培植</h4>
    228.                                     </div>
    229.                                     <span class="position-absolute text-white px-3 py-1">咖啡知识</span>    <!-- 需要定位 -->
    230.                                 </li>
    231.                                 <li class="card">
    232.                                     <a href="#"><img src="images/scroll_img_02.jpg" class="card-img-top" alt=""></a>
    233.                                     <div class="card-body">
    234.                                         <h4 class="card-title mb-0">咖啡品鉴</h4>
    235.                                     </div>
    236.                                     <span class="position-absolute text-white px-3 py-1">咖啡调制</span>
    237.                                 </li>
    238.                                 <li class="card">
    239.                                     <a href="#"><img src="images/scroll_img_03.jpg" class="card-img-top" alt=""></a>
    240.                                     <div class="card-body">
    241.                                         <h4 class="card-title mb-0">咖啡知识</h4>
    242.                                     </div>
    243.                                     <span class="position-absolute text-white px-3 py-1">咖啡烘焙</span>
    244.                                 </li>
    245.                                 <li class="card">
    246.                                     <a href="#"><img src="images/scroll_img_04.jpg" class="card-img-top" alt=""></a>
    247.                                     <div class="card-body">
    248.                                         <h4 class="card-title mb-0">咖啡品鉴</h4>
    249.                                     </div>
    250.                                     <span class="position-absolute text-white px-3 py-1">手冲咖啡</span>
    251.                                 </li>
    252.                             </ul>
    253.                         </div>
    254.                     </div>
    255.                 </div>
    257.             </div>
    258.         </div>
    259.     </div>
    261.     <!-- 底部菜单:不需要包在container里 -->
    262.     <footer class="fixed-bottom d-sm-none bg-white pb-2 footer">
    263.         <ul class="row d-flex list-unstyled justify-content-around mb-0"><!-- 分散居中 -->
    264.             <li class="text-center">
    265.                 <a href="#" class="text-muted active">
    266.                     <span class="iconfont icon-shouye d-block"></span>    <!-- d-block:占两行和text-center起作用 -->
    267.                     <span>首页</span>
    268.                 </a>
    269.             </li>
    270.             <li class="text-center">
    271.                 <a href="#" class="text-muted">
    272.                     <span class="iconfont icon-mendian d-block"></span>
    273.                     <span>门店</span>
    274.                 </a>
    275.             </li>
    276.             <li class="text-center">
    277.                 <a href="#" class="text-muted">
    278.                     <span class="iconfont icon-weibiaoti5 d-block"></span>
    279.                     <span>我的账户</span>
    280.                 </a>
    281.             </li>
    282.             <li class="text-center">
    283.                 <a href="#" class="text-muted">
    284.                     <span class="iconfont icon-caidan d-block"></span>
    285.                     <span>菜单</span>
    286.                 </a>
    287.             </li>
    288.             <li class="text-center">
    289.                 <a href="#" class="text-muted">
    290.                     <span class="iconfont icon-gengduo d-block"></span>
    291.                     <span>更多</span>
    292.                 </a>
    293.             </li>
    294.         </ul>
    295.     </footer>
    297.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    298.         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    299.         crossorigin="anonymous"></script>
    300.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    301.         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    302.         crossorigin="anonymous"></script>
    303.     <script>
    304.         $('#showBtn').on('click',function(){
    305.             $('.menu').removeClass('hide').addClass('show');
    306.             shadowMenu();    //注意在这和下面也要调用
    307.         });
    308.         $('#closeBtn').on('click',function(){
    309.             $('.menu').removeClass('show').addClass('hide');
    310.             shadowMenu();
    311.         });
    313.         $(window).resize(shadowMenu);//resize:当屏幕尺寸有改变的时候,调用方法
    315.         //当菜单弹出的时候，不要让body出现滚动条。当菜单消失的时候再让body出现滚动条
    316.         function shadowMenu(){
    317.             //只有当屏幕尺寸小于992，以及menu菜单是显示的状态，这时才要干掉body的滚动条
    318.             if($(window).innerWidth()<=992 && $('.menu').hasClass('show')){
    319.                 //console.log(1);
    320.                 $('body').css('overflow','hidden');
    321.             }else{
    322.                 $('body').css('overflow','auto');
    323.             }
    324.         }
    325.     </script>
    326. </body>
    328. </html>
    html {
    font-size: 62.5% !important;    /* 取默认字体的百分比 */
}
@media (min-width: 992px){
    html {
        font-size: 62.5%;
    }
}
@media (min-width: 768px){
    html {
        font-size: 59%;
    }
}
@media (min-width: 576px){
    html {
        font-size: 56%
    }
}
body{
    overflow-x: hidden;
}
a:hover{
    text-decoration: none;
}

/* 左侧内容 */
.leftCon{
    left: 0;
}
.leftCon header{
    height: 80px;
}
.leftCon header ul a{
    font-size: 1.6rem;
}
.leftCon .icon-menu{
    font-size: 3rem;
    cursor: pointer;
    color: #858585;
}

.login{
    height: calc(100vh - 80px);
}
.login .icon-kafei{
    font-size: 24px;
    color: #67a4c7;
}
.login a{
    font-size: 1.6rem;
}
.register{
    border-radius: 13px;
}
@media (max-width:991.98px){
    .leftCon{
        position: relative!important;
    }
    .login{
        height: auto;
    }
}

.menu{
    left: 0;
    top: 0;
    width:100%;
    height: 100vh;
    padding-left: 15px;
    padding-right: 15px;

    z-index: 2000;
    transition: 0.3s;
}
.menu.hide{
    opacity: 0;
    transform: scale(2);
    z-index: -1;
}
.menu.show{
    opacity: 1;
    transform: scale(1);
}

.menu .list ul a{
    font-size: 1.8rem;
}
.menu .font,.menu .font .btn{
    font-size: 1.6rem;
}
.menu footer{
    font-size: 1.4rem;
}
.menu footer,.menu footer a{
    color: rgba(0,0,0,0.38);
}
#closeBtn{
    cursor: pointer;
}

/* 右侧内容 */
#pic .icon-left,#pic .icon-right{
    font-size: 6rem;
}

.start h2{
    font-size: 2.2rem;
}
.start p{
    font-size: 1.6rem;
    line-height: 34px;
}
.start a{
    color: #C2A661;
}
.start button{
   border-radius: 13px;
}

.betters h3,.teah h3{
    font-size: 2.2rem;
}
.betters p,.teah p{
    font-size: 1.6rem;
}
.betters li{
    margin-top: 56px;
}
.betters li a{
    /* 鼠标放上去有动画效果 */
    transition: 0.2s;
    box-shadow: 0 1px 1px 1px rgba(0,0,0,0.12);
}
.betters li a img{
    width: 40%;
    margin-top: -28px;
}
.betters li a h4{
    font-size: 1.6rem;
}
.betters li a p{
    font-size: 1.4rem;
}
.betters li a p.caption{
    font-size: 1.2rem;
    color: #C2A661;
    opacity: 0.7;
}
.betters li a:hover{
    box-shadow: 0 0 4px 1px rgba(0,0,0,0.22);
    transform: translateY(-5px);
}

.teah ul{
    width: 1216px;
}
.teah li{
    width: 288px;
}
.scroll li{
    transition: 0.2s;
    box-shadow: 0 1px 1px 1px rgba(0,0,0,0.12);
}
.scroll li span{
    font-size: 1.4rem;
    background: #C2A661;
    left: 0;
    top: 6px;
}
.scroll li:hover{
    box-shadow: 0 0 1px 2px rgba(0,0,0,0.22);
    transform: translateY(-5px);
}

/* 底部 */
.footer ul{
    box-shadow: 0 0 4px rgba(0,0,0,0.12);
}
.footer a span.iconfont{
    font-size: 2.5rem;
}
.footer a.active{
    color: #00A862!important;
}