Web：仿苹果官⽹⾸页HTML和CSS
根据官⽹⾸页仿的，效果图就不贴出来了。
HTML部分具体代码：
<!DOCTYPE html>
<html>
<head>
<title>Apple</title>
<link rel="stylesheet"type="text/css"href="css/index.css">
</head>
<body>
<div id="all">
<div id="nav">
<ul>
<li>
<a href="">
<svg enable-background="new 0 0 14 44"height="44"viewBox="0 0 14 44"width="14"xmlns="/2000/svg"><path d="m0 0h14v44h-1 4z"fill="none"/><path d="m13.0729 17.5214c-.093.0723-1.7248.9915-1.7248 3.0364 0 2.3651 2.0759 3.2017 2.1379 3.2223-.0103.0516-.3305 1.1464-1. 0948 2.2618-.6816.9812-1.3943 1.9623-2.4787 1.9623s-1.3633-.63-2.613-.63c-1.2187 0-1.6525.6507-2.644.6507s-1.6835-.9089-2.4787-2.0243c-.9192-1.3117-1.6628-3.3463-1.6628-5.2776 0-3.0984 2.014-4.7406 3.9969-4.7406 1.0535 0 1.9313.692 2.5923.692.63 0 1.6112-.7333 2.8092-.7333.4545.000 1 2.0864.0415 3.1605 1.5803zm-3.7284-2.8918c.4957-.5887.8469-1.4046.8469-2.2205 0-.1136-.0103-.2272-.031-.3202-.8056.031-1.7661.5371-2.3445 1.2084-.4544.5164-.8779 1.3323-.8779 2.1586 0 .1239.0207.2479.031.2892.0516.0103.1343.0207.2169.0207.723-.0001 1.6318-.4855 2.1586-1.1362z"f ill="#fff"/></svg>
</a>
</li>
<li>
<a href="">商店</a>
</li>
<li>
<a href="">Mac</a>
</li>
<li>
<a href="">iPad</a>
</li>
<li>
<a href="">iPhone</a>
</li>
<li>
<a href="">Watch</a>
</li>
<li>
<a href="">AirPods</a>
</li>
<li>
<a href="">家居</a>
</li>
<li>
<a href="">Apple独家</a>
</li>
<li>
<a href="">配件</a>
</li>
<li>
<a href="">技术⽀持</a>
</li>
<li>
<a href="">
<svg xmlns="/2000/svg"width="15"height="88"viewBox="0 0 15 88"><rect width="15"height="44"fill="none"/><path d="M13.98,27.3 43l-3.5-3.5a5.436,5.436,0,1,0-.778.777l3.5,3.5a.55.55,0,1,0,.778-.778ZM1.959,20.418a4.319,4.319,0,1,1,4.319,4.32A4.323,4.323,0,0,1,1.959,20.418Z"fil l="#fff"/><rect y="44"width="15"height="44"fill="none"/><path d="M13.98,71.593l-3.5-3.5a5.436,5.436,0,1,0-.778.777l3.5,3.5a.55.55,0,1,0,.778-.778ZM1. 959,64.668a4.319,4.319,0,1,1,4.319,4.32A4.323,4.323,0,0,1,1.959,64.668Z"fill="#86868b"/></svg>
</a>
</li>
<li>
<a href="">
<a href="">
<svg height="44"viewBox="0 0 13 44"width="13"xmlns="/2000/svg"><g fill="none"fi
ll-rule="evenodd"><path d="m0 44h13v-44h-13z "/><path d="m12 25.9c0 .6-.5 1.1-1.1 1.1h-8.8c-.6 0-1.1-.5-1.1-1.1v-7.9c0-.5.5-1 1.1-1h8.9c.6 0 1.1.5 1.1 1.1v7.8zm-5.5-11.9c1.2 0 2.1.9 2.3 2h-4.6c.2-1.
1 1.1-
2 2.3-2zm4.4 2h-1.1c-.2-1.7-1.6-3-3.3-3s-3.1 1.3-3.
3 3h-1.1c-1.2 0-2.1.9-2.1 2.1v7.9c0 1.1.9 2 2.1 2h8.9c1.1 0 2.1-.9 2.1-2.1v-7.9c-.1-1.1-1-2-2.2-2 z"fill="#fff"/></g></svg>
</a>
</li>
</ul>
</div>
<p id="advertise">
<a href="">⽴即选购 ></a>
</p>
<div id="contents">
<div id="content1">
<div id="content1_1">
<img src="images/logo2.jpg">
<h2>及时好礼，⼈见⼈爱</h2>
<a href="">选购好礼 ></a>
</div>
<div id="content1_2">
<img src="images/gift.jpg">
</div>
</div>
<div id="content2">
<div id="content2_1">
<h2>iPhone 13 Pro</h2>
<h3>强得很</h3>
<a href="">进⼀步了解 ></a>
<a href="">购买 ></a>
</div>
<div id="content2_2">
<img src="images/iphone13pro.jpg">
</div>
</div>
<div id="content3">苹果apple id注册
<div id="content3_1">
<h2>iPhone 13</h2>
<h3>解锁超能⼒</h3>
<a href="">进⼀步了解 ></a>
<a href="">购买 ></a>
</div>
<div id="content3_2">
<img src="images/iphone13.jpg">
</div>
</div>
<div id="content4">
<div id="content4_1">
<h3>WATCH</h3>
<h6>SERIES 7</h6>
<h4>系统升个级，就能记录单通道⼼电图。</h4>
<a href="">进⼀步了解 ></a>
<h5>
产品名称：移动⼼电图房颤提⽰软件。请仔细阅读产品说明书或者在医务⼈员的指导下购买和使⽤。<br>禁忌内容或者注意事项详见说明书。沪械⼴审（⽂）第260620-21895号
</h5>
</div>
<div id="content4_2">
<h3>AirPods</h3>
<h4>全新AirPods⽀持空间⾳频，<br>让这份礼唱响节⽇欢歌。</h4>
<a href="">进⼀步了解 ></a>
<a href="">购买 ></a>
</div>
</div>
<div id="content5">
<div id="content5_1">
<div id="content5_1">
<h1>HomePod mini</h1>
<a href="">进⼀步了解 ></a>
<a href="">购买 ></a>
</div>
<div id="content5_2">
<h1>MacBook Pro</h1>
<h4>强者的强</h4>
<a href="">进⼀步了解 ></a>
<a href="">购买 ></a>
</div>
</div>
<div id="content6">
<div id="content6_1">
<h1>iPad mini</h1>
<h4>⼩写的⼤</h4>
<a href="">进⼀步了解 ></a>
<a href="">购买 ></a>
</div>
<div id="content6_2">
<h1>AirTag</h1>
<h4>丢三落四这门绝技，要失传了。</h4> <a href="">进⼀步了解 ></a>
<a href="">购买 ></a>
</div>
</div>
</div>
<div id="footer">
<div id="lists">
<div class="list">
<ul>
<li>选购及了解</li>
<li>
<a href="">商店</a>
</li>
<li>
<a href="">Mac</a>
</li>
<li>
<a href="">iPad</a>
</li>
<li>
<a href="">iPhone</a>
</li>
<li>
<a href="">Watch</a>
</li>
<li>
<a href="">AirPods</a>
</li>
<li>
<a href="">家居</a>
</li>
<li>
<a href="">iPod touch</a>
</li>
<li>
<a href="">AirTag</a>
</li>
<li>
<a href="">配件</a>
</li>
<li>
<a href="">App Store充值卡</a>
</li>
</ul>
</ul>
</div>
<div class="list">
<ul>
<li>服务</li>
<li>
<a href="">Apple Music</a>
</li>
<li>
<a href="">iCloud</a>
</li>
<li>
<a href="">Apple Pay</a>
</li>
<li>
<a href="">Apple 播客</a>
</li>
<li>
<a href="">App Store</a>
</li>
</ul>
<ul>
<li>账户</li>
<li>
<a href="">管理你的Apple ID</a>
</li>
<li>
<a href="">Apple Store账户</a>
</li>
<li>
<a href="">iCloud</a>
</li>
</ul>
</div>
<div class="list">
<ul>
<li>Apple Store商店</li>
<li>
<a href="">查零售店</a>
</li>
<li>
<a href="">Genius Bar天才吧</a>
</li>
<li>
<a href="">Today at Apple</a>
</li>
<li>
<a href="">Apple夏令营</a>
</li>
<li>
<a href="">Apple Store App</a>
</li>
<li>
<a href="">翻新和优惠</a>
</li>
<li>
<a href="">分期付款</a>
</li>
<li>
<a href="">Apple Trade In换购计划</a> </li>
<li>
<a href="">订单状态</a>
</li>
<li>
<a href="">选购帮助</a>
<a href="">选购帮助</a>
</li>
</ul>
</div>
<div class="list">
<ul>
<li>商务应⽤</li>
<li>
<a href="">Apple与商务</a>
</li>
<li>
<a href="">商务选购</a>
</li>
</ul>
<ul>
<li>教育应⽤</li>
<li>
<a href="">Apple与教育</a>
</li>
<li>
<a href="">⾼校师⽣选购</a>
</li>
</ul>
</div>
<div class="list">
<ul>
<li>Apple价值观</li>
<li>
<a href="">辅助功能</a>
</li>
<li>
<a href="">环境责任</a>
</li>
<li>
<a href="">隐私</a>
</li>
<li>
<a href="">供应商责任</a>
</li>
</ul>
<ul>
<li>关于Apple</li>
<li>
<a href="">Newsroom</a>
</li>
<li>
<a href="">Apple管理层</a>
</li>
<li>
<a href="">⼯作机会</a>
</li>
<li>
<a href="">创造就业</a>
</li>
<li>
<a href="">商业道德与合规性</a> </li>
<li>
<a href="">活动</a>
</li>
<li>
<a href="">联系Apple</a>
</li>
</ul>
</div>
</div>
发布评论