一：思路

1.1.大致布局

1.2.具体布局

1.电脑版(screen and (min-width:1025px))

2.平板端screen and (min-winth:641px)

二：效果图：

2.1大于641px小于1024px

2.2小于641px

三：实现

3.1:HTML

3.2:css

3.2.1:全局

3.2.2:左部

3.2.3:右部

一：思路

1.1.大致布局

星巴克的首页一共分为三种不同的媒体查询，当宽度小于641px时为手机版，大于641px小于1025px时为平板或小屏电脑版，大于1025px时为电脑版。

1.2.具体布局

1.电脑版(screen and (min-width:1025px))

电脑版网页主要分为两大部分，分为左侧可以随页面滚动的container和右侧的官网具体内容。

（1）container

包括上放的导航栏，中间的登录注册部分

（2）content具体内容

从上到下依次为：

①轮播图（无js效果，包括一个写着‘广告’的小标签，右箭头）

②三个横向排列的图片，星享俱乐部（包括登录和注册按钮，一张图片）

③星巴克精选部分（两行字，四张图片用ul排列）

④“咖啡星讲堂”（标题，介绍，ul列表）和③相同

⑤底部的备案文字

2.平板端screen and (min-winth:641px)

（1）container

平板端的网页将本在左侧的container放在网页顶部，取消了他的position：fixed，并且去掉了多余的部分。

（2）content具体内容

①②③④⑤都没有什么太大的变化，适应了一些宽度。

3.手机端screen and (max-width:641px)

手机端和电脑个版本区别较大，和平板版本类似

（1）container

除了“心情惬意，不如来杯咖啡吧”部分之外全部去掉（display：none）

（2）content具体内容

①轮播图部分换了一张更窄的图片，把原来的图片去掉

②③④⑤没什么变化

⑥新增针对手机端安排的底部导航栏，五个选项（ul列表）。最底下（position：absolute； bottom=0；）并且fixed。

二：效果图：

2.1大于641px小于1024px

2.2小于641px

三：实现

3.1:HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/index.css">
</head>
<body><!-- left --><nav id="nav"><div class="main-left"><div class="head"><a class="logo" href="#"><img src="data:images/logo.svg" alt="星巴克"></a><div class="primary"><ul><li><a href="#">门店</a></li><li><a href="#">我的帐户</a></li><li><a href="#">菜单</a></li></ul></div><a id="nav-menu" href="#"><img src="data:images/icon-hamburger.svg"></a></div><div class="body-left"><div class="button"><div class="display-1"><span>心情惬意，来杯咖啡吧&nbsp;☕</span></div><span class="span"><a class="button-a" href="#"><span>登录</span></a><a class="button-b" href="#"><span>注册</span></a></span></div></div></div></nav><!-- right --><div id="main"><div class="tag">广告</div><!-- 轮播图 --><div class="head-img"><div class="slick-slide-block"><a class="img" href="#"><img src="data:images/homepage1.jpg" alt="#"></a></div><div class="slick-slide"><a class="img" href="#"><img src="data:images/homepage2.jpg" alt="#"></a></div><div class="slick-slide"><a class="img" href="#"><img src="data:images/homepage3.jpg" alt="#"></a></div><div class="slick-slide"><a class="img" href="#"><img src="data:images/homepage4.jpg" alt="#"></a></div></div><div class="slick-slide"><a class="img" href="#"><img src="data:images/homepage5.jpg" alt="#"></a></div> <!-- two --><div class="promotion"><div class="wrapper fluid"><div class="three"><a href="#" id="home-left-campaign"><img src="https://www-static.chinacdn.starbucks.com.cn/prod/images/pages/tmall-20200326-cn.jpg" alt=""></a><a href="#" id="home-middle-campaign"><img src="data:images\starbucks-design-studio-web-china.jpg" alt=""></a><a href="#" id="home-right-campaign"><img src="data:images\homepage-career-cn.jpg" alt=""></a></div></div></div><!-- 俱乐部 --><div class="white"><div class="wrapper"><div class="grid"><div><h2 class="wrapper-mobile">星享俱乐部</h2><p class="light wrapper-mobile">开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。<aclass="link"href="#">了解更多 ›</a></p><span class="span"><a class="button-a" href="#"><span>登录</span></a><a class="button-b" href="#"><span>注册</span></a></span></div><div class="image"><imgsrc="data:images/logo-msr-new.svg"/></div></div></div></div><div class="fourth"><h2>星巴克精选</h2><p>在星巴克天猫旗舰店发现更多咖啡心意</p><ul><li><img src="./images/tmall-card-01.png" alt=""><a href="#"><p class="a">会员星礼包</p><p class="b">星享卡新升级<br>更多心意好礼</p><p class="c">了解更多 ›</p></a></li><li><img src="./images/tmall-card-02.png" alt=""><a href="#"><p class="a">星礼卡</p><p class="b">用一份心礼<br>让心意相随</p><p class="c">了解更多 ›</p></a></li><li><img src="./images/tmall-eticket.png" alt=""><a href="#" class="c1"><p class="a">电子产品券</p><p class="b">心意<br>从这一杯开始</p><p class="c">了解更多 ›</p></a></li><li><img src="./images/tmall-reserve.png" alt=""><a href="#"><p class="a">咖啡生活</p><p class="b">星巴克<br>用心制作</p><p class="c">了解更多 ›</p></a></li></ul></div><div class="bottom"><div class="foot"><h2>1912 派克街 | 咖啡星讲堂</h2><p>了解更多星巴克咖啡文化</p><ul class="ul-foot"><li><div id="div-one"></div> <strong>咖啡的起源与培植</strong></li><li><div id="div-two"></div> <strong>咖啡调制</strong></li><li><div id="div-three"></div> <strong>咖啡烘焙</strong></li><li><div id="div-fore"></div> <strong>手咖啡</strong></li></ul></div><footer class="index-footer"><div class="license"><span><ahref="#"><imgwidth="10"height="10"src="https://www-static.chinacdn.starbucks.com.cn/prod/assets/images/icpicon.png"/>&nbsp;沪公网安备 31010402000253号</a></span>|<a href="#">沪ICP备17003747号</a></div></footer></div></body>
</html>

