内容结构及样式
底部导航列表结构及样式
底部导航列表完善
底部版权结构及样式
细节优化

内容结构及样式

内容区域比较简单，就是横向排列的4个按钮，加一个全宽的按钮。
在<div class="section"></div> 里面插入以下代码。

                        
<ul class="products clearfix">
        <li>
            <a href="javascript:" class="item No1"></a>
        </li>
        <li>
            <a href="javascript:" class="item No2"></a>
        </li>
        <li>
            <a href="javascript:" class="item No3"></a>
        </li>
        <li>
            <a href="javascript:" class="item No4"></a>
        </li>
    </ul>
<div class="exchange">
    <a href="javascript:">AC Wall Plug Adapter Recall Program ></a>
</div>

内容区域的样式如下：

横向排列的四个按钮要注意都有一条右边框，这时候box-sizing:border-box属性就可以让边框计算在容器宽度里面，不会撑开父容器。

                        
.section {
    background: #fff
}
.section .products li {
    float: left;
    width: 25%;
}

.section .products li .item {
    display: block;
    width: 100%;
    height: 200px;
    background-repeat: no-repeat;
    background-position: center;
    border-right: 2px solid #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.section .products li .item.No1 {background-image: url('http://codeasily.net/course/img/watch_large.jpg') }
.section .products li .item.No2 {background-image: url('http://codeasily.net/course/img/ipad_pro_large.jpg') }
.section .products li .item.No3 {background-image: url('http://codeasily.net/course/img/accessories_large.jpg') }
.section .products li .item.No4 {
    background-image: url('http://codeasily.net/course/img/customer_letter_large.jpg');
    border-right: 0;
}

.section .exchange {
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
}

.section .exchange a {color: #08c; }
.section .exchange a:hover {text-decoration: underline; }

底部导航列表结构及样式

底部导航列表由5列等宽组成，每一组列表都有一个标签，第一列的HTML结构可以这么写，在<div class="footer"></div> 里面插入以下代码。：

先只加一列，这样比较好调，把第一列调好了后面直接加内容就好办了。

                        
<div class="footer-nav clearfix container">
      <div class="column">
            <h6 class="label">Shop and Learn</h6>
            <ul>
                <li><a href="javascript:">Mac</a></li>
                <li><a href="javascript:">iPad</a></li>
                <li><a href="javascript:">iPhone</a></li>
                <li><a href="javascript:">Watch</a></li>
                <li><a href="javascript:">TV</a></li>
                <li><a href="javascript:">Music</a></li>
                <li><a href="javascript:">iTunes</a></li>
                <li><a href="javascript:">iPod</a></li>
                <li><a href="javascript:">Accessories</a></li>
                <li><a href="javascript:">Gift Cards</a></li>
            </ul>
       </div>
</div>

再看看底部列表的样式如何写

                        
.footer {
    background: #f2f2f2;
    padding: 30px 20px;
    color: #999;
}

.footer a {color: #666; }
.footer .footer-nav .column {
    float: left;
    width: 20%;
}

.footer .footer-nav .column li {
    padding: 5px 0;
    font-size: 12px;
}

.footer .footer-nav .column li a:hover {text-decoration: underline; }
.footer .footer-nav .column .label {
    margin: 0;
    padding: 5px 0;
    font-weight: bold;
    color: #333;
}

底部列表完善

查看第一列没问题的话就加上剩下的几列吧。

有些列表项是同一列带有间隔的，先给需要间距的标签<h6 class="label"></h6> 加上mar-top类

                        
<div class="column">
    <h6 class="label">Apple Store</h6>
    <ul>
        <li><a href="javascript:">Find a Store</a></li>
        <li><a href="javascript:">Genius Bar</a></li>
        <li><a href="javascript:">Workshops and Learning</a></li>
        <li><a href="javascript:">Youth Programs</a></li>
        <li><a href="javascript:">Apple Store App</a></li>
        <li><a href="javascript:">Refurbished</a></li>
        <li><a href="javascript:">Financing</a></li>
        <li><a href="javascript:">Reuse and Recycling</a></li>
        <li><a href="javascript:">Order Status</a></li>
        <li><a href="javascript:">Shopping Help</a></li>
    </ul>
</div>

<div class="column">
    <h6 class="label">For Education</h6>
    <ul>
        <li><a href="javascript:">Apple and Education</a></li>
        <li><a href="javascript:">Shop for College</a></li>
    </ul>
    <h6 class="label mar-top">For Business</h6>
    <ul>
        <li><a href="javascript:">iPhone in Business</a></li>
        <li><a href="javascript:">iPad in Business</a></li>
        <li><a href="javascript:">Mac in Business</a></li>
        <li><a href="javascript:">Shop for Your Business</a></li>
    </ul>
</div>

<div class="column">
    <h6 class="label">Account</h6>
    <ul>
        <li><a href="javascript:">Manage Your Apple ID</a></li>
        <li><a href="javascript:">Apple Store Account</a></li>
        <li><a href="javascript:">iCloud.com</a></li>
    </ul>
    <h6 class="label mar-top">Apple Values</h6>
    <ul>
        <li><a href="javascript:">Environment</a></li>
        <li><a href="javascript:">Supplier Responsibility</a></li>
        <li><a href="javascript:">Accessibility</a></li>
        <li><a href="javascript:">Privacy</a></li>
        <li><a href="javascript:">Inclusion and Diversity</a></li>
        <li><a href="javascript:">Education</a></li>
    </ul>
</div>
<div class="column">
    <h6 class="label">About Apple</h6>
    <ul>
        <li><a href="javascript:">Apple Info</a></li>
        <li><a href="javascript:">Job Opportunities</a></li>
        <li><a href="javascript:">Press Info</a></li>
        <li><a href="javascript:">Investors</a></li>
        <li><a href="javascript:">Events</a></li>
        <li><a href="javascript:">Hot News</a></li>
        <li><a href="javascript:">Contact Apple</a></li>
    </ul>
</div>

加上 .mar-top 的样式就完成底部列表了

                        
.footer .footer-nav .column .label.mar-top {margin-top: 20px; }

底部版权结构及样式

底部版权有一行商店链接、一行版权信息及个别链接组成

                        
<p class="shoplink container">
    More ways to shop: Visit an <a href="javascript:" class="link under">Apple Store</a>, call 1-800-MY-APPLE, or <a href="javascript:" class="link under">find a reseller</a>.
</p>

<div class="legal container clearfix">
    <p class="copyright">
        Copyright © 2016 Apple Inc. All rights reserved.
    </p>
    <div class="legal-link">
        <a href="javascript:" class="under">Privacy Policy</a>
        <a href="javascript:" class="under">Terms of Use</a>
        <a href="javascript:" class="under">Sales and Refunds</a>
        <a href="javascript:" class="under">Legal</a>
        <a href="javascript:" class="under">Site Map</a>
    </div>
    <div class="locale">
        <img src="http://codeasily.net/course/img/US-logo.png" alt="">
        <a href="javascript:" class="under">United States</a>
    </div>
</div>

版权信息的链接都是下划线的hover效果，可以写一个通用的under类，

                        
a.under:hover {text-decoration: underline; }/*增加可复用的下划线hover效果。*/

底部版权的样式

                        
.footer .shoplink {
    padding: 10px 0;
    border-bottom: 1px solid #e3e3e3;
    margin-bottom: 10px;
}

.footer .legal .copyright {
    float: left;
    margin-right: 20px;
}

.footer .legal .legal-link {float: left; }
.footer .legal .legal-link a {
    display: inline-block;
    border-right: 1px solid #d6d6d6;
    padding: 0 10px;
}

.footer .legal .legal-link a:last-child {border: none; }
.footer .locale {float: right; }
.footer .locale img {float: left; }
.footer .locale a {
    vertical-align: middle;
    margin-left: 3px;
}

当你完成了本节就说明Apple.com的首页已经能看到完整的形态了，下一节将带你把Apple.com的首页改造成响应式网页，同时为你解开第二节写 .container 最主要的原因。

本节到此结束

下一节：响应式导航栏

如有疑问或建议请发送到此邮箱反馈lipten@foxmail.com

css响应式网页实战