視訊教程觀看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015
到目前為止，我們已經完成了我們的Vedio和About頁面。現在我們需要製作contact頁面。
首先，和我們製作“About”頁面一樣。我們需要建立一個名為contact.html的新檔案。所以：檔案=》新建。刪除掉所有的內容，將編碼格式改為Unicode，然後儲存，它與index.html同級，然後命名為Contact.html。
現在，讓我們從“About”頁面複製所有程式碼，然後將其貼上我們的HTML中。
接下來，我們需要將選定的導航項更改為contact。所以，剪下，然後我將它貼上過來：
| <li><a href = "index.html">Vedio</a></li>
<li><a href = "about.html">About</a></li>
<li><a href = "contact.html" class = "selected">Contact</a></li> |
所以現在，儲存，重新整理，我來到Contact頁面。你看，Contact導航項將被選中。
但是，Contact頁面與“About”頁面完全相同，因為我們尚未對其進行任何修改。所以讓我們回到Contact頁面。類似於我們以前做的，我們將刪除section內的所有內容：
接下來，我們需要在這裡建立第二個section，我們希望頁面是一個2列的佈局：
| <section>
</section>
<section>
</section> |
現在，第一個section很簡單。我只是要新增第三級標題。然後：General Information，然後我要新增一個段落。我會說：“虛幻大學希望能夠讓每個人享受程式設計的樂趣，沒有程式設計經驗的人能夠通過學習找到工作，有程式設計經驗的人能夠通過學習全面自己的技術“。如果你有任何問題，請隨時與我聯絡。
| <section>
<h3>General Information</h3>
<p>虛幻大學希望能夠讓每個人享受程式設計的樂趣，沒有程式設計經驗的人能夠通過學習找到工作，有程式設計經驗的人能夠通過學習全面自己的技術“。如果您有任何問題，請隨時與我聯絡</p>
</section> |
現在第二個section也從h3開始。內容是：Contact Details，
然後我將建立一個無序的列表，其中包括幾種與我們聯絡的方式。在無序列表中，我將新增聯絡資訊。所以我們來建立這個無序列表。Class = “contact-info”。
| <section>
<h3>Contact Details</h3>
<ul class="contact-info"></ul>
</section> |
現在我們來填寫這個無序列表。裡面我想要三種聯絡方式，手機郵箱和Twitter。對於手機，我們class = “phone”
| <ul class="contact-info">
<li class="phone"><a href="tel:8888888">88888888</a></li>
</ul> |
你可以看到，我們用了一個不同於前使用過的連結。我們在href屬性中新增了電話專用的tel，後跟電話號碼。在智慧手機上，這將告訴瀏覽器它是一個可以撥打的電話號碼。因此，如果您在智慧手機瀏覽器上啟動此網站，您可以點選此連結，並直接撥打此電話號碼，或者，它至少會顯示一個視窗，詢問您是否要撥打此電話號碼。
接下來，我們新增電子郵件項。我將建立一個新的列表項，class = “mail”。然後建立一個anchor元素到Gmail：
| <li class="phone"><a href="tel:17090403915">17090403915</a></li>
<li class="mail"><a href="mailto:huangbangqing12@gmail.com">huangbangqing12@gmail.com</a></li> |
與電話號碼類似，我使用了關鍵字mailto。這將告訴瀏覽器這裡我要傳送郵件到這個電子郵件地址。通常這將開啟網站訪問者的計算機上的預設電子郵件客戶端;例如Outlook或Foxmail等。
最後，我們新增一個Twitter連結。Class=”Twitter”，然後，建立一個新的列表項。新增一個Google開發者的Twitter連結：
| <li class="twitter"><a href="https://twitter.com/googledevs">https://twitter.com/googledevs</a></li> |
讓我們儲存並重新整理瀏覽器，看看它是什麼樣的。
切換到Contact頁面。這是我們的兩個三級標題。這是我們新增的兩個段落。最後，這裡是無序的列表，其中包含聯絡人詳細資訊。
更多精彩內容盡在視訊中！
本文固定連結：
http://www.oxox.work/web/html-css/contact-page/ | 虛幻大學檢視原文：
http://www.oxox.work/web/html-css/contact-page/