目录
1.电脑版(screen and (min-width:1025px))
2.平板端screen and (min-winth:641px)
一：思路
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="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="images/icon-hamburger.svg"></a>
</div>
<div class="body-left">
<div class="button">
<div class="display-1">
<span>心情惬意，来杯咖啡吧 ☕</span>
</div>
<span class="span">
最低0.47元/天 解锁文章
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
