前言

一个简单的响应式页面，非常适合网页设计，html期末大作业。

如过觉得对你有帮助请关注小编，你的支持是我更新的动力，爱你！

一、成品展示

二、代码部分

1.html+简单js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>星巴克首页</title>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
  </head>
  <body>
    <!-- 页面左边 -->
    <aside>
      <header>
        <a href="#" class="logo">
          <img src="img/logo.svg" >
        </a>
        <ul>
          <li>
            <a href="#">门店</a>
          </li>
          <li>
            <a href="#">我的账户</a>
          </li>
          <li>
            <a href="#">菜单</a>
          </li>
        </ul>
        <div class="menu" id="menu">
          <i></i>
          <i></i>
          <i></i>
        </div>
      </header>
      <div class="account">
        <div class="center">
          <p>心情惬意，来杯咖啡吧 ☕</p>
          <div class="enter">
            <a href="#" class="login">登录</a>
            <a href="#" class="resigter">注册</a>
          </div>
        </div>
      </div>
    </aside>
    <!-- banner -->
    <section>
      <div class="banner">
        <ul>
          <li>
            <a href="#">
              <img class="max-show" src="https://artwork.starbucks.com.cn/banners-homepage-banner/main_61babe13-d569-476b-8bd6-e75068943318.jpg" >
              <img class="min-show" src="https://artwork.starbucks.com.cn/banners-homepage-banner/main_7fc4f760-6926-4eeb-9304-06581dd9a737.jpg" >
            </a>
          </li>
        </ul>
      </div>
    </section>
    <!-- menu菜单 -->
    <div class="menu-box" id="menu_box">
      <header>
        <a href="#" class="logo">
          <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo.svg" >
        </a>
        <button type="button" class="close" id="close"><img src="img/2022-03-28_140315.png" ></button>
      </header>
      <main>
        <ul class="list">
          <li><a href="#">门店</a></li>
          <li><a href="#">星象俱乐部</a></li>
          <li><a href="#">菜单</a></li>
        </ul>
        <ul class="list">
          <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 class="enter">
          <a href="#" class="login">登录</a>
          <a href="#" class="resigter">注册</a>
        </div>
      </main>
      <footer>
        <a href="#">English |</a>
        <a href="#">隐私政策 |</a>
        <a href="#">使用条款</a>
      </footer>
    </div>
    <!-- 小屏底部导航 -->
    <nav class="min-nav">
      <ul>
        <li>
          <a href="#">
            <span><img src="img/bg1.svg" ></span>
            <span>主页</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span><img src="img/bg2.svg" ></span>
            <span>门店</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span><img src="img/bg2.svg" ></span>
            <span>门店</span>
          </a>
        </li>
        <li>
          <a href="#">
            <span><img src="img/bg2.svg" ></span>
            <span>门店</span>
          </a>
        </li>
        <li class="more" id="more">
          <a href="#">
            <span><img src="./img/bg3.svg" ></span>
            <span>更多</span>
          </a>
        </li>
      </ul>
    </nav>
    <!-- banner下面图片 -->
    <div class="three-img">
      <ul>
        <li><a href="#"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/tmall-2020-06-29-zh.jpg" ></a></li>
        <li><a href="#"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/tmall-2020-06-29-zh.jpg" ></a></li>
        <li><a href="#"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/tmall-2020-06-29-zh.jpg" ></a></li>
      </ul>
    </div>
    <!-- 星享俱乐部 -->
    <div class="club">
      <div class="club-content">
        <div class="club-left">
          <h4>星享俱乐部</h4>
          <p>开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。<a href="#">了解更多 ›</a></p>
          <div class="le-a">
          <a href="#">注册</a>
          <a href="#">登陆</a>
          </div>
        </div>
        <div class="club-right">
          <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/logo-msr-20210601.svg" >
        </div>
      </div>
    </div>
    <!-- 星巴克精选 -->
    <div class="sift">
      <div class="sift-content">
        <h4>星巴克精选</h4>
        <p class="p">在星巴克天猫旗舰店发现更多咖啡心意</p>
        <ul>
          <li>
            <a href="#">
              <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-card-01-update.png" alt="">
              <h5>会员星礼包</h5>
              <p>星享卡新升级<br>更多心意好礼</p>
              <span>了解更多 ›</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-card-01-update.png" alt="">
              <h5>会员星礼包</h5>
              <p>星享卡新升级<br>更多心意好礼</p>
              <span>了解更多 ›</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-card-01-update.png" alt="">
              <h5>会员星礼包</h5>
              <p>星享卡新升级<br>更多心意好礼</p>
              <span>了解更多 ›</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/homepage/tmall-card-01-update.png" alt="">
              <h5>会员星礼包</h5>
              <p>星享卡新升级<br>更多心意好礼</p>
              <span>了解更多 ›</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  <script>
     /*1. 显示菜单按钮  */
     var menuBtn = document.getElementById("menu");
     var moreBtn = document.getElementById("more");
     /*2. 关闭菜单按钮  */
     var closeBtn = document.getElementById("close");
     /* 3. 操作的菜单*/
     var menuBox = document.getElementById("menu_box");
     menuBtn.onclick = function(){
       /* 添加类名   add */
       menuBox.classList.add("show-menu")
       document.querySelector("body").style.overflowY="hidden"
     }
     moreBtn.onclick = function(){
       /* 添加类名   add */
      menuBox.classList.add("show-menu")
     }
     closeBtn.onclick = function(){
       /* 移除类名   remove */
      menuBox.classList.remove("show-menu")
      document.querySelector("body").style.overflowY="visible"
     }
  </script>
  </body>
