HTML+CSS编写静态网站-39 调整About页面
来源:互联网 发布:东莞网络 编辑:程序博客网 时间:2024/06/01 15:15
视频教程观看地址: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/
阅读全文
0 0
- HTML+CSS编写静态网站-39 调整About页面
- HTML+CSS编写静态网站-31 添加About页面
- HTML+CSS编写静态网站-24 调整页面文本
- HTML+CSS编写静态网站-28 调整标题和导航
- HTML+CSS编写静态网站-33 创建Contact页面
- HTML+CSS编写静态网站-32 为关于页面添加样式
- HTML+CSS编写静态网站-34 为Contact页面添加样式
- HTML+CSS编写静态网站-38 Vedio页面适配桌面布局
- HTML+CSS编写静态网站-03 添加css样式
- HTML+CSS编写静态网站-13 包含外部css样式
- HTML+CSS编写静态网站-15 什么是CSS
- HTML+CSS编写静态网站-20 CSS颜色属性详解
- HTML+CSS编写静态网站-05 HTML的含义
- HTML+CSS编写静态网站-18 开发手机网站
- HTML+CSS编写静态网站-41 上传网站到Github
- HTML+CSS编写静态网站-14 课后作业03
- HTML+CSS编写静态网站-16 使用div
- HTML+CSS编写静态网站-01 课程简介
- offer面试题----1(字符串转换成整数)
- POJ 2054(Color a Tree-贪心)
- hdu 1317 spfa 算法 判断正环
- 30. Substring with Concatenation of All Words
- 对于程序员来说CPU是什么
- HTML+CSS编写静态网站-39 调整About页面
- Educational Codeforces Round 25 C Multi-judge Solving 贪心
- 《暗时间》
- Semaphore与多线程
- 《象与骑象人》
- 第 15 章日常系统维护
- offer面试题二-----寻找链表的倒数第K个节点
- 创建定时器
- LINK : fatal error LNK1104: cannot open file "Debug/xxxxx.exe"