布局：

    1. 响应层在992px的时候，默认的网站分为左边和右边（两列）
    2. 到达992px的时候，变成一个通栏，也就是一行，
    3. 到了768的时候，还第二栏的图片才开始是一行4个后来变成了一行2个
    4. 在md（中等屏幕下576px），导航、登录注册、按钮消失，图片竖着拍（一行一张），星享俱乐部也从两列变成一列，在最下面多了一行导航

    思考可能要用到的bootstrap中的知识点：

    1. 导航栏，导航栏里面的组件（可以包含多个部分【logo、按钮、】）
    2. 轮播图组件
    3. 卡片的组件(标题文字)
    4. 我们要有放大缩小的效果，折叠菜单（面板）不具备这个功能，通过手动自己写的功能，
    5. 图片响应式，隐藏和显示（导航 ）；
    6. 左侧导航，我们在相应的尺寸下滑动的时候它是不会动得，我们在缩小的时候它的尺寸变大了（响应式）
    7. 底部菜单也是固定的定位，放在了页面的最底部，会和我的滚动条滚动
    8. 页面当中的滚动条图标，

    构思完成开始编写：
    首先，引入bootstrap中的4.x的版本的css基础库，jQuery的引入和bootstrap中的主体的基础库（popper没有用到就没有引入），iconfont的引入，index.css我们自己手动写的bootstrap以外的css
    OK~Action！！！
    然后，页面是通栏的100%，.container-fulid，然后给一个行，里面有两列（左边 || 右边）；左边、右边的列这个时候要给上一个响应层，lg下通栏，这时候我们在lg以上的时候，我们的左边是一个固定定位（.position-fixed，给完之后脱离文档流了，在我们不满足lg的时候，我们要使他们满屏，左侧所占的空间，到时候右侧就会顶上去，所以这是一个坑。解决方案：既然脱离文档流了，右侧就跑到了左侧，我的父级是一个row，目前来说是一个父级弹性盒模型，就可以决定子元素对齐的方法了，justify-content-end[让我的子元素右边排列，这时候我的左侧已经过去了，其实我选中的范围就是一个右侧的范围，这时候我们的右侧已经到了右边，我让我们的左侧脱离文档流就了到左边。单独设置leftCon（left：0）；这时候这两列就OK了；当小于lg的时候，就需要满屏处理，然后这时候它俩又叠在了一起，因为还是固定定位脱离文档流，又被右侧顶上去了，解决方案：通过我们的媒体查询解决；我们就要让左侧不是一个固定定位，然后就是position-fixed没有给定位，提供响应式，所以只能在媒体查询中，去实现它，让它的定位变成relative ！important）；
    左边：三块内容（
    a. 导航(.navbar :可以放多个组件；(1)a标签logo区域 .nav-brand; > img;(2)真正的导航ul.nav>li.nav-item>a.nav-link ;(3)按钮button；自定义图标，span.iconfont icon-menu;这时候要定义一个id就是要通过它进行一个showBtn的内容功能；)
    b. 标题、登录、注册（需要单独来一个div，把里面的内容放在一个div中，里面有两块东西是需要放在一个div当中的，因为它们要有间距，它们并没有和上面的logo对齐，我们可以通过父级统一的定义它们俩；（1）标题汉字；h1>span图标（2）登录注册；div响应式出现和隐藏，>a>span图标）
    c. 在导航栏中最后有一个btn按钮，点击之后会有一个内容的展现。内容：有一个导航、登录注册、底部；（还是需要一个div放在一个层当中(1)用header.navbar>a.navbar-brand+span关闭按钮 (2)div.list >ul>li>a div{两个按钮登录和注册} (3)footer>div>a ）
    d. 设计这个主体的功能了，点击导航栏中的菜单按钮之后那个内容显示出来，显示出来之后要盖上所有的导航内容的，目前来说，这里有一个功能，当我们的有两列同时有内容的时候，当我去点击那个内容展示区中的关闭按钮，左侧区域出来了，右侧内容还在，但当我缩小屏幕的时候它会变成一个响应式，就是把右侧内容也盖住了，其实右侧是有内容的，这时候我们根据父级元素，我们也是盖上了，但是出现了一个问题，就是这个右侧内容没有盖上，右侧显示出来了。解决方案：增加层级；我们开始的菜单内容展示区就是一个hide区，实现点击菜单按钮就是切换hide和show的模式，单独定义两个class，分别是hide和show的状态，我们点击的时候我们把它们身上的class进行一个切换就可以实现效果了，同时它们身上还有一个过渡效果，我们通过transition实现它；然后再定义这两个hide和show的模式的class（opacity || transform：scale（值））；当我们这个菜单内容展示框出来的饿时候，我们的主体body不要它发生滚动了，当它消失的时候，再发生滚动；这时候就需要手动我们的js【我们需要满足：通栏小于lg；判断用户的尺寸，还有就是我的通栏之后我的菜单内容是显示的内容；】）

    右边：右边内容是一个列，每一块内容，又是一个行栅格系统在一个列当中，可以分12个列；所以每一块内容都是需要放在了一个行当中。
    （1）轮播图；(div.carousel .slide( 变成不是立马就切换的，让它变成滑动 ) #pic(为了让我们的小方条，以及左右箭头点击操作的时候，要找到对应的层需要找到一个id相结合。) data-ride=’carousel’ 轮播图最父级> 1. 图片文本类div.carousel-inner>文字、图片都可以div.carousel-item>响应式 img.img-fluid ，目前为止轮播图最基础的内容和功能就已经OK了。2. 左右按钮控制器；a#pic.carousel-control-prev>span图标 + a#pic.carousel-control-next>span图标 3.指示器；ul.carousel-indicators>li data-target=’#pic’ data-slide-to=’0’)
    （2）三张响应式图片；(div>col-sm-4>a>img.img-fluid ,img-thumbnail图片圆角边框)
    （3）星响俱乐部两列；（1. div.col-sm-5>( h2 +( p>a ) + div>button.btn .btn-outline-success 2.div.col>img.img-fluid）
    （4）星巴克精选:上下两个部分；（1. div.row>( div.col-12>h3 ) + div.col-12>ul>li>a>( img + h4 + p{
    } )）
    （5）咖啡新讲堂（和星巴克精选差不多）；（1. div.col-12>( h3 + p ) 2.div.col-12>div.scroll>ul>li.card>( a>img.card-img-top + div.card-body>h4 + span)）

    底部：footer.fixed-bottom>ul.row.d-flex.list-unstyle>li.text-content>a.text-muted>( span图标 + span )

    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="">
    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.                     <div class="col-sm-5">
    152.                         <h2>星享俱乐部</h2>
    153.                         <p class="py-3 text-muted">开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。<a href="#">了解更多 ›</a></p>
    154.                         <div>
    155.                             <button class="btn btn-outline-success btn-lg">注册</button>
    156.                             <button class="btn btn-outline-success btn-lg">登录</button>
    157.                         </div>
    158.                     </div>
    159.                     <div class="col mt-5 mt-sm-0 text-sm-right">
    160.                         <img src="images/logo-msr-new.svg" class="img-fluid" alt="">
    161.                     </div>
    162.                 </div>
    164.                 <!-- 星巴克精选 -->
    165.                 <div class="row pb-5 betters">
    166.                     <!-- 标题 -->
    167.                     <div class="col-12 text-center">
    168.                         <h3 class="my-4 text-dark">星巴克精选</h3>
    169.                         <p class="text-muted">在星巴克天猫旗舰店发现更多咖啡心意</p>
    170.                     </div>
    172.                     <!-- 四块内容 -->
    173.                     <div class="col-12">
    174.                         <ul class="row list-unstyled justify-content-around px-5">
    175.                             <li class="col-6 col-md-3">
    176.                                 <a href="#" class="d-inline-block text-center px-2 bg-white rounded postion-relative">
    177.                                     <img src="images/tmall-card-01.png" class="img-fluid" alt="">
    178.                                     <h4 class="my-2 text-dark font-weight-bold">会员星礼包</h4>
    179.                                     <p class="text-muted">星享卡新升级<br>更多心意好礼</p>
    180.                                     <p class="caption">了解更多 ›</p>
    181.                                 </a>
    182.                             </li>
    183.                             <li class="col-6 col-md-3">
    184.                                 <a href="#" class="text-center px-2 bg-white rounded d-inline-block position-relative">
    185.                                     <img src="images/tmall-card-02.png" class="img-fluid" alt="">
    186.                                     <h4 class="my-2 text-dark font-weight-bold">星礼卡</h4>
    187.                                     <p class="text-muted">用一份心礼<br>让心意相随</p>
    188.                                     <p class="caption">了解更多 ›</p>
    189.                                 </a>
    190.                             </li>
    191.                             <li class="col-6 col-md-3">
    192.                                 <a href="#" class="text-center px-2 bg-white rounded d-inline-block position-relative">
    193.                                     <img src="images/tmall-card-03.png" class="img-fluid" alt="">
    194.                                     <h4 class="my-2 text-dark font-weight-bold">电子产品券</h4>
    195.                                     <p class="text-muted">心意<br>从这一杯开始</p>
    196.                                     <p class="caption">了解更多 ›</p>
    197.                                 </a>
    198.                             </li>
    199.                             <li class="col-6 col-md-3">
    200.                                 <a href="#" class="text-center px-2 bg-white rounded d-inline-block position-relative">
    201.                                     <img src="images/tmall-card-04.png" class="img-fluid" alt="">
    202.                                     <h4 class="my-2 text-dark font-weight-bold">咖啡生活</h4>
    203.                                     <p class="text-muted">星巴克<br>用心制作</p>
    204.                                     <p class="caption">了解更多 ›</p>
    205.                                 </a>
    206.                             </li>
    207.                         </ul>
    208.                     </div>
    209.                 </div>
    211.                 <!-- 咖啡星讲堂 -->
    212.                 <div class="row bg-white overflow-hidden mb-5 pb-5 teah">
    213.                     <!-- 标题 -->
    214.                     <div class="col-12 text-center">
    215.                         <h3 class="my-4 text-dark">1912 派克街 | 咖啡星讲堂</h3>
    216.                         <p class="text-muted">了解更多星巴克咖啡文化</p>
    217.                     </div>
    219.                     <!-- 滚动内容 -->
    220.                     <div class="col-12">
    221.                         <div class="scroll pl-3">
    222.                             <ul class="list-unstyled d-flex justify-content-between">
    223.                                 <li class="card">
    224.                                     <a href="#"><img src="images/scroll_img_01.jpg" class="card-img-top" alt=""></a>
    225.                                     <div class="card-body">
    226.                                         <h4 class="card-title mb-0">咖啡的起源与培植</h4>
    227.                                     </div>
    228.                                     <span class="position-absolute text-white px-3 py-1">咖啡知识</span>
    229.                                 </li>
    230.                                 <li class="card">
    231.                                     <a href="#"><img src="images/scroll_img_02.jpg" class="card-img-top" alt=""></a>
    232.                                     <div class="card-body">
    233.                                         <h4 class="card-title mb-0">咖啡品鉴</h4>
    234.                                     </div>
    235.                                     <span class="position-absolute text-white px-3 py-1">咖啡调制</span>
    236.                                 </li>
    237.                                 <li class="card">
    238.                                     <a href="#"><img src="images/scroll_img_03.jpg" class="card-img-top" alt=""></a>
    239.                                     <div class="card-body">
    240.                                         <h4 class="card-title mb-0">咖啡知识</h4>
    241.                                     </div>
    242.                                     <span class="position-absolute text-white px-3 py-1">咖啡烘焙</span>
    243.                                 </li>
    244.                                 <li class="card">
    245.                                     <a href="#"><img src="images/scroll_img_04.jpg" class="card-img-top" alt=""></a>
    246.                                     <div class="card-body">
    247.                                         <h4 class="card-title mb-0">咖啡品鉴</h4>
    248.                                     </div>
    249.                                     <span class="position-absolute text-white px-3 py-1">手冲咖啡</span>
    250.                                 </li>
    251.                             </ul>
    252.                         </div>
    253.                     </div>
    254.                 </div>
    256.             </div>
    257.         </div>
    258.     </div>
    260.     <!-- 底部菜单 -->
    261.     <footer class="fixed-bottom d-sm-none bg-white pb-2 footer">
    262.         <ul class="row d-flex list-unstyled justify-content-around mb-0">
    263.             <li class="text-center">
    264.                 <a href="#" class="text-muted active">
    265.                     <span class="iconfont icon-shouye d-block"></span>
    266.                     <span>首页</span>
    267.                 </a>
    268.             </li>
    269.             <li class="text-center">
    270.                 <a href="#" class="text-muted">
    271.                     <span class="iconfont icon-mendian d-block"></span>
    272.                     <span>门店</span>
    273.                 </a>
    274.             </li>
    275.             <li class="text-center">
    276.                 <a href="#" class="text-muted">
    277.                     <span class="iconfont icon-weibiaoti5 d-block"></span>
    278.                     <span>我的账户</span>
    279.                 </a>
    280.             </li>
    281.             <li class="text-center">
    282.                 <a href="#" class="text-muted">
    283.                     <span class="iconfont icon-caidan d-block"></span>
    284.                     <span>菜单</span>
    285.                 </a>
    286.             </li>
    287.             <li class="text-center">
    288.                 <a href="#" class="text-muted">
    289.                     <span class="iconfont icon-gengduo d-block"></span>
    290.                     <span>更多</span>
    291.                 </a>
    292.             </li>
    293.         </ul>
    294.     </footer>
    296.     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    297.         integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    298.         crossorigin="anonymous"></script>
    299.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    300.         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    301.         crossorigin="anonymous"></script>
    302.     <script>
    303.         $('#showBtn').on('click',function(){
    304.             $('.menu').removeClass('hide').addClass('show');
    305.             shadowMenu();
    306.         });
    307.         $('#closeBtn').on('click',function(){
    308.             $('.menu').removeClass('show').addClass('hide');
    309.             shadowMenu();
    310.         });
    312.         $(window).resize(shadowMenu);  /* 屏幕又发生改变 */
    314.         //当菜单弹出的时候，不要让body出现滚动条。当菜单消失的时候再让body出现滚动条
    315.         function shadowMenu(){
    316.             //只有当屏幕尺寸小于992，以及menu菜单是显示的状态，这时才要干掉body的滚动条
    317.             if($(window).innerWidth()<=992 && $('.menu').hasClass('show')){
    318.                 //console.log(1);
    319.                 $('body').css('overflow','hidden');
    320.             }else{
    321.                 $('body').css('overflow','auto');
    322.             }
    323.         }
    324.     </script>
    325. </body>
    327. </html>