前言
一个简单的响应式页面，非常适合网页设计，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/
