視訊教程觀看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015

這節課，我們將首先構建我們移動版本的網站。這可能看起來有點不合理，但現在做網站基本上從一開始就必須考慮到移動裝置。有兩個原因。首先，建立一個手機網站要加容易，因為它簡單得多。你不必擔心複雜的功能，比如廣告以及複雜的佈局等。然後，當您從手機平臺移動到更強大的平臺（如平板電腦和桌面）時，您可以逐步增強您的網站。這比從一開始就在在桌面上建立一個非常複雜的網站更容易。

其次是因為移動平臺非常重要，我們知道，行動網路不是一個小平臺。事實上，現在，大家在手機上花的時間要遠遠多於電腦。

因此，我們必須從一開始就為移動平臺而設計，然後再考慮桌面平臺。

現在，讓我們跳回到程式碼中，讓我們刪除包裝器上的橙色背景，因為我們實際上不需要它。這只是為了把講解點講解清楚：

#wrapper{ max-width:940px; margin:0 auto; background:orange; padding:0 5% }

接下來，我們來為網頁的標題進行樣式改造。為了做到這一點，我們需要切換到我們的HTML，在這個header元素的內部，因為我們的標題被包含在header中，所以，我們在anchor元素中鍵入ID，我們將其稱為logo。我們儲存，然後回到我們的CSS中:

<header> <a href = "index.html" id="logo"> <h1>I Love www.oxox.work</h1> <h2>Easy and happy to learn</h2> </a>

在我們的wrapper之後。我們建立ID選擇器，使用井號，然後是logo選擇器，然後在選擇器內部，我做一些宣告。首先我使用屬性：text-align，它的值為center。然後我將margin設定為0：

#logo {        text-align:center;        margin::0; }

現在讓我們解釋一下這段宣告的意思。text-align屬性用於對齊文字，因此就像在word中，我們可以將文字對齊到左邊，右邊或中心。我想讓我的文字居中，所以我們把它賦值為center。 接下來，我在這裡的margin值為0。我不想讓這個元素在存在邊距，所以，它將應用於我們的元素的所有的上下左右四邊。現在，儲存檔案，切換到我們的瀏覽器，你會看到，首先，橙色背景已被刪除，其次，我們的標題元素已在頁面中間。 更多精彩內容盡在視訊中！ 本文固定連結：

http://www.oxox.work/web/html-css/mobile-site/ | 虛幻大學

檢視原文：http://www.oxox.work/web/html-css/mobile-site/