3.2:css

由于是一个功能一个功能完成的，所以每个功能下面都有相应的条件，我感觉这样看一个个功能的条件更方便，暂时还没有把所有的媒体代码整合到一起。

3.2.1:全局

* {margin: 0;padding: 0;
}
html{font-size: 100%;
}
body {height: 100%;background: white;
}
li {list-style: none;
}a {text-decoration: none;
}

3.2.2:左部

/* nav */
#nav {background: #FFF;font-size: 62.5%;/* box-sizing: border-box; */
}@media (min-width: 1025px) {#nav {background: #FFF;bottom: 0;box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);left: 0;position: fixed;/* 生成绝对定位的元素，相对于浏览器窗口进行定位。 */top: 0;width: 30%;}
}@media (max-width: 1024px) {#nav {box-shadow: 0 0 4p向 div 元素添加阴影x rgba(0, 0, 0, 0.12);}
}#nav .main-left {height: 100%;width: 100%;/* border: 1px solid red; */
}/* head */
#nav .main-left .head {height: 48px;padding: 24px;/* border: 1px solid red; */}#nav .main-left .head .logo {float: left;margin-right: 12px;width: 36px;/* border: 1px solid red; */
}#nav .main-left .head .logo img {width: 36px;
}#nav  .main-left .head .primary{display: inline-block;
}
#nav  .main-left .head .primary ul{display: inline-block;
}
#nav  .main-left .head .primary ul li {padding: 10px;float: left;/* border: 1px solid red; */
}#nav  .main-left .head .primary ul li a{font-size: 16px;color: inherit;font-weight: 700;/* border: 1px solid red; */
}#nav  .main-left .head #nav-menu{padding: 10px;float: right;/* border: 1px solid chartreuse; */
}/* body */
@media (min-width: 1025px){#nav .main-left .body-left {height: calc(100% - 98px);display: table;width: 100%;/* border: 1px solid chartreuse; */}
}@media (min-width: 1025px){#nav .main-left .body-left .button {vertical-align: middle;padding: 0 24px 0 84px;display: table-cell;/* border: 1px solid red; */}
}
@media (max-width: 1026px){#nav .main-left .body-left .button {padding: 0 20px 0 14px;/* border: 1px solid red; */}
}#nav .main-left .body-left .button .display-1 {/* font-size: 26px; */font-size: 2.6em;font-weight: 700;margin-bottom: 24px;
}
#nav .main-left .body-left .button-a{margin-right: 15px;
}
#nav .main-left .body-left .button-a,#nav .main-left .body-left .button-b{padding: 5px 15px;border: 1px solid #00A862;border-radius: 48px;box-sizing: border-box;color: #00A862;display: inline-block;font-size: 16px;
}@media (max-width: 640px) {#nav .main-left .head ,#nav .main-left .body-left .span{display: none;}#nav .main-left .body-left .button .display-1 {padding: 10px;}
}

