視訊教程觀看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015
現在，我們來到CSS中新增樣式，這裡，我在COLORS的多行註釋上建立一個新的註釋，因為我們要為新的頁面新增樣式。所以說：PAGE：ABOUT：
| /* **************************************
PAGE ABOUT
************************************** */
/* **************************************
COLORS
************************************** */ |
然後，我們為網站logo新增樣式，所以指定.profile-photo。我要設定display為block。Max-width設定為150px，margin頂部為0，左側和右側為auto，底部為30px，border-radius設為100％：
| /* **************************************
PAGE ABOUT
************************************** */
.profile-photo{
display:block;
max-width:150px;
margin:0 auto 30px;
border-radius:100%;
} |
將display設定為block，將允許我們使用自動邊距將元素在頁面上居中，預設情況下，影像顯示在一行，但我們不希望此影像與其餘文字在一行顯示。所以，我們設定它是block。然後，我們設定影像的最大寬度為150個畫素，它可以變小，但我不希望它超過150畫素。最後，我們使用了一個名為Border Radius的新屬性。也就是：邊框半徑屬性，它允許您向元素新增圓角。您可以以畫素為單位對它進行賦值，但這裡我使用百分比。我把它設定為100％。這將使我們的圓角最大，實際上我們的照片將是一個圓圈，而不是一個正方形。
所以我們來儲存它。切換到我們的瀏覽器，並重新整理頁面。
你看，圖片現在是一個圓圈。你可能對圓角設為100％不理解，我們不妨把它設定為20畫素：
| .profile-photo{
display:block;
max-width:150px;
margin:0 auto 30px;
border-radius:20px;
} |
儲存和重新整理：
你看，這裡就是一個漂亮的小圓角，而不是剛剛的一個完整的圓，好像這個效果更好一些，就用這個設定了。
現在，我們為這個頁面中新增最後一個樣式。我想對第三極標題應用樣式，但我不打算把它放在PAGE ABOUT多行註釋下。我實際上會把它放在GENERAL下，因為這個h3元素將會在以後應用到其他頁面上。
所以，設定margin為0，0，1em和0。所以，頂部是0，右邊是0，底部是1em，然後左邊是0。這將清除h3元素的邊距，並在底部新增一些邊距，以便將它與其他文字分開一點。
| img{
max-width:100%;
}
h3{
margin:0 0 1em 0;
} |
所以，如果我們在這裡切換回瀏覽器並重新整理，你可以看到間距只是略有不同，但是，當我們進入桌面網站佈局時，這一點也會更加明顯。
更多精彩內容盡在視訊中！
本文固定連結：
http://www.oxox.work/web/html-css/page-style/ | 虛幻大學檢視原文：
http://www.oxox.work/web/html-css/page-style/