iphone官网仿制

需求：在不同的设备上展现出很好的效果

项目框架(HTML)

头标签

与CSS文件链接没什么好说的

<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title></title><link rel="stylesheet" type="text/css" href="style.css" />
</head>

Body标签

顶部广告

    <div class="header"><div class="header-main"><广告></div></div>

导航栏

    <div class="nav"><div class="nav-main"><a href="" class="logo"></a><a href="" class="nav-item">商店</a><a href="" class="nav-item">Mac</a><a href="" class="nav-item">iPad</a><a href="" class="nav-item">iPhone</a><a href="" class="nav-item">Watch</a><a href="" class="nav-item">AirPods</a><a href="" class="nav-item">家居</a><a href="" class="nav-item">Apple 独家</a><a href="" class="nav-item">配件</a><a href="" class="nav-item">技术支持</a><div class="search"></div><div class="shop-bag"></div></div><div class="nav-mobile"><input type="checkbox" name="" id="menu-check" value="" style="display: none;" /><label href="" class="mobile-list" for="menu-check"><div class="line"></div><div class="line"></div></label><a href="" class="logo"></a><a href="" class="shop-bag"></a><div class="menu"><div class="searchInput"><span class="icon"></span><span type="" name="" id="" value="" class="input" />搜索 apple.com.cn</span></div><div class="menulist"><a href="" class="menu-item">商店</a><a href="" class="menu-item">Mac</a><a href="" class="menu-item">iPad</a><a href="" class="menu-item">iPhone</a><a href="" class="menu-item">Watch</a><a href="" class="menu-item">Music</a><a href="" class="menu-item">家居</a><a href="" class="menu-item">Apple 独家</a><a href="" class="menu-item">配件</a><a href="" class="menu-item">技术支持</a></div></div></div></div>

选购栏

<div class="ad"><div class="buylink"><a href="https://www.apple.com.cn/shop">在线选购</a></div><div class="ad-text">，享受免费送货、Specialist 专家支持、免息分期等服务。</div></div>

产品分类

 <div class="goods-classify "><div class="classify-content iphone "><div class="classify-item " id="promo_imac "><div class="classify-item-title "></div><div class="classify-item-content "></div><div class="classify-item-link "></div></div></div><div class="classify-content sheyin "><div class="classify-item " id="promo_watch "><div class="classify-item-title "></div><div class="classify-item-content "></div><div class="classify-item-link "></div></div></div><div class="classify-content music "><div class="classify-item " id="promo_spatial "><div class="classify-item-title "></div><div class="classify-item-content "></div><div class="classify-item-link "></div></div></div><div class="classify-content appstore "><div class="classify-item " id="promo_airtag "><div class="classify-item-title "></div><div class="classify-item-content "></div><div class="classify-item-link "></div></div></div><div class="classify-content yinsi "><div class="classify-item " id="tile_ios15 "><div class="classify-item-title "></div><div class="classify-item-content "></div><div class="classify-item-link "></div></div></div><div class="classify-content watch "><div class="classify-item " id="promo_ipados "><div class="classify-item-title "></div><div class="classify-item-content "></div><div class="classify-item-link "></div></div></div></div>

项目效果(CSS)

重要代码

@media all and (max-width:800px){
...
}

用来检测用户的分辨率以调整让某些CSS效果生效或失效

全部代码

* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;padding-top: 84px;
}/* 头部 */.header {min-width: 330px;width: 100%;background-color: #444444;position: fixed;top: 0;left: 0;z-index: 10;
}.header-main {width: 100%;max-width: 976px;height: 40px;margin: 0 auto;display: flex;flex-direction: row-reverse;align-items: center;font-size: 8px;color: #a8a8aa;
}/* 导航栏 */.nav {width: 100%;background-color: rgba(0, 0, 0, 0.8);position: fixed;top: 40px;left: 0;z-index: 10;
}.nav-main {width: 100%;max-width: 1000px;height: 44px;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;
}.nav-main a {color: #f5f5f7;font-size: 8px;font-weight: 100;text-decoration: none;opacity: 0.8;
}.nav-main a:hover {opacity: 1;color: #FFFFFF;
}.logo {width: 40px;height: 20px;background-image: url(./image/apple-fill.png);background-position: center;background-repeat: no-repeat;background-size: contain;opacity: 0.8;z-index: 10;
}.logo:hover {opacity: 1;
}.search {width: 40px;height: 20px;background-image: url(./image/serach.png);background-position: center;background-repeat: no-repeat;background-size: contain;opacity: 0.8;
}.search:hover {opacity: 1;
}.shop-bag {width: 20px;height: 20px;background-image: url(./image/shopbag.png);background-position: center;background-repeat: no-repeat;background-size: contain;opacity: 0.8;
}.shop-bag:hover {opacity: 1;
}/* 手机导航 */.nav-mobile {min-width: 330px;width: 100%;height: 44px;display: none;justify-content: space-between;align-items: center;font-size: 12px;
}.mobile-list {width: 44px;height: 44px;display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 10;
}.mobile-list .line {width: 15px;height: 1px;background-color: #FFFFFF;opacity: 0.6;transition: all 0.5s;
}.mobile-list:hover .line {opacity: 1;
}#menu-check:checked~.mobile-list .line:first-child {transform: rotate(45deg) translateY(5px);
}#menu-check:checked~.mobile-list .line:last-child {transform: rotate(-45deg) translateY(-4px);
}#menu-check:checked~.shop-bag {background: none;
}.mobile-list .line:first-child {margin-bottom: 5px;
}.menu {min-width: 330px;width: 100vw;height: 0vh;position: fixed;left: 0;top: 40px;background-color: #000000;padding: 48px 10px;display: none;flex-direction: column;align-items: center;overflow: hidden;
}.searchInput {max-width: 580px;width: 100%;height: 34px;border-radius: 8px;background-color: rgba(110, 110, 115, 0.3);padding: 0 10px;display: flex;justify-content: space-between;align-items: center;
}.searchInput .icon {width: 30px;height: 36px;background-image: url(../../image/apple/search-image.svg);background-position: top;background-repeat: no-repeat;background-size: 18px auto;background-position: 0px -44px;margin-top: -7px;
}.searchInput .input {display: inline-block;height: 30px;background-color: transparent;border: none;flex: 1;font-size: 17px;color: rgb(110, 110, 115);line-height: 30px;
}.menulist {max-width: 580px;width: 100%;display: flex;flex-direction: column;justify-content: center;padding-top: 60px;position: relative;
}.menulist::before {position: absolute;content: "快速链接";left: 0;top: 30px;color: #FFFFFF;font-size: 8px;opacity: 0.4;
}.menulist a {text-decoration: none;
}.menu-item {width: 100%;height: 44px;padding: 13px 0;font-size: 17px;color: #FFFFFF;font-weight: 400;opacity: 0.8;border-bottom: 1px solid #424245;
}.menu-item:last-child {border-bottom: none;
}#menu-check:checked~.menu {display: flex;/* 动画名:swiperdown,时间:0.6s,执行1次,停留在最后效果 */animation: swiperdown 0.6s 1 forwards;
}@keyframes swiperdown {from {height: 0;}to {height: 100vh;}
}/* 广告 */.ad {min-width: 330px;width: 100%;height: 44px;display: flex;flex-direction: row;justify-content: center;align-items: center;background-color: #00008B;font-size: 12px;background-color: rgb(245, 245, 247);
}.buylink a {text-decoration: none;color: rgb(0, 102, 204);
}.buylink:hover {text-decoration: underline;
}.ad-text {color: rgb(29, 29, 31);
}/* 商品 */.goods {min-width: 330px;width: 100%;height: 700px;background-position: center;background-repeat: no-repeat;background-size: cover;background-color: #fbfbfd;display: flex;flex-direction: column;align-items: center;margin-bottom: 10px;
}.goods-name {font-size: 53px;font-weight: bold;margin-top: 50px;
}.goods-advantage {margin-top: 6px;font-size: 25px;
}.price-introduction {font-size: 16px;margin-top: 15px;opacity: 0.6;text-align: center;
}.introduce {margin-left: calc(50% - 60px);width: 120px;margin-top: 3px;
}.newyear {font-size: 50px;margin-top: 15px;margin-bottom: 15px;letter-spacing: 2px;font-weight: 550;
}.newyear1 {display: none;font-size: 50px;margin-top: 15px;margin-bottom: 15px;letter-spacing: 2px;font-weight: 550;
}.newyearlog {margin-top: 50px;height: 100px;
}.buyiphone13 {font-weight: 400;
}.hreat {margin-top: 20px;
}.shangbiao {font-size: 8px;float: right;top: 0;left: 0;
}.buy-link {width: 220px;font-size: 20px;justify-content: space-between;
}.buy-link2 {padding-top: 30px;display: flex;
}.buy-link a {font-size: 18px;text-decoration: none;color: #0066cc;
}.buy-link .buy-link-text:hover {text-decoration: underline;
}.wapimage {height: 700px;width: 100%;background-image: url(./image/卷土重来.png);
}.jiantou {width: 10px;height: 10px;transform: translateX(-15px) translateY(8px) rotate(45deg);border-top: 2px solid #0066cc;border-right: 2px solid #0066cc;
}.iphoen13-pro {background-image: url(https://www.apple.com.cn/v/home/aj/images/heroes/iphone-13-pro/hero_iphone_13pro__dhnsegysa42u_largetall.jpg);
}#iPhone12 {background-image: url(../../image/apple/iphone_12.jpg);
}#iphone12-pro {background-image: url(../../image/apple/iphone_12_pro.jpg);background-color: #000000;color: #FFFFFF;
}#hero_ipad_pro {background-image: url(../../image/apple/hero_ipad_pro.jpg);background-color: #000000;color: #FFFFFF;
}@media all and (max-width:800px) {.nav-mobile {display: flex;}.nav-main {display: none;}.goods-name {font-size: 33px;font-weight: bold;}.newyearlog {height: 50px;}.newyear {display: none;}.newyear1 {display: block;font-size: 30px;width: 100%;word-wrap: break-word;text-align: center;height: 60px;}.buyiphone13 {font-size: 16px;width: 200px;text-align: center;}.hreat {height: 200px;}.goods-advantage {font-size: 16px;}.price-introduction {font-size: 12px;}.introduce {margin-left: calc(50% - 50px);}.shangbiao {font-size: 5px;padding-right: calc(50% - 25px);}.buy-link {width: 160px;margin-top: 10px;}.buy-link a {font-size: 14px;}.jiantou {width: 8px;height: 8px;transform: translateX(-8px) translateY(6px) rotate(45deg);border-top: 1.5px solid #0066cc;border-right: 1.5px solid #0066cc;}.wapimage {background-image: url(./image/卷土重来2.png);}.iphoen13-pro {background-image: url(https://www.apple.com.cn/v/home/aj/images/heroes/iphone-13-pro/hero_iphone_13pro__dhnsegysa42u_medium.jpg);}#iPhone12 {height: 500px;background-image: url(../../image/apple/iphone_12_2.jpg);}#iphone12-pro {height: 500px;background-image: url(../../image/apple/iphone_12_pro2.jpg);background-color: #000000;color: #FFFFFF;}#hero_ipad_pro {height: 500px;background-image: url(../../image/apple/hero_ipad_pro2.jpg);}
}/* 产品分类 */.goods-classify {min-width: 330px;width: 100%;display: flex;/* justify-content: space-evenly; */flex-wrap: wrap;overflow: hidden;
}.classify-content {width: 50%;padding: 10px;margin-bottom: 10px;display: flex;flex-direction: column;align-items: center;background-position: center;background-repeat: no-repeat;background-size: cover;
}.classify-item {width: 100%;height: 525px;background-position: center;background-repeat: no-repeat;background-size: cover;
}.iphone {background-image: url(./image/iphone.png);
}.sheyin {background-image: url(./image/摄影.png);
}.music {background-image: url(./image/music.png);
}.appstore {background-image: url(./image/Appstroe.png);
}.yinsi {background-image: url(./image/隐私保护.png);
}.watch {background-image: url(./image/watch.png);
}@media all and (max-width:1050px) {.iphone {background-image: url(./image/iphone2.png);}.sheyin {background-image: url(./image/摄影2.png);}.music {background-image: url(./image/music2.png);}.appstore {background-image: url(./image/Appstroe2.png);}.yinsi {background-image: url(./image/隐私保护2.png);}.watch {background-image: url(./image/watch2.png);}
}@media all and (max-width:645px) {.classify-content {width: 100%;}
}

项目笔记一-----------------iphone官网仿制相关推荐

Python+Selenium学习笔记5 - python官网的tutorial - 交互模式下的操作
这篇笔记主要是从Python官网的Tutorial上截取下来,再加上个人理解 1. 在交互模式下,下划线'_'还可以表示上一步的计算结果 2.引号转义问题. 从下图总结的规律是,字符串里的引号如果和引 ...
Web项目实战分享——小米官网
Web项目实战分享--小米官网大约每个学习过前端的学习者来说,都接触过web项目的实战,业内最真实的的,应该是自己独立编写一个网页项目,当然如果你是大佬的话,这只是小菜一碟,而如果你是小白或正在学习 ...
一个让我很不爽的外包项目——奔驰Smart2015新官网
七月份的下半个月,有幸做了奔驰 Smart 2015年新官网,包括手机端和PC端的宣传页,地址: PC端手机端这里,为了证明这个是一个事实,我还特意的留存了两张截图: 这里只想说明这么几个问题: ...
项目实战：小米商城官网及秒杀高仿（html+css+js）
导读:秒杀的检索结果,小米官方网站包含秒杀价格及秒杀适配机型,官方推荐秒杀产品,帮助米粉挑选合适自己的秒杀商品. 仿小米手机商城的全套页面.包含首页,订单页,列表页,商品详情页,个人中心,购物车,等等 ...
[个人笔记]EME Solver自学笔记---参照lumerical官网视频
因为课题需要学习了几天lumerical公司MODE软件中的EME Solver,参考官网视频整理了学习笔记,因为作者水平有限并且刚开始该领域的研究,所以笔记难免有遗漏或者自己理解不足的地方,做笔记的 ...
项目三《小米官网仿写》
文章目录前言一.下载APP 二.下拉菜单三. 小米侧边栏四.登录注册界面五.lation实现界面切换总结前言本次小米官网仿写复习了之前学到的知识点,运用HTML+CSS+JavaScr ...
电商项目：仿小米官网纯HTML+css布局
前言时间过得很快,已经步入大三下学期了,浪了大学这几年,这几个星期从新把之前学的html+css系统性复习了一遍,虽然之前也学习过,但Monto觉得无论任何事情,基础是最重要的,任何框架千变万变,但 ...
python项目-马哥教育官网-专业Linux培训班,Python培训机构
文是 Mybridge 挑选的 10 个 Python 开源项目,Github 平均star 2135,希望你能够喜欢~~ ▌Rank 1:Requests-HTML v0.9(7385 stars ...
vite新建vue3项目采坑，官网流程之路，vite+vue3+elementpuls
Vite 构建可以使用 Vite 快速构建 Vue 项目. vue3文档操作步骤,按照文档操作,会有版本问题: vite构建后的vite版本是老版本: "vite": " ...

项目笔记一-----------------iphone官网仿制

项目目录

iphone官网仿制

项目框架(HTML)

头标签

Body标签

顶部广告

导航栏

选购栏

推荐产品

产品分类

项目效果(CSS)

重要代码

全部代码

项目笔记一-----------------iphone官网仿制相关推荐

最新文章

热门文章