HTML+CSS编写静态网站-38 Vedio页面适配桌面布局

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015

这节课。我们希望让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%;        }

如果我们现在切换到浏览器并刷新，一切看起来都很好。

更多精彩内容尽在视频中！

本文固定链接：http://www.oxox.work/web/html-css/vedio-layout/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/vedio-layout/