项目笔记一-----------------iphone官网仿制
项目目录
- iphone官网仿制
-
- 项目框架(HTML)
-
- 头标签
- Body标签
-
- 顶部广告
- 导航栏
- 选购栏
- 推荐产品
- 产品分类
- 项目效果(CSS)
-
- 重要代码
- 全部代码
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">Maca>
<a href="" class="nav-item">iPada>
<a href="" class="nav-item">iPhonea>
<a href="" class="nav-item">Watcha>
<a href="" class="nav-item">AirPodsa>
<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.cnspan>
div>
<div class="menulist">
<a href="" class="menu-item">商店a>
<a href="" class="menu-item">Maca>
<a href="" class="menu-item">iPada>
<a href="" class="menu-item">iPhonea>
<a href="" class="menu-item">Watcha>
<a href="" class="menu-item">Musica>
<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" id="iPhone12" style="background-color: #FFFFFF;">
<img src="https://store.storeimages.cdn-apple.com/8756/as-images.apple.com/is/cny-icon-tiger-202201?wid=126&hei=154&fmt=png-alpha&.v=1641951789000" class="newyearlog">
<h1 class="newyear">款款好礼 , 打开虎气风发新一年。h1>
<h1 class="newyear1">款款好礼 ,<br> 打开虎气风发新一年。h1>
h1>
<h2 class="buyiphone13">选购iPhone13、AriPods，以及各种好礼。h2>
<div class="buy-link" ">
<a href="https://www.apple.com.cn/shop/gifts/chinese-new-year " class="buy-link-text " style="padding-left: 30%; ">立即选购 >a>
div>
<img src="./image/心相通.png " class="hreat ">
div>
<div class="goods wapimage ">
div>
<div class="goods iphoen13-pro " >
<div class="goods-name ">iPhone 13 Prodiv>
<div class="goods-advantage ">强得很div>
<div class="buy-link buy-link2 ">
<a class="buy-link-text " href="https://www.apple.com.cn/iphone-12/ ">进一步了解a>
<a href="https://www.apple.com.cn/iphone-12/ ">
<div class="jiantou ">div>
a>
<a class="buy-link-text " href="https://www.apple.com.cn/shop/buy-iphone/iphone-12 ">购买a>
<a href="https://www.apple.com.cn/shop/buy-iphone/iphone-12 ">
<div class="jiantou ">div>
a>
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%;
}
}