</html>

2.css代码

body{
  min-width: 400px;
}
/* 页面左边 */
aside{
  width: 30%;
  height: 100%;
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  box-shadow: 0 1px 2px 1px rgb(0 0 0 / 10%);
}
aside header{
  display: flex;
  align-items: center;
  padding: 25px;
  position: relative;
}
.logo{
  width: 36px;
}
aside .logo img{
  display: block;
  width: 100%;
}
aside header ul{
  display: flex;
}
aside header ul li{
  padding: 0 20px;
}
aside header ul a{
  color: #333;
  font-weight: 700;
}
aside .menu{
  position: absolute;
  right:24px;
  top:50%;
  transform: translateY(-50%);
  cursor: pointer;
}
aside .menu i{
  display: block;
  width:24px;
  height:3px;
  border-radius: 5px;
  background-color: #ccc;
}
aside .menu i:not(:last-child){
  margin-bottom: 5px;
}
aside .account{
  display: flex;
  align-items: center;
  height:calc(100% - 48px);
  background-color: #fff;
  padding:0 30px 0 80px;
  font-size: 26px;
}
.center p{
  font-weight: 700;
}
.enter{
  display: flex;
  margin-top: 50px;
}
aside .account a{
  width: calc((100% -20px )/3);
  color: #00A862;
  font-size: 18px;
}
.resigter{
  display: block;
  height: 31px;
  line-height: 31px;
  text-align: center;
  border: 1px solid #00A862;
  border-radius: 50px;
}
aside .account .login::before
{
  content:'';
  display: inline-block;
  width:28px;
  height:17px;
  background: url(https://www.starbucks.com.cn/assets/icons/icon-account.svg) no-repeat left center;
    vertical-align: middle;
    margin-right: 5px;
}
/* banner */
section{
  width:100%;
  padding-left: 30%;
  box-sizing: border-box;
}
section .banner img{
  display: block;
  width:100%;
}
section .banner img.min-show{
  display: none;
}
/* menu菜单 */
.menu-box{
  display: none;
  position: fixed;
  left:0;
  top:0;
  width:30%;
  height:100%;
  padding: 24px;
  box-sizing: border-box;
  background-color: #fff;
  opacity: 0;
  z-index: 9;
  overflow-y: auto;
}
.menu-box header{
  display: flex;
  justify-content: space-between;
}
.menu-box header .close{
  display: block;
  width:40px;
  height:40px;
  border:none;
  background:none;
  cursor: pointer;
}
.show-menu{
  display: block;
  opacity: 1;
}
.list{
  margin-left: 80px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.list li{
  margin-top: 20px;
}
.list li a{
  font-size: 18px;
  font-weight: 700;
  color: #333;
}
main .enter{
  margin-top: 20px;
  padding: 0 0 0 80px;
  box-sizing: border-box;
}
.enter a{
  width: calc((100% -20px )/3);
  color: #00A862;
  font-size: 18px;
}
main .enter .login::before{
  content:'';
  display: inline-block;
  width:28px;
  height:17px;
  background: url(https://www.starbucks.com.cn/assets/icons/icon-account.svg) no-repeat left center;
    vertical-align: middle;
    margin-right: 5px;
}
footer {
  box-sizing: border-box;
  padding: 0 0 0 80px;
  margin-top: 20px;
}
footer a{
  color: #8C8C8C;
}
footer a:hover{
  color: #333;
}
/* 小屏导航 */
.min-nav{
  display: none;
  position: fixed;
  left:0;
  bottom:0;
  width: 100%;
  border-top:1px solid #ccc;
  background-color: #fff;
  padding: 10px 0;
  z-index: 5;
}
.min-nav ul{
  display: flex;
}
.min-nav ul li a{
  display: flex;
  font-size: 12px;
  flex-direction: column;
  color: #333;
}
.min-nav ul li{
  width:20%;
  text-align: center;
}
/* banner下面图片 */
.three-img{
  width: 100%;
  background-color: #f7f7f7;
  padding-left: 30%;
  padding-top: 30px;
  padding-bottom: 30px;
  box-sizing: border-box;
}
.three-img ul{
  display: flex;
  padding: 0 20px ;
  box-sizing: border-box;
}
.three-img li{
  width: calc((100% - 20px )/3);
  margin-left: 20px;
}
.three-img li:first-child{
  margin-left: 0;
}
.three-img li:hover img{
  transform: translateY(-5px);
  box-shadow: 0 1px 5px 1px rgb(0 0 0 / 20%);
}
.three-img img{
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 1px 1px 1px rgb(0 0 0 / 12%);
  transition: all 0.2s;
}
/* 星享俱乐部 */
.club{
  width: 100%;
  padding-left: 30%;
  padding-top: 30px;
  padding-bottom: 30px;
  box-sizing: border-box;
}
.club-content{
  max-width: 768px;
  box-sizing: border-box;
  padding: 0 20px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.club-content div{
  width: calc(100% / 2);
}
.club-left{
}
.club-left h4{
  font-size: 25px;
  font-weight: 400;
}
.club-left p{
  color: #333;
  font-weight: 100;
  line-height: 35px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.club-left p a{
  color: #C2A661;
}
.le-a{
  display: flex;
}
.le-a a{
  display: block;
  width: 70px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #00A862;
  border-radius: 50px;
  color: #00A862;
  text-align: center;
  margin-left: 10px;
}
.le-a a:first-child{
  margin-left: 0;
}
.club-right{
  margin-left: 10%;
}
.club-right img{
  display: block;
  margin: 0 auto;
}
/* 星巴克精选 */
.sift{
  width: 100%;
  padding-left: 30%;
  padding-top: 40px;
  padding-bottom: 30px;
  box-sizing: border-box;
  background-color: #f7f7f7;
}
.sift-content{
  padding: 0 30px;
  box-sizing: border-box;
  margin: 0 auto;
}
.sift-content h4{
  text-align: center;
  font-size: 22px;
  font-weight: 400;
}
.sift-content .p{
  text-align: center;
  font-weight: 200;
  margin-top: 30px;
}
.sift-content ul{
  display: flex;
  max-width: 730px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}
.sift-content li{
  width: calc((100% - 60px)/ 4);
  background-color: white;
  padding:50px 0px 20px 0px ;
  margin-left: 20px;
  position: relative;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 1px 1px 1px rgb(0 0 0 / 12%);
  transition: all 0.2s;
}
.sift-content li:hover{
  transform: translateY(-5px);
  box-shadow: 0 1px 3px 1px rgb(0 0 0 / 20%);
}
.sift-content li:first-child{
  margin-left: 0;
}
.sift-content li img{
  width: 100px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -20%;
}
.sift-content li h5{
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 20px;
}
.sift-content li p{
  font-size: 14px;
  font-weight: 200;
  color: #333;
  line-height: 25px;
}
.sift-content li span{
  display: block;
  font-size: 12px;
  color: #C2A661;
  margin-top: 10px;
}
.sift-content li:hover span{
  color: #dfb73e;
}
@media screen and (max-width:1130px){
  aside{
    position: relative;
    width:100%;
    height:auto;
  }
  aside .account{
    padding:0 30px 0 30px;
  }
  .enter{
    margin: 20px;
  }
  section{
    padding-left: 0;
  }
  .menu-box{
    width:100%;
  }
  .three-img{
    padding-left: 0%;
  }
  .club{
    padding-left: 0%;
  }
  .sift{
    padding-left: 0%;
  }
}
@media screen and (max-width:640px) {
  aside header{
    display: none;
  }
  aside .account{
    padding-left:24px ;
  }
  aside .account .enter{
    display: none;
  }
  .center p{
    line-height: 80px;
  }
  section .banner img.min-show{
    display: block;
  }
  section .banner img.max-show{
    display: none ;
  }
  .min-nav{
    display: block;
  }
  .list{
    margin-left: 10px;
  }
  main .enter{
    padding: 0px;
  }
  footer{
    padding: 10px;
  }
  .three-img ul{
    display: flex;
    flex-direction: column;
  }
  .three-img li{
    width: calc(100%);
    margin-left: 0px;
    margin-top: 20px;
  }
  .three-img li:first-child{
    margin-left: 0;
    margin-top: 0px;
  }
  .three-img li:hover img{
    transform: translateY(0px);
  }
  .club{
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    box-sizing: border-box;
  }
  .club-content{
    max-width: 768px;
    box-sizing: border-box;
    padding: 0 20px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .club-content div{
    width: calc(100%);
  }
  .club-left{
    text-align: center;
  }
  .club-left h4{
    font-size: 25px;
    font-weight: 400;
  }
  .club-left p{
    color: #333;
    font-weight: 100;
    line-height: 35px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .club-left p a{
    color: #C2A661;
  }
  .le-a{
    display: flex;
    justify-content: center;
  }
  .le-a a{
    display: block;
    width: 70px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #00A862;
    border-radius: 50px;
    color: #00A862;
    text-align: center;
    margin-left: 10px;
  }
  .le-a a:first-child{
    margin-left: 0;
  }
  .club-right{
    margin-left: 0;
    margin-top: 20px;
  }
  .club-right img{
    display: block;
    margin: 0 auto;
  }
  .sift-content ul{
    flex-wrap: wrap;
  }
  .sift-content li{
    width: calc((100% - 60px)/ 2);
    margin-left: 20px;
  }
  .sift-content li:nth-child(3n),
  .sift-content li:last-child{
    margin-top: 70px;
  }
  .sift-content li:nth-child(3n),
  .sift-content li:first-child{
    margin-left: 0;
  }
  .sift-content li:hover{
    transform: translateY(0px);
    box-shadow: 0 1px 3px 1px rgb(0 0 0 / 20%);
  }
  .sift-content{
    padding: 0px;
  }
  .sift{
    padding-bottom: 100px;
  }
}

/*base.css*/
*{
  margin:0;
  padding:0;
}
body{
  color: #333;
  font-family: "微软雅黑",arial,sans-serif;
}
/*清除超链接下划线*/
a{
  text-decoration: none;
}
/*清除列表项目符号*/
ul,ol{
  list-style: none;
}
/*IE9 兼容HTML5 新标签*/
header,footer,main,nav,section,article,aside{
  display: block;
}
/*多行文本框*/
textarea{
  /*防止修改文本域的大小*/
  resize:none;
}
input,select,textarea{
  /*去掉 浏览器默认的轮廓*/
  outline: none;
  /*outline:0;  */
}
/*清除浮动  */
.clearfix:after{
  content:'';
  display: block;
  clear:both;
}
/*单行溢出省略*/
.ellipsis{  
  white-space:nowrap; /* 1.强制一行内显示文本 */ 
  overflow:hidden; /* 2.溢出部分隐藏 */
  text-overflow:ellipsis; /* 3.溢出的文字用省略号代替 */
}
/*多行溢出省略*/
.lines-ellipsis{
  overflow:hidden;
  text-overflow:ellipsis; /* 弹性伸缩盒子模型显示 */
  display:-webkit-box; /* 限制在一个块元素显示的文本的行数 */
  -webkit-line-clamp:2; /* 设置伸缩盒子对象的子元素的排列方式 */
  -webkit-box-orient:vertical;
}
/*自定义宽度*/
.w100{
  width:100%;
}
.w1200{
  width: 1200px;
}
/*浮动*/
.fl{
  float: left;
}
.fr{
  float: right;
}
/*相对定位*/
.pr{
  position: relative;
}
/*自定义边距*/
.p20{
  padding:20px;
}
.pt20{  /*pb20 pl20 pr20 */
  padding-top:20px;
}
/*自定义字体*/
.f14{
  font-size: 14px;
}
.f16{
  font-size: 16px;
}

源码

我放在个人主页的资源中咯

https://download.csdn.net/download/weixin_71170351/85610141

原网站地址

星巴克首页：https://www.starbucks.com.cn/

用HTML+CSS跟简单的js操作完成响应式星巴克首页

前言

一、成品展示

二、代码部分

1.html+简单js

2.css代码

源码

原网站地址

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

用HTML+CSS跟简单的js操作完成响应式星巴克首页

前言

一、成品展示

二、代码部分

1.html+简单js

2.css代码

源码

原网站地址

热门文章

最新文章

相关课程

相关电子书

相关实验场景