HTML+CSS編寫靜态網站-38 Vedio頁面适配桌面布局

這節課。我們希望讓Vedio頁面對不僅隻适配移動布局，我們來讓它适應更大的布局。

是以。首先，我們先删除之前的背景樣式測試代碼。

@media screen and (min-width:480px){ } @media screen and (min-width:660px){ }

現在，我們來添加第一個媒體查詢。我們想要做的第一件事是通過将兩個元素并排浮動來建立一個兩列布局，就像我們之前建立的畫冊一樣。

是以這裡，我要建立兩個新的ID，然後将它應用于我們的HTML。第一個将是我們的主列，主列是兩列中的較大的一列。

首先，我将切換到main.css複制一個多行注釋。然後我會粘貼在這裡。這裡我把它改為“TWO COLUMN LAYOUT”：

@media screen and (min-width:480px){ /* ************************************** TWO COLUMN LAYOUT ************************************** */ }

然後，我要使用ID:primary，這裡我們還沒有把它添加到我們的HTML，不急，咱們先把樣式寫完，然後再添加到HTML中，那麼接着。我會添加兩個花括号。然後，把width設定為50％，因為我希望占用螢幕寬度的一半。這是左列。然後把float設為left。

#primary{ width:50%; float:left; }

接下來，我們将建立第二列。是以我們來建立一個名為secondary的ID。我們将寬度設定為40％，這不是主列，它是輔助列。我們不希望它占用太多的空間。然後，我們要讓它漂浮在右邊，float:right。

#secondary{ width:40%; float:right; }

現在，我們在contact頁面上使用這些ID。還記得當我們添加兩個section嗎？那麼現在，我們要将這些section分成兩列。是以，在我們的第一個section，我們來說id是primary的。然後我們的第二個section， id 為secondary。

<section id = "primary"> <h3>General information</h3><p>虛幻大學希望能夠讓每個人享受程式設計的樂趣，沒有程式設計經驗的人能夠通過學習找到工作，有程式設計經驗的人能夠通過學習全面自己的技術。如果你有任何問題，請随時與我聯系！</p></section><section id = "secondary">

儲存，切換到浏覽器，重新整理頁面：

首先，背景顔色消失了。然後，如果我們轉到我們的Contact頁面，您将看到我們現在有兩列。如果我們将浏覽器的寬度縮到480px以下，你看，又變回到以前的樣式了。

因為在移動裝置是高高瘦瘦的，這使得在頁面上下滾動變得非常容易。那麼，桌上型電腦浏覽器在這種情況下肯定也可以很容易地滾動，但是變成2列之後就可以更充分的利用頁面的空間了。是以，這就是響應式網站的設計方式，

接下來，我們應該對我們的Vedio頁面進行一些類似的調整。現在，我們已經有一個兩列的布局，但是将它擴充到三列将會更加完美。

是以我們來跳入我們的CSS。我要在這裡複制多行注釋，然後，粘貼到新的一行。把它改為PAGE:VEDIO

/* ************************************** PAGE:VEDIO ************************************** */

這裡，因為我們要将畫冊設定為3列，畫冊是通過清單項建立的，又因為元素是浮動的。是以在不改變邊距的情況下，我們隻需要改變寬度。是以我們将寬度設定為28.333%。

#gallery li{ width:28.3333%; }

如果我們現在切換到浏覽器并重新整理，一切看起來都很好。

更多精彩内容盡在視訊中！