視訊教程觀看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015
首先，我們來對無序列表進行一些基本的調整。我們將刪除專案符號，然後增加填充和邊距，以及調整字型大小。
所以來到CSS中，讓我們在PAGE ABOUT下新增一個新的多行註釋PAGE CONTACT。
| /* **************************************
PAGE CONTACT
************************************** */ |
現在，我們可以新增我們的樣式。我要選擇.contact-info。List-style設定為none，padding設定為0，margin:0，最後將字型大小設定為0.9 em。
| /* **************************************
PAGE CONTACT
************************************** */
.contact-info{
list-style:none;
padding:0;
margin:0;
font-size:0.9em;
} |
所以讓我們切換回瀏覽器並觀看這個列表，看看是什麼樣的。
接下來，我將為每個列表項新增背景影像。
所以，我要選擇每個列表項，並新增img資料夾中包含的圖示。這和以前新增影像的方法略有不同，因為我們想展示給大家各種影像包含技術。
所以首先，我們需要選擇contact-info列表，然後選擇li，然後在li後面.phone。這裡沒有空格。因為phone是li的class，而不是巢狀在li列表中的元素。
最後，我們要選擇裡面的a元素。
所以，這就會選擇class為phone下面的a元素。
現在，我們輸入屬性background-image，然後我們將使用一個特殊值URL，因為我們需要新增一個URL。這個URL將是我們影像的路徑。在URL後面的括號內，我們需要新增兩個單引號來儲存URL，然後我們將鍵入兩個點，一個斜槓，img，然後是phone.png，
| .contact-info li.phone a{
background-image:url(../img/phone.png);
} |
這兩個點可以讓我們回到當前目錄的上一個目錄，這將使我們到這裡的根資料夾，然後我們可以回到img，最後找到
phone.png。這就是相對路徑。
接下來，讓我們複製並貼上，我們將貼上這兩次。所有我們需要做的是將class更改為mail和twitter，然後我們需要將影像的名稱更改為mail和twitter。
| .contact-info li.mail a{
background-image:url(../img/mail.png);
}
.contact-info li.twitter a{
background-image:url(../img/twitter.png);
} |
所以我們會儲存一下。重新整理頁面：
您可以看到這裡有一些灰色的方塊，實際上，他們應該是在文字左邊，所以。我們需要在這裡新增一些間距。所以我們再回到css程式碼。我們說，contact-info，並選擇a元素，我們將display設定為block。最小高度設為20px。背景重複屬性設定為不重複。背景大小屬性設為20畫素和20畫素。然後填充設為0 0 0 30px。最後將邊距設定為0，0和10畫素
| .contact-info a{
display:block;
min-height:20px;
background-repeat:no-repeat;
background-size:20px 20px;
padding:0 0 0 30px;
margin:0 0 10px;
}
.contact-info li.phone a{ |
| |
這裡有很多程式碼。我們來一一解釋。我們已將display設定為block。這意味著在這種情況下，我們每個影像將佔據空間。這將給我們更多的空間來使用，以便我們的影像有一個實際顯示的地方。
接下來，我們將每個專案的最小高度設定為20畫素。這是我們的圖示完全可見的最小高度。
接下來，我們設定了另外兩個背景屬性background-repeat和background-size。預設情況下，CSS中的背景影像將始終重複，但是我們希望這些背景只顯示一次。所以我們將背景設定為不重複。
接下來，background的size屬性將調整為背景大小。
接下來，我們設定了填充。對於填充，我們希望在元素左側空出額外的空間，因為我們的影像將放在這些連結的左側。所以因為在左邊有一個填充，這將給影像一個顯示的地方。
最後，我們在底部新增十個畫素的邊距，以使我們每個連結之間垂直的分離開。
儲存並重新整理。所以，這是關於我們的Contact頁面。接下來，我們將會學習如何使我們的網站在各種螢幕解析度（如桌面和平板電腦）上工作。然後我們將網站放到網上。最後，我們將學習如何解決一些可能遇到的常見錯誤和錯誤。
更多精彩內容盡在視訊中！
本文固定連結：
http://www.oxox.work/web/html-css/contacts-style/ | 虛幻大學檢視原文：
http://www.oxox.work/web/html-css/contacts-style/