學習前端有一段時間了，一直在看書上的理論知識，而實戰項目卻很少。師兄常說，想要知道自己的實力有多少，知識掌握了多少，最好的方法就是去實踐了，實踐出真知嘛。於是決定在這個假期裏，主要是通過項目的實踐以及理論知識的輔助來提高代碼水平。首先是做幾個HTML5+CSS3靜態頁面布局的練習，查缺補漏知識點並且總結在實踐過程中遇到的一些錯誤。頁面的設計稿主要是網絡上找來了的，也嘗試自己切圖、測量位置、獲得內容的屬性等等，假裝自己真的在完成一個項目。

　　第一個頁面是從設計達人這個平臺上找來的，這個平臺的頁面設計主要也是推薦的是國外的設計還有一些網頁設計上的教程，推薦頁面都比較簡潔、大方。比起內容爆炸的中國特色頁面來說，我也是欣賞國外的設計。

　　設計稿上的頁面寬度為1550像素的，頁面主體是960像素的12欄網格布局。設計的總體寬度是遠遠超過了瀏覽器的視口寬度，因此我在設計的時候，因為是靜態頁面，也沒有使用響應式的設計，就將所有的寬高度都設置為以像素為單位的靜態尺寸了。使用div元素將寬度設置為960px，並且將margin屬性為0px auto，就能保證頁面的主體內容在瀏覽器窗口中居中，而且不用再去介意頁面的總寬度了。

　　根據這個思路，我也開始搭建頁面的框架了，分為了四大部分：header、section、main、footer。並且根據每個部分中的內容把所需要的標簽也寫上，還根據需要添加上了class屬性。接著就是每一部分一點一點完成頁面內容以及使用CSS3添加樣式了。下面看我詳細的說明。

一、Header部分

<header>                 
    <nav class="firstnav">
        <div class="headerlimit"> 
            <a href="#" class="firstnav1">Business</a>
            <a href="#" class="firstnav2">Personal</a>
            <input type="text" name="email" placeholder="&nbsp;&nbsp;Leave your email" class="inputcase1" />
            <input type="text" name="omit" palaceholder="……" class="inputcase2" />
        </div>
                        
    <nav class="secondnav"> 
        <div class="headerlimit"> 
            <img src="images/Logo.png" />
            <div class="headnav">
                <ul>
                    <li><a href="#">Buy</a></li>
                    <li><a href="#">Sell</a></li>
                    <li><a href="#">Manage</a></li>
                </ul>
            </div>
        </div>
    </nav>    
</header>

.headnav {
    width: 280px;
    padding-left: 170px;
    margin-top: -70px;
}
.headerlimit ul {
    list-style-type: none;
    padding-left: 0px;
}
.headerlimit li a{
    text-decoration: none;
    border-left: 1px solid #fff;
    border-right: 1px solid #ebebeb;
    width: 90px;
    text-align: center;
    line-height: 25px;
    color: #68676a;
    float: left;
    font-family: PTSans;
    font-size: 14px;
}

二、Banner部分

<section class="banner">
    <div class="backimg">
        <div class="bannercontent">
             <div class="bannerintr">
                 <h1>Paul makes your payments easy</h1>
                 <p>With over 1 Billion users, paypal is simply the best way to pay</p>
             </div>

             <div class="button1">
                 <a href="#">
                      <p>Check this awesome button right here</p>
                 </a>
             </div>

             <div class="button2">
                 <p>Sign up for a paypaul account today</p>
                 <button><a href="#">Click here to join</a></button>
            </div>
        </div>
    </div>
</section>

.bannercontent {
    width: 960px;
    margin: 0px auto;
    position: absolute;
    left: 10px;
    top: 25px;
}
.backimg {
    width: 1055px;
    height: 415px;
    margin-left: 195px;
    background-image: url(../images/banner.png);
    position: relative;
}

　　因為三個模塊的布局是一模一樣的，所以只要使用同一個class屬性就能保證樣式相同。圖片和文字都處理都比較簡單，沒有特別需要指出的了，因此代碼也省略了。

四、Footer部分

　　在footer部分，導航欄的部分同樣是使用無序列表的方式，要註意的是，在設置的時候發現，因為無序列表中設置了向左浮動，因此會影響後面的兩個段落在瀏覽器中的顯示，需要使用clear: both; 清除兩個段落的浮動，才能使得兩個段落在導航欄的下方。問題產生和清除浮動的部分CSS代碼如下：

.footernav li a{
    color: #fff;
    font-size: 12px;
    margin-right: 15px;
    margin-top: 35px;
    float: left;
}
.footercontent {
    width: 960px;
    margin: 0px auto;
    padding: 25px 0px;
    clear: both;
}

　　當然在根據設計稿實現這個靜態頁面的時候也會遇到一些問題，比如說要知道每個元素的大小、元素間的間距、字體的大小顏色屬性之類的很是麻煩的一個操作呢（吐槽）。當然，真正遇到的問題不是這個，而是一些自己認為應該是這個樣子的，結果在瀏覽器中顯示就會變成另一個模樣，這才是讓人頭疼的根源。因此，在實現的過程中也記錄了一些遇到的問題，嘗試找找是什麽原因以及解決的方案。

1、當文字和圖片出現在同一行，或是同一個div元素中時，瀏覽器運行的效果是在不同的行。

通過查詢了資料，給出了三種解決的方案：

①在CSS中，為div設置vertical-align: middle;的屬性。這個div是包含了圖片和文字的，使得div中的元素可以垂直居中對齊。

②當圖片為背景圖片時，將圖片使用background-img設置，並將文字的padding修改即可在同一行了。

③將圖片和文字放在兩個div中，並設置margin值即可。我使用的就是這個方法，相對於第一種方法麻煩了一些。

2、行內元素不支持上下方向上的margin和padding屬性值，修改需要使用line-height。

3、元素經常會莫名奇妙地出現一些多余的邊距，其實是瀏覽器的默認效果，需要在設置CSS樣式前，將這些效果手動清除。如無序列表ul會有多余的左邊距。

所有文件地址：

https://github.com/omocc/PracticeItem/tree/master/6.23%E5%AE%9E%E6%88%98%E7%BB%83%E4%B9%A0-1

網頁觀看地址：

http://htmlpreview.github.io/?https://github.com/omocc/PracticeItem/blob/master/6.23%E5%AE%9E%E6%88%98%E7%BB%83%E4%B9%A0-1/index.html

HTML5+CSS3靜態頁面項目-PayPaul的總結