HTML+CSS编写静态网站-39 调整About页面

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

最后，我们还需要调整下About页面，我们的排版原则是希望能够更充分的利用浏览器窗口的空间。

所以同样，我们把它改为两列的布局，就像我们的Contact页面一样。但是，和Contact页面不同的是，Contact是由2个Section构成的，而About只有一个，所以我们可以通过将网站Logo浮动到左侧来实现，并添加一些margin。

所以让我们回到我们的CSS。首先，我要复制这个多行注释，。然后把注释改为About。然后，我们将选择我们的profile-photo，我们将其浮动到左边：float：left。然后我们需要稍微调整边距，因为这是浮动元素。所以margin:0，5％，80像素和0。我添加了5％的右边距来分隔文本，底部有80个像素，以防止文本包围到图像的底部：

 
 
       /* **************************************

       PAGE ABOUT

       ************************************** */

       .profile-photo{

              float:left;

              margin:0 5% 80px 0;

       }
所以让我们保存并刷新浏览器：

你看，现在是漂亮的两列布局。如果我将页面调宽，看起来不错。如果我调窄，我们的两列布局将成为移动设备的单列。和我们预期的一样。

接下来，我们需要做最后一件事情。我们需要在我们的三个HTML页面中添加视口元标记。它将允许我们在移动设备上控制浏览器窗口的大小，这样我们的布局就可以根据设备屏幕的大小而改变，而不是每次都需要访问者在页面上进行平移和缩放，来找到最合适的大小。

所以我要转到index.html。然后在responsive.css之后，我们说meta元素，name属性设置为视口。然后，content属性设为：width等于device-width，然后initial-scale等于1.0。最后，关闭标签。

 
 
              <link rel="stylesheet" href="css/responsive.css">

              <meta name="viewport" content="width=device-width, initial-scale=1.0">
现在，我们保存，复制该行，然后我将其粘贴到About页面和Contact页面，并保存。

如果我们不添加这行代码，那么在移动设备上的默认会以桌面布局呈现。我们希望移动布局会默认的在移动设备上呈现。因此，这个元标记的name属性中的视口应为content属性设置的值。在这种情况下，content属性表示，我们的网站的宽度应该被缩放为当前设备屏幕的宽度。初始比例应设置为1.0，也就是和屏幕一致。

所以，你可以看到我们的网站是一个完全响应式的网站。

总结来说，如果你有一个移动布局的网站，您只需要编写一点额外的css代码，就可以相当快将它变为一个桌面版的网站。

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

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

查看原文：http://www.oxox.work/web/html-css/adjust-about-page/