前言

继续练习响应式布局，我这次选的是星巴克的官网，进行一个页面的还原，还原程度达不到100%，不过也是可以进行一个学习过程的一个练习，细节很多，本人由于初学阶段，用了一天的时间就写了一个官网首页，兼容PC,平板，手机三个端

一、布局案例经验分享

1.踩过的坑：

1.在敲代码写页面的时候，很容易造成塌陷的问题见下图的原因，以及解决的一些的方式，

2.由于页面进行是使用媒体查询的方式，进行缩放的时候图片不能失真，所以一开始的宽度尽量给百分比，这样为了手机端的一个方便

3.敲代码的时候一定要仔细仔细再仔细，要不然出现bug，自己很难找到！

二、代码分享

涉及到的图片，这里没有上传，你们可以去官网进行下载

1.html

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>星巴克</title><link rel="stylesheet" href="./css/reset.css"><!-- PC端的 --><link rel="stylesheet" href="./css/pc.css" media="screen and (min-width:1200px)"><!-- 平板端的 --><link rel="stylesheet" href="./css/flat.css" media="screen and (min-width:800px) and (max-width:1200px)"><!-- 手机端的 --><link rel="stylesheet" href="./css/phone.css" media="screen and (max-width:800px)"><link rel="shortcut icon" href="./img/logo.png" type="image/x-icon">
</head>
<body><div class="big"><div class="left"><div class="top"><img src="./img/logo.png" alt=""><a href="">门店</a><a href="">我的账户</a><a href="">菜单</a><img src="./img/more.png" alt=""></div><div class="bottom"><p>心情惬意，来杯咖啡吧 ☕</p><img src="./img/person.png" alt=""><a href="">登录</a><a href="">注册</a></div></div><div class="right"><div class="tu"><p>广告</p></div><div class="picture"><img src="./img/1.jpg" alt=""><img src="./img/2.jpg" alt=""><img src="./img/3.jpg" alt=""></div><div class="tuwen"><div class="tuwen-left"><h3>星享俱乐部</h3><p>开启您的星享之旅，星星越多、会员等级越高、</p><p>好礼越丰富。<a href="">了解更多 ›</a></p><a class="zc" cl href="">注册</a><a class="dl" href="">登录</a></div><div class="tuwen-right"></div></div><div class="jingxuan"><h3 class="one">星巴克精选</h3><p class="one-p">在星巴克天猫旗舰店发现更多咖啡心意</p><div class="jingxuan-tu"><img src="./img/download.png" alt=""><h3>会员星礼包</h3><p>星享卡新升级</p><p>更多心意好礼</p><a href="">了解更多 ›</a></div><div class="jingxuan-tu"><img src="./img/download-1.png" alt=""><h3>会员星礼包</h3><p>星享卡新升级</p><p>更多心意好礼</p><a href="">了解更多 ›</a></div><div class="jingxuan-tu"><img src="./img/download-2.png" alt=""><h3>会员星礼包</h3><p>星享卡新升级</p><p>更多心意好礼</p><a href="">了解更多 ›</a></div><div class="jingxuan-tu"><img src="./img/download-3.png" alt=""><h3>会员星礼包</h3><p>星享卡新升级</p><p>更多心意好礼</p><a href="">了解更多 ›</a></div></div><div class="cofice"><h3>1912 派克街 | 咖啡星讲堂</h3><p class="cofice-text">了解更多星巴克咖啡文化</p><!-- <div class="huadong"><div class="cofice-tu" style="background-image: url(../img/download.jpg);"><p>咖啡知识</p><p>咖啡的起源与培养</p></div><div class="cofice-tu" style="background-image: url(../img/download-1.jpg);"><p>咖啡知识</p><p>咖啡调制</p></div><div class="cofice-tu" style="background-image: url(../img/download-2.jpg);"><p>咖啡知识</p><p>咖啡的烘焙</p></div></div> --><div class="cofice-tu" style="background-image: url(../img/download.jpg);"><p>咖啡知识</p><p>咖啡的起源与培养</p></div><div class="cofice-tu" style="background-image: url(../img/download-1.jpg);"><p>咖啡知识</p><p>咖啡调制</p></div><div class="cofice-tu" style="background-image: url(../img/download-2.jpg);"><p>咖啡知识</p><p>咖啡的烘焙</p></div><p class="beianhao">沪公网安备 31010402000257号 | 沪ICP备17003757号 </p></div></div></div></body>
</html>

