响应式布局（多媒体查询）仿苹果官网部分实例

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>Document</title><link rel="stylesheet" href="./node_modules/_@fortawesome_fontawesome-free@6.0.0@@fortawesome/fontawesome-free/css/all.css"><link rel="stylesheet" href="./index.css">
</head>
<body><!--移动端布局--><div id="top"><div><ul><li></li><li></li></ul></div><div><i class="pingguo fab fa-apple fa-xs"></i></div><div><i class="fas fa-shopping-bag fa-xs"></i></div></div><!--pc端布局--><div id="mobile"><ul><li><i class="pingguo fab fa-apple fa-xs"></i></li><li>商店</li><li>Mac</li><li>iPad</li><li>Watch</li><li>AirPods</li><li>家居</li><li>Apple独家</li><li>配件</li><li>技术支持</li><li><i class="fas fa-search fa-xs"></i></li><li> <i class="fas fa-shopping-bag fa-xs"></i></li></ul></div><div id="message"><div><a href="#">在线选购</a>，享受免费送货、Specialist 专家支持、免息分期等服务</div></div><div id="ad"><img/></div>
</body>
</html>
<!--img src="https://empic.dfcfw.com/863614397355180033/w368h744/art"/>https://pics7.baidu.com/feed/960a304e251f95ca6092129087137b34670952bb.jpeg?token=a4d104d06323329964ff727875119db2
-->

less文件：
*{padding: 0;margin: 0;a{text-decoration: none;}ul{list-style-type:none;}
}
#mobile{position: sticky;top: 0;background-color: black;padding:0 18px;ul{width: 100%;display: flex;justify-content: space-around;align-items: center;li:nth-child(1),li:nth-child(11),li:nth-child(12){line-height: 48px;font-size: 28px;i{color:white;width: 33px;display: block;height: 48px;line-height: 48px;}}li{color:white;font-size: 12px;}}}
#top{position: sticky;top: 0;background-color: black;padding:0 18px;display: flex;justify-content: space-between;align-items: center;div{height: 48px;line-height: 48px;}div:nth-child(1){width:48px;ul{display: flex;flex-direction: column;height: 48px;justify-content: center;list-style-type: none;li:nth-child(1){border-top: 1px solid white;}li{line-height: 48px;width: 15px;border-bottom: 1px solid white;padding: 3px;margin-bottom: 1px;}}}div:nth-child(2), div:nth-child(3){line-height: 48px;font-size: 28px;i{color:white;width: 33px;display: block;height: 48px;line-height: 48px;}}}#message{display: flex;align-items: center;width: 100%;background-color: #f5f5f7;font-size: 10px;height: 61.16px;text-align: center;color: #8b8b8d;div{margin: auto;padding:0 24px;}}
@media (max-width:303px){#message{width: 303px;}
}
@media (max-width:734px){#top{display: flex;}#mobile{display: none;}#ad{img{width: 100%;content: url('https://empic.dfcfw.com/863614397355180033/w368h744/art');  background-size:cover;}  }}
@media (max-width:1400px) and (min-width:735px){#top{display: none;}#mobile{display: flex;}#ad{img{width:735px;display: block;margin: auto;content: url('https://mms1.baidu.com/it/u=1127784663,1190904074&fm=253&app=120&f=JPEG&fmt=auto&q=75?w=660&h=470');  background-size:cover;}  }}

响应式布局（多媒体查询）仿苹果官网部分实例相关推荐

html，css响应式布局案例练习--星巴克官网demo
前言继续练习响应式布局,我这次选的是星巴克的官网,进行一个页面的还原,还原程度达不到100%,不过也是可以进行一个学习过程的一个练习,细节很多,本人由于初学阶段,用了一天的时间就写了一个官网首页,兼 ...
timeAxis.js--一个简单的时间轴JS框架--仿苹果官网
代码已经上传到Github,希望各位大佬指教. ReadMe还是以GitHub为准 GitHub地址:https://github.com/royalknight56/timeAxis.js 基本实现 ...
响应式机械机电英文外贸通用官网/集团企业公司工厂产品案例展示英语外贸官网
源码介绍 PbootCMS免费授权可商用不限域名高效.简洁. 强悍的可免费商用的PHPCMS源码设备支持:PC端+手机端 1.上传到自己的主机,输入域名打开,会出现授权的页面,直接到pboot ...
macbookpro 序列号查询香港苹果官网
https://checkcoverage.apple.com/hk/zh 用大陆的官网查询是否过保会出现: 维修和服务保修情况:消费者权益法可适用而香港的网站则会查询出 : 維修和服務範圍:已到期
web前端期末大作业——基于html+css+javascript+jquery+bootstarp响应式的出国旅游定制公司官网 (17页)
web前端期末大作业——简单的学生网页作业源码基于html css javascript jquery bootstarp响应式的出国旅游定制公司官网 (17页)
layui框架的响应式布局
关于layui框架响应式布局的一些使用方法写在前面的因为公司的需要,这几天学习了layui框架,稍微有一些心得.介绍就不多说,贴上官网的说明文档,目前是2.0版本,上面有很详细的介绍. 官网地址: ...
CSS3 @media媒体查询适配不同尺寸设备的响应式布局（清晰详解）
随着宽屏的不断普及,CSS3出现了@media媒体查询技术一.了解@Media 相关知识 1.了解Media Queries Media Queries能在不同的条件下使用不同的样式,使页面在不同在 ...
【源码共享】我花2小时写了微信官网的响应式布局HTML+CSS 换成旅行主题风格更炫酷了
微信官网仿写效果 ↑ 移动端响应式效果 ↑ 微信官网首页,简约干净,能学习写好这个首页,就能掌握HTML网页设计前端盒子的布局.嵌套,及css效果的使用... 微信官网首页主要有以下几个需要关注的 ...

响应式布局（多媒体查询）仿苹果官网部分实例

响应式布局（多媒体查询）仿苹果官网部分实例相关推荐

最新文章

热门文章