纯css模仿苹果首页

<style>
*{margin:0;padding:0}
body{font-family: "SF Pro SC", "HanHei SC", "SF Pro Text", "Myriad Set Pro", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;}

div#adv-wrapper{width;100%;background:#444;line-height:1;height:40px;color:red;text-align:right;}
header{background:black;}

header {height:44px;text-align:center;padding:0 10px}
header li{list-style:none;display:inline-block;}
header li a{color:white;display:block;margin:0 30px;line-height:44px;text-decoration:none;}
header ul>li:first-child>a{color:black;clip:rect{1px,1px 1px 1px}}
header ul li:first-child{background-position:cover;background-size:30%;
background-repeat:no-repeat;
background-image:url(file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/01.jpg)}
main #show{width:100%;text-align:center;color:#222;font-size:2em;margin-top:60px;height:60vh}
main  #show img{max-width:100%;margin:10px  0 }

 section {margin:80px 0 0}
 section ul{overflow:hidden;text-align:center;}
 section ul li{float:left;width:25%;border-right:1px solid transparent;box-sizing:border-box;background:#fff}
section ul li img{height:150px;width:80%;padding:10px 0  }


footer {background:#eee;color:#333;margin-top:-85px;font-size:0.7em}

footer>div{margin:0 auto;padding:0 55px}
footer section p{padding:20px 0;}
footer nav{border-top:1px solid;padding-top:20px}
footer li{list-style:none}
footer a{text-decoration:none;}
footer section{clear:both}
footer nav >div li a{text-decoration:none;display:block;margin:6px 0}
footer nav >div{float:left;box-sizing:border-box;width:25%}
footer section div.copy{border-top:1px solid;padding:5px 0 0 }
footer section div.copy a{margin:0 5px;padding:0 0 0 5px}
footer section div.copy a+a{border-left:1px solid}

</style>






<div id="adv-wrapper">&lt广告&gt</div>

<header>
    <ul>
        <li class="first"><a href="#">Apple</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="#">Music</a></li>
        <li><a href="#">技术支持</a></li>
        <li><a href="#">搜索</a></li>
        <li><a href="#">购物袋</a></li>
    </ul>
</header>

<main> 

<div id="show"><h1>iPad Pro</h1>
<h5>不只能做到，<br>还能做到更好。</h5>
  <figure> <img src="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/%E6%9C%AA%E5%91%BD%E5%90%8D.PNG"/><figure>

</div>
    
    <section id="show-items">
        <ul >
        <li><div><a href="#">
        <h4>iPhone 年年焕新计划 </h4>
        <h5>每年都有一部新 iPhone，
        <br>
        并享受 AppleCare+ 全方位服务计划。
        </h5>
        <figure><img src="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/001.PNG" alt=""/></figure></a>
        </div></li>
        
        <li>
        <div><a href="#">
        <h4>Apple Watch</h4>
        <h5>每一天，都可以更好。</h5>
        
        <figure><img src="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/002.PNG" alt=""/></figure></a>
        </div></a></li>
        
        
        <li><div><a href="#">
        <h4>iNac </h4>
        <h5>目光所及，更显锋芒。</h5>
        <figure><img src="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/003.PNG" alt=""/></figure></a>
        </div></li>
        
        
        <li><div>
        <a href="#">
        <h4>夏日盛装 </h4>
        <h5>选购配件</h5>
        <figure><img src="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/004.PNG" alt=""/></figure></a>
        </div></li>       
        </ul>
    </section>
</main>


<footer>
<div>
<section><p>双镜头摄像头仅于 iPhone 7 Plus 提供。亮黑色和红色外观仅提供 128GB 及 256GB 存储容量的机型。</p></section>

<nav>
<div>
<label><h3>选购及了解</h3></label>
<ul>
                <li ><a href="/cn/mac/">Mac</a></li>
                <li ><a href="/cn/ipad/">iPad</a></li>
                <li ><a href="/cn/iphone/">iPhone</a></li>
                <li ><a href="/cn/watch/">Watch</a></li>
                <li ><a href="/cn/music/">Music</a></li>
                <li ><a href="/cn/itunes/">iTunes</a></li>
                <li ><a href="/cn/ipod/">iPod</a></li>
                <li ><a href="/cn/shop/goto/buy_accessories">配件</a></li>
                <li ><a href="/cn/itunes/gifts/">App Store 充值卡</a></li>
            </ul>
</div>

<div>
<label><h3>Apple Store 商店</h3></label>
<ul>
                <li ><a href="/cn/retail/">查找零售店</a></li>
                <li ><a href="/cn/retail/geniusbar/">Genius Bar 天才吧</a></li>
                <li ><a href="/cn/today/">Today at Apple</a></li>
                <li ><a href="/cn/retail/camp/">Apple 夏令营</a></li>
                <li ><a href="/cn/retail/fieldtrip/">Field Trip 课外活动</a></li>
                <li ><a href="#">Apple Store App</a></li>
                <li ><a href="/cn/shop/goto/special_deals">翻新和优惠</a></li>
                <li ><a href="/cn/shop/goto/ww/financing">分期付款</a></li>
                <li ><a href="/cn/shop/goto/reuse_and_recycle">重复使用和循环利用</a></li>
                <li ><a href="/cn/shop/goto/account">订单状态</a></li>
                <li ><a href="/cn/shop/goto/help">选购帮助</a></li>
            </ul>

</div>

<div>
<label><h3>账户</h3></label>

<ul >
                <li ><a href="https://appleid.apple.com/cn/">管理你的 Apple ID</a></li>
                <li ><a href="/cn/shop/goto/account">Apple Store 账户</a></li>
                <li ><a href="https://www.icloud.com">iCloud.com</a></li>
            </ul>
            
<label><h3 style="margin:15px 0 0">Apple 价值观</h3></label>

<ul >
                <li ><a href="/cn/accessibility/">辅助功能</a></li>
                <li ><a href="/cn/environment/">环境责任</a></li>
                <li ><a href="/cn/privacy/">隐私</a></li>
                <li ><a href="/cn/supplier-responsibility/">供应商责任</a></li>
            </ul>


</div>



<div>
<label><h3>关于Apple</h3></label>
<ul>
                <li ><a href="/cn/retail/">Newsroom</a></li>
                <li ><a href="/cn/retail/geniusbar/">活动</a></li>
                <li ><a href="/cn/today/">工作机会</a></li>
                <li ><a href="/cn/retail/camp/">联系 Apple</a></li>
                <li ><a href="/cn/retail/fieldtrip/">Apple 管理层</a></li>
            </ul>

</div>



<section>
<div>
<p>更多选购方式：前往 <a href="#">Apple Store 零售店</a>
，致电 400-666-8800 或查找在你附近的<a href="https://locate.apple.com/cn/zh/">授权经销商。</a></p>
</div>

<div class="copy">Copyright ? 2017 Apple Inc. 保留所有权利。

            <a class="ac-gf-footer-legal-link" href="//www.apple.com/cn/privacy/privacy-policy/">隐私政策</a>
            <a class="ac-gf-footer-legal-link" href="//www.apple.com/cn/legal/terms/site.html">使用条款</a>
            <a class="ac-gf-footer-legal-link" href="//www.apple.com/cn/shop/goto/help/sales_refunds">销售政策</a>
            <a class="ac-gf-footer-legal-link" href="//www.apple.com/cn/legal/">法律信息</a>
            <a class="ac-gf-footer-legal-link" href="//www.apple.com/cn/sitemap/">网站地图</a>
        </div>
<p>京公安网安备 11010502008968 <a href="#">京ICP备10214630</a></p>
</section>

</nav>
</div>
</footer>