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>

项目效果(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%;}
}