3.2.3:右部

/* right */@media (min-width: 1025px) {#main {left: auto;margin-left: 30%;padding-bottom: 24px;width: 70%;/* border: 1px solid red; */}
}
#main {position: relative;overflow: hidden;
}
.tag {position: absolute;top: 10px;right: 10px;padding: 0px 6px;color: #fff;background-color: #000;font-size: 1.2rem;line-height: 180%;opacity: 0.6;border-radius: 2px;z-index: 200;
}
#main .head-img{display: inline-block;/* border: 1px solid blue; */
} .slick-slide-block {display: block;/* visibility: visible; */
}
.slick-slide {display: none;
}
img {max-width: 100%;
}.promotion {/* border: 1px solid black; */padding: 24px 0;
}.wrapper.fluid {max-width: 100%;
}
@media (min-width: 1025px){.wrapper {padding-left: 24px;padding-right: 24px;}
}.wrapper {box-sizing: border-box;margin-left: auto;margin-right: auto;max-width: 768px;width: 100%;
}@media screen and (min-width: 641px){.promotion .wrapper .three> a {box-sizing: border-box;clear: none;float: left;margin: 0;padding: 12px;width: calc(100% / 3);}}.white {margin-top: 20px;clear: none;/* border: 1px solid rebeccapurple; */background-color: #FFF;
}
.white  .wrapper .grid div{width: 50%;box-sizing: border-box;float: left;
}
.white  .wrapper .grid div .light {color: rgba(0, 0, 0, 0.56);
}
.white  .wrapper .grid div .link {color: #C2A661;
}
@media (max-width: 640px){.white  .wrapper .grid .grid > * {box-sizing: border-box;float: left;width: 100%;}
}.white  .wrapper .grid .button-a{margin-right: 15px;
}
.white  .wrapper .grid  .button-a,.white  .wrapper .grid  .button-b{margin-top: 10px;margin-bottom: 10px;padding: 5px 15px;border: 1px solid #00A862;border-radius: 48px;box-sizing: border-box;color: #00A862;display: inline-block;font-size: 16px;
}
.white  .wrapper .grid .image{width: 50%;float: right;
}
.white  .wrapper .grid .image img{float: right;
}.fourth {clear: both;padding-top: 15px;background-color: #f7f7f7;margin-top: 36px;text-align: center;padding: 0 16px;
}.fourth h2 {font-weight: 400;font-size: 20px;margin: 0 0 12px;padding: 0 24px;
}.fourth p {color: rgba(0, 0, 0, 0.56);margin: 0 0 24px;padding: 0 24px;
}.fourth ul {margin: -12px;padding: 48px 0 0;overflow: hidden;
}.fourth ul li {float: left;width: 44%;overflow: hidden;margin: 0 0 48px;padding: 12px;overflow: hidden;
}.fourth ul li img {width: 48.5%;position: relative;top: 40px;margin: -36px 0 0;
}.fourth ul li a {background-color: white;display: inline-block;overflow: hidden;width: 96.5%;height: 195px;padding: 0 6px;border-radius: 3px;
}.fourth ul li .a {margin-top: 50px;color: rgba(0, 0, 0, 0.87);font-weight: 600;
}.fourth ul li .b {font-size: 14px;color: rgba(0, 0, 0, 0.56);margin: 0 0 18px;padding: 0px;
}.fourth ul li .c {font-size: 12px;color: #C2A661;
}.bottom {background-color: white;text-align: center;
}.bottom div.foot {padding: 0 16px;padding-top: 40px;
}.bottom h2 {font-size: 20px;font-weight: 400;margin: 0 0 12px;padding: 0 24px;
}.bottom p {color: rgba(0, 0, 0, 0.56);margin: 0 0 24px;padding: 0 24px;
}.bottom .ul-foot {/* border: 1px solid red; */padding: 0;overflow: hidden;
}.bottom .ul-foot li {width: 45%;/* border: 1px solid red; */float: left;margin: 12px 16px 12px 0;border-radius: 2px;background-color: #EEE;margin-left: 6px;
}.bottom .ul-foot div {width: 100%;height: 144px;background-size: 100% 144px;background-repeat: no-repeat;
}.bottom .ul-foot #div-one {background-image: url("../images/image1.jpg");
}.bottom .ul-foot li #div-two {background-image: url("../images/image2.jpg");
}.bottom .ul-foot li #div-three {background-image: url("../images/image3.jpg");
}.bottom .ul-foot li #div-fore {background-image: url("../images/image4.jpg");
}.bottom .ul-foot li strong {color: rgba(0, 0, 0, 0.87);font-weight: 400;width: 100%;line-height: 50px;
}@media (min-width: 1025px) {.promotion {height: 180px;background-color:#f7f7f7 ;/* border: 1px solid black; */padding: 24px 0;}.third {overflow: hidden;}.fourth{padding-top: 15px;clear: both;background-color: #f7f7f7;}.fourth ul li {width: calc((100% - 106px) / 4);}.bottom .foot .ul-foot li{width: calc((100% - 106px) / 4);}
}.index-footer {margin-bottom: -24px;background: #fff;}@media screen and (max-width: 640px) {.index-footer {margin-bottom: 0;}}.license {clear: both;color: #666;font-size: 14px;text-align: center;line-height: 40px;}@media screen and (max-width: 640px) {.license {font-size: 12px;}}.license a {color: #666;}.license a:hover {color: #333;}

利用媒体查询实现仿星巴克首页布局页面相关推荐

用HTML+CSS跟简单的js操作完成响应式星巴克首页
前言一个简单的响应式页面,非常适合网页设计,html期末大作业. 如过觉得对你有帮助请关注小编,你的支持是我更新的动力,爱你! 一.成品展示二.代码部分 1.html+简单js <!DOCT ...
网页设计期末作业-网上咖啡店（仿星巴克）
网页设计期末作业-网上咖啡店(仿星巴克) 如下动态图所示:(下载链接在文末) 点我下载链接
Web前端之仿携程首页布局
Web前端之仿携程首页布局 1.前言出于之前早就学习过Web的相关技术,后面很少写仿网页或者做后端等案例了,导致一些基础知识点有所遗忘,而这部分知识又是Java学习中的重中之重,因此借目前学校课程正 ...
基于媒体查询和 rem 的响应式布局实践
本文首发于 dawei.lv 媒体查询 @media 我们开发一个网站的时候希望在手机端.iPad 端.PC 端都有良好的体验,CSS 给我们提供了一个强大的条件判断语法,可以根据设备的宽度来设置不同 ...
html5响应式媒体查询,css基于媒体查询和 rem 的响应式布局实践
我们开发一个网站的时候希望在手机端.iPad 端.PC 端都有良好的体验,CSS 给我们提供了一个强大的条件判断语法,可以根据设备的宽度来设置不同的样式,从而实现不同的设备应用不同的布局. 下图展示了 ...
459~486（rem+媒体查询+Less+苏宁易购移动端首页）
1 rem基础 rem单位 rem(root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素(html)设置font-si ...
星巴克咖啡如何转型成为一家“科技公司
有的科技公司,其实是传统公司,而有的传统公司其实是科技公司--咖啡连锁品牌星巴克,就是一家藏着传统行业外表下的科技公司.如今,星巴克内部已经将网页,手机,社交媒体,网络营销,StarbucksCard ...
星巴克和阿里“结婚”，这后面真的不简单
星巴克与阿里巴巴为什么会"结婚"? 8月2日,上海,星巴克与阿里巴巴集团在宣布达成新零售全面战略合作.用星巴克CEO凯文·约翰逊(Kevin Johnson)的话来说,世界领先的高 ...
移动web开发之rem布局（rem基础、媒体查询、 less 基础、rem适配方案）
移动web开发之rem布局一.rem基础 rem单位 rem (root em)是一个相对单位,类似于em,em是父元素字体大小. 不同的是rem的基准是相对于html元素的字体大小. 比如,根元素 ...

利用媒体查询实现仿星巴克首页布局页面

一：思路

1.1.大致布局

1.2.具体布局

1.电脑版(screen and (min-width:1025px))

2.平板端screen and (min-winth:641px)

二：效果图：

2.1大于641px小于1024px

2.2小于641px

三：实现

3.1:HTML

3.2:css

3.2.1:全局

3.2.2:左部

3.2.3:右部

利用媒体查询实现仿星巴克首页布局页面相关推荐

最新文章

热门文章