2.css（分三个端）

1.pc端css

代码如下（示例）：

.big{width: 100%;overflow: hidden;
}
.big .left{position: fixed;left: 0;width: 30%;overflow: hidden;
}.big .left .top{margin-top: 10px;width: 100%;height: 40px;overflow: hidden;
}
.big .left .top img:nth-of-type(1){float: left;width: 40px;}
.big .left .top a{font-size:40px;line-height: 40px;margin-left: 20px;
}
.big .left .top img:nth-of-type(2){float: right;height: 40px;line-height: 40px;
}
.big .left .bottom{width: 100%;height: 500px;margin-top: 500px;  overflow: hidden;
}
.big .left .bottom p{font-size: 32px;text-align: center;
}
.big .left .bottom img{height: 20px;display: block;margin-left: 100px;margin-top: 30px;float: left;
}
.big .left .bottom a:nth-of-type(1){display: block;font-size: 20px;height: 20px;float: left;margin-top:30px;margin-left: 20px;color: chartreuse;
}
.big .left .bottom a:nth-of-type(2){text-align: center;display: block;width: 60px;font-size: 20px;height: 30px;float: left;line-height: 30px;margin-top: 20px;margin-left: 20px;color: chartreuse;border: 1px solid green;border-radius: 20px;
}
.big .right{width: 70%;margin-left: 30%;overflow: hidden;
}
.big .right .tu{width: 100%;height: 431px;background-image: url(../img/ad.jpg);background-size: 100% 100%;background-position: center center;
}
.big .right .tu p{width:40px;background-color: black;text-align: center;font-size: 20px;color:#fff;float: right;
}
.big .right .picture{width: 100%;height: 230px;background-color: #f7f7f7;
}
.big .right .picture img{width: 30%;height: 180px;margin-left: 2%;margin-top: 25px;
}
.big .tuwen{width: 100%;height: 249px;margin-top: 25px;overflow: hidden;
}
.tuwen .tuwen-left{width: 60%;overflow: hidden;height: 249px;float: left;
}
.tuwen .tuwen-left h3{font-size: 20px;margin-top: 70px;margin-left: 150px;
}
.tuwen .tuwen-left p{margin-left: 150px;margin-top: 10px;
}
.tuwen .tuwen-left .zc{float: left;display: block;font-size: 18px;width: 73px;height: 40px;line-height: 40px;text-align: center;border: 1px solid green;margin-left: 150px;margin-top: 15px;border-radius: 30px;
}
.tuwen .tuwen-left .dl{float: left;display: block;font-size: 18px;width: 73px;height: 40px;line-height: 40px;text-align: center;border: 1px solid green;margin-top: 15px;margin-left: 20px;border-radius: 30px;
}
.tuwen .tuwen-right{float: right;width: 40%;height: 249px;background-image: url(../img/club.png);background-size: 100% 100%}
.big .right .jingxuan{width: 100%;height: 415px;background-color: #f7f7f7;overflow: hidden;
}
.big .right .jingxuan .one{font-size:20px;text-align: center;margin-top:38px ;
}
.big .right .jingxuan .one-p{font-size:20px;text-align: center;margin-top:26px ;color: #b8b8b8;
}
.big .right .jingxuan .jingxuan-tu{width:15% ;height: 221px;background-color: white;float: left;margin-top: 50px;margin-left:8%;
}
.big .right .jingxuan .jingxuan-tu img{width: 60%;margin-left: 20%;margin-top: -20%;
}
.big .right .jingxuan .jingxuan-tu h3{text-align: center;margin-top: 27PX;}
.big .right .jingxuan .jingxuan-tu P{margin-top: 20PX;text-align: center;color: #b8b8b8;}
.big .right .jingxuan .jingxuan-tu a{display: block;margin-top: 30px;text-align: center;color: #eee9da;
}
.big .right .cofice{widows: 100%;height: 435px;overflow: hidden;
}.cofice h3{font-size:20px;text-align: center;margin-top:38px ;
}
.cofice .cofice-text{font-size:20px;text-align: center;margin-top:26px ;color: #b8b8b8;
}
.cofice .cofice-tu{float: left;width: 30%;height:40%;margin-top: 40px;background-size: 100% 80%;background-repeat: no-repeat;margin-left: 3%;}
.cofice .cofice-tu p:nth-of-type(1){width: 30%;height: 35px;background-color: #b9a565;text-align: left;line-height: 35px;margin-top: 7px;
}
.cofice .cofice-tu p:nth-of-type(2){margin-top: 110px;margin-left: 10%;
}
.cofice .beianhao{overflow: hidden;width: 100%;height: 30px;margin-top:262px;text-align: center;line-height: 30px;
}

2.平板端css

代码如下（示例）

.big{width: 100%;overflow: hidden;
}
.big .left{width: 100%;height: 182px;overflow: hidden;}.big .left .top{margin-top: 10px;width: 100%;height: 40px;overflow: hidden;
}
.big .left .top img:nth-of-type(1){float: left;width: 40px;}
.big .left .top a{font-size:40px;line-height: 40px;margin-left: 20px;
}
.big .left .top img:nth-of-type(2){float:right;height: 40px;line-height: 40px;
}
.big .left .bottom{width: 100%;overflow: hidden;
}
.big .left .bottom p{font-size: 32px;margin-top: 20px;}
.big .left .bottom img{height: 20px;display: block;margin-top: 30px;float: left;
}
.big .left .bottom a:nth-of-type(1){display: block;font-size: 20px;height: 20px;float: left;margin-top:30px;color: chartreuse;
}
.big .left .bottom a:nth-of-type(2){text-align: center;display: block;width: 60px;font-size: 20px;height: 30px;float: left;margin-left: 20px;line-height: 30px;margin-top: 20px;color: chartreuse;border: 1px solid green;border-radius: 20px;
}
.big .right{width: 100%;
}
.big .right .tu{width: 100%;height: 431px;background-image: url(../img/ad.jpg);background-size: 100% 100%;background-position: center center;
}
.big .right .tu p{width:40px;background-color: black;text-align: center;font-size: 20px;color:#fff;float: right;
}
.big .right .picture{width: 100%;height: 230px;background-color: #f7f7f7;
}
.big .right .picture img{width: 30%;height: 180px;margin-left: 2%;margin-top: 25px;
}
.tuwen{width: 100%;height: 249px;margin-top: 25px;
}
.tuwen .tuwen-left{width: 60%;overflow: hidden;height: 249px;float: left;
}
.tuwen .tuwen-left h3{font-size: 20px;margin-top: 70px;margin-left: 150px;
}
.tuwen .tuwen-left p{margin-left: 150px;margin-top: 10px;
}
.tuwen .tuwen-left .zc{float: left;display: block;font-size: 18px;width: 73px;height: 40px;line-height: 40px;text-align: center;border: 1px solid green;margin-left: 150px;margin-top: 15px;border-radius: 30px;
}
.tuwen .tuwen-left .dl{float: left;display: block;font-size: 18px;width: 73px;height: 40px;line-height: 40px;text-align: center;border: 1px solid green;margin-top: 15px;margin-left: 20px;border-radius: 30px;
}
.tuwen .tuwen-right{float: right;width: 40%;height: 249px;background-image: url(../img/club.png);background-size: 100% 100%
}
.big .right .jingxuan{width: 100%;height: 415px;background-color: #f7f7f7;overflow: hidden;
}
.big .right .jingxuan .one{font-size:20px;text-align: center;margin-top:38px ;
}
.big .right .jingxuan .one-p{font-size:20px;text-align: center;margin-top:26px ;color: #b8b8b8;
}
.big .right .jingxuan .jingxuan-tu{width:15% ;height: 221px;background-color: white;float: left;margin-top: 50px;margin-left:8%;
}
.big .right .jingxuan .jingxuan-tu img{width: 60%;margin-left: 20%;margin-top: -20%;
}
.big .right .jingxuan .jingxuan-tu h3{text-align: center;margin-top: 27PX;}
.big .right .jingxuan .jingxuan-tu P{margin-top: 20PX;text-align: center;color: #b8b8b8;}
.big .right .jingxuan .jingxuan-tu a{display: block;margin-top: 30px;text-align: center;color: #eee9da;
}
.big .right .cofice{widows: 100%;height: 435px;overflow: hidden;
}.cofice h3{font-size:20px;text-align: center;margin-top:38px ;
}
.cofice .cofice-text{font-size:20px;text-align: center;margin-top:26px ;color: #b8b8b8;
}
.cofice .cofice-tu{float: left;width: 30%;height:40%;margin-top: 40px;background-size: 100% 80%;background-repeat: no-repeat;margin-left: 3%;
}
.cofice .cofice-tu p:nth-of-type(1){width: 30%;height: 35px;background-color: #b9a565;text-align: left;line-height: 35px;margin-top: 7px;
}
.cofice .cofice-tu p:nth-of-type(2){margin-top: 110px;margin-left: 10%;
}
.cofice .beianhao{overflow: hidden;width: 100%;height: 30px;margin-top:262px;text-align: center;line-height: 30px;
}

3.手机端的css

代码如下（示例）

.big{width: 100%;overflow: hidden;
}
.big .left{width: 100%;overflow: hidden;
}.big .left .top{width: 100%;overflow: hidden;
}
.big .left .top img:nth-of-type(1){float: left;width: 40px;display: none;
}
.big .left .top a{display: none;
}
.big .left .top img:nth-of-type(2){display: none;
}
.big .left .bottom{width: 100%;overflow: hidden;
}
.big .left .bottom p{font-size: 32px;
}
.big .left .bottom img{display: none;
}
.big .left .bottom a:nth-of-type(1){display: none;
}
.big .left .bottom a:nth-of-type(2){display:none ;
}
.big .right{width: 100%;}
.big .right .tu{width: 100%;height: 431px;background-image: url(../img/ad.jpg);background-size: 100% 100%;
}
.big .right .tu p{width:40px;background-color: black;text-align: center;font-size: 20px;color:#fff;float: right;
}
.big .right .picture{width: 100%;background-color: #f7f7f7;
}
.big .right .picture img{width: 100%;height: 280px;margin-top: 10px;
}
.tuwen{width: 100%;height: 249px;margin-top: 25px;
}
.tuwen .tuwen-left{width: 100%;overflow: hidden;height: 249px;float: left;
}
.tuwen .tuwen-left h3{font-size: 20px;margin-top: 70px;margin-left: 25%;
}
.tuwen .tuwen-left p{margin-left: 25%;margin-top: 10px;
}
.tuwen .tuwen-left .zc{float: left;display: block;font-size: 18px;width: 73px;height: 40px;line-height: 40px;text-align: center;border: 1px solid green;margin-left: 25%;margin-top: 15px;border-radius: 30px;
}
.tuwen .tuwen-left .dl{float: left;display: block;font-size: 18px;width: 73px;height: 40px;line-height: 40px;text-align: center;border: 1px solid green;margin-top: 15px;margin-left: 20px;border-radius: 30px;
}
.tuwen .tuwen-right{float: right;width: 100%;height: 249px;background-image: url(../img/club.png);background-size: 100% 100%
}
.big .right .jingxuan{width: 100%;background-color: #f7f7f7;overflow: hidden;
}
.big .right .jingxuan .one{font-size:20px;text-align: center;margin-top:38px ;
}
.big .right .jingxuan .one-p{font-size:20px;text-align: center;margin-top:26px ;color: #b8b8b8;
}
.big .right .jingxuan .jingxuan-tu{width:30% ;height: 221px;background-color: white;float: left;margin-top: 50px;margin-left:13%;
}
.big .right .jingxuan .jingxuan-tu img{width: 60%;margin-left: 23%;margin-top: -20%;
}
.big .right .jingxuan .jingxuan-tu h3{text-align: center;margin-top: 27PX;}
.big .right .jingxuan .jingxuan-tu P{margin-top: 20PX;text-align: center;color: #b8b8b8;}
.big .right .jingxuan .jingxuan-tu a{display: block;margin-top: 30px;text-align: center;color: #eee9da;
}
.big .right .cofice{margin-top: 30px;widows: 100%;height: 435px;overflow: hidden;
}.cofice h3{font-size:20px;text-align: center;margin-top:38px ;
}
.cofice .cofice-text{font-size:20px;text-align: center;margin-top:26px ;color: #b8b8b8;
}
.cofice .cofice-tu{float: left;width: 30%;height:40%;margin-top: 40px;background-size: 100% 80%;background-repeat: no-repeat;margin-left: 3%;}
.cofice .cofice-tu p:nth-of-type(1){width: 34%;height: 35px;background-color: #b9a565;text-align: left;line-height: 35px;margin-top: 7px;
}
.cofice .cofice-tu p:nth-of-type(2){margin-top: 110px;margin-left: 10%;
}
.cofice .beianhao{overflow: hidden;width: 100%;height: 30px;margin-top:262px;text-align: center;line-height: 30px;
}

三，界面成果展示

总结

在敲代码的时候，有过累，有过难过，但是看看窗外的车串流不息，如果不学习，这么以后给你爱的人想要的生活呢，生活很哭，但我们要笑着面对。

html，css响应式布局案例练习--星巴克官网demo相关推荐

CSS——响应式布局案例以及点击出现下拉框实现过程
文章目录前言一.示例图二.实现过程 1.HTML结构 2.CSS样式 3.JS行为总结前言本文主要介绍有关响应式布局的案例实现过程. 一.示例图二.实现过程 1.HTML 代码如下(示例 ...
css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
CSS - 响应式布局（二）响应式栅格系统
目录响应式栅格系统栅格栅格系统响应式栅格系统 BootStrap响应式栅格系统简单说明利用SCSS实现BootStrap的响应式栅格系统响应式栅格系统栅格在弄清楚响应式栅格系统前,我 ...
CSS响应式布局（自适应布局）
CSS 响应式布局也称自适应布局,是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念,简单来讲就是一个网站能够兼容多个不同的终端(设备),而不是为每个终端做一个特定的版本.这个 ...
java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...
footstrap实现星巴克官网
footstrap实现响应式星巴克官网文章目录 footstrap实现响应式星巴克官网前言一.footstrap是什么? 二.星巴克官网案例实现 1.使用技术 2.读入数据 3.页面效果总结 ...
星巴克登录老显示服务器,星巴克官网登录不了是咋回事?可能跟这些“原因”有关...
喝咖啡就去星巴克,这是消费者的共识.而在星巴克喝咖啡,除了可以享受到美味的产品外,还可以享受到积分的累积和星享卡的优惠,对于消费者来说,星巴克就像是一个好伙伴.不论是查看品牌信息,还是想要去绑定自己的 ...
html5响应式布案例,HTML5响应式布局案例
在本案例中,网页的界面布局将会根据当前浏览器的大小进行变化,做出响应.主要使用CSS的@media来进行设计.实现效果类似一淘网,一淘网使用的就是响应式布局.案例代码如下: (1)HTML代码如下: ...
html5响应式布局案例
在本案例中,网页的界面布局将会根据当前浏览器的大小进行变化,做出响应.主要使用CSS的@media来进行设计.实现效果类似一淘网,一淘网使用的就是响应式布局.案例代码如下: (1)HTML代码如下: ...

html，css响应式布局案例练习--星巴克官网demo

前言