|
|
|
|
公众号矩阵

一篇文章带你了解HTML的网页布局结构

本文主要介绍了Html的网页布局结构,如何去了解网络的布局,介绍了常见的移动设备的三种网页模式,最后通过一个小项目,总结之前讲解的内容。

作者: IT共享者来源: IT共享之家|2021-06-07 09:31

大家好,我是IT共享者,人称皮皮。这篇我们来讲讲CSS网页布局。

一、网页布局

网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。

1. 头部区域

头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的 logo:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"
  5. <title>CSS 项目(runoob.com)</title> 
  6. <meta name="viewport" content="width=device-width, initial-scale=1"
  7. <style> 
  8. body { 
  9.   margin: 0; 
  10.  
  11. /* 头部样式 */ 
  12. .header { 
  13.   background-color: #f1f1f1; 
  14.   padding: 20px; 
  15.   text-align: center; 
  16. </style> 
  17. </head> 
  18. <body> 
  19.  
  20. <div class="header"
  21.   <h1>头部区域</h1> 
  22. </div> 
  23.  
  24. </body> 
  25. </html> 

 

2. 菜单导航区域

菜单导航条包含了一些链接,可以引导用户浏览其他页面:

  1. /* 导航条 */ 
  2. .topnav { 
  3.   overflow: hidden; 
  4.   background-color: #333; 
  5.   
  6. /* 导航链接 */ 
  7. .topnav a { 
  8.   floatleft
  9.   display: block; 
  10.   color: #f2f2f2; 
  11.   text-align: center; 
  12.   padding: 14px 16px; 
  13.   text-decoration: none; 
  14.   
  15. /* 链接 - 修改颜色 */ 
  16. .topnav a:hover { 
  17.   background-color: #ddd; 
  18.   color: black; 

3. 内容区域

内容区域一般有三种形式:

1 列:一般用于移动端。

2 列:一般用于平板设备。

3 列:一般用于 PC 桌面设备。

不相等的列

不相等的列一般是在中间部分设置内容区域,这块也是最大最主要的,左右两次侧可以作为一些导航等相关内容,这三列加起来的宽度是 100%。

例:

  1. .column { 
  2.   floatleft
  3.   
  4. /* 左右侧栏的宽度 */ 
  5. .column.side { 
  6.   width: 25%; 
  7.   
  8. /* 中间列宽度 */ 
  9. .column.middle { 
  10.   width: 50%; 
  11.   
  12. /* 响应式布局 - 宽度小于600px时设置上下布局 */ 
  13. @media screen and (max-width: 600px) { 
  14.   .column.side, .column.middle { 
  15.     width: 100%; 
  16.   } 

4. 底部区域

底部区域在网页的最下方,一般包含版权信息和联系方式等。

  1. .footer { 
  2.   background-color: #F1F1F1; 
  3.   text-align: center; 
  4.   padding: 10px; 

二、响应式网页布局

通过以上等学习我们来创建一个响应式等页面,页面的布局会根据屏幕的大小来调整:

案例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"
  5. <title>项目</title> 
  6. <style> 
  7. * { 
  8.   box-sizing: border-box; 
  9.   
  10. body { 
  11.   font-family: Arial; 
  12.   padding: 10px; 
  13.   background: #f1f1f1; 
  14.   
  15. /* 头部标题 */ 
  16. .header { 
  17.   padding: 30px; 
  18.   text-align: center; 
  19.   background: white; 
  20.   
  21. .header h1 { 
  22.   font-size: 50px; 
  23.   
  24. /* 导航条 */ 
  25. .topnav { 
  26.   overflow: hidden; 
  27.   background-color: #333; 
  28.   
  29. /* 导航条链接 */ 
  30. .topnav a { 
  31.   floatleft
  32.   display: block; 
  33.   color: #f2f2f2; 
  34.   text-align: center; 
  35.   padding: 14px 16px; 
  36.   text-decoration: none; 
  37.   
  38. /* 链接颜色修改 */ 
  39. .topnav a:hover { 
  40.   background-color: #ddd; 
  41.   color: black; 
  42.   
  43. /* 创建两列 */ 
  44. /* Left column */ 
  45. .leftcolumn {    
  46.   floatleft
  47.   width: 75%; 
  48.   
  49. /* 右侧栏 */ 
  50. .rightcolumn { 
  51.   floatleft
  52.   width: 25%; 
  53.   background-color: #f1f1f1; 
  54.   padding-left: 20px; 
  55.   
  56. /* 图像部分 */ 
  57. .fakeimg { 
  58.   background-color: #aaa; 
  59.   width: 100%; 
  60.   padding: 20px; 
  61.   
  62. /* 文章卡片效果 */ 
  63. .card { 
  64.   background-color: white; 
  65.   padding: 20px; 
  66.   margin-top: 20px; 
  67.   
  68. /* 列后面清除浮动 */ 
  69. .row:after { 
  70.   content: ""
  71.   display: table
  72.   clear: both; 
  73.   
  74. /* 底部 */ 
  75. .footer { 
  76.   padding: 20px; 
  77.   text-align: center; 
  78.   background: #ddd; 
  79.   margin-top: 20px; 
  80.   
  81. /* 响应式布局 - 屏幕尺寸小于 800px 时,两列布局改为上下布局 */ 
  82. @media screen and (max-width: 800px) { 
  83.   .leftcolumn, .rightcolumn {    
  84.     width: 100%; 
  85.     padding: 0; 
  86.   } 
  87.   
  88. /* 响应式布局 -屏幕尺寸小于 400px 时,导航等布局改为上下布局 */ 
  89. @media screen and (max-width: 400px) { 
  90.   .topnav a { 
  91.     float: none; 
  92.     width: 100%; 
  93.   } 
  94. </style> 
  95. </head> 
  96. <body> 
  97.  
  98. <div class="header"
  99.   <h1>我的网页</h1> 
  100.   <p>重置浏览器大小查看效果。</p> 
  101. </div> 
  102.  
  103. <div class="topnav"
  104.   <a href="#">链接</a> 
  105.   <a href="#">链接</a> 
  106.   <a href="#">链接</a> 
  107.   <a href="#" style="float:right">链接</a> 
  108. </div> 
  109.  
  110. <div class="row"
  111.   <div class="leftcolumn"
  112.     <div class="card"
  113.       <h2>文章标题</h2> 
  114.       <h5>xx 年xx月 xx日</h5> 
  115.       <div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div> 
  116.       <p>文本...</p> 
  117.       <p>当热诚变成习惯,恐惧和忧虑即无处容身。缺乏热诚的人也没有明确的目标。热诚使想象的轮子转动。一个人缺乏热诚就象汽车没有汽油。 
  118.       善于安排玩乐和工作,两者保持热诚,就是最快乐的人。热诚使平凡的话题变得生动。!</p> 
  119.     </div> 
  120.     <div class="card"
  121.       <h2>文章标题</h2> 
  122.       <h5>xx 年 xx 月xx日</h5> 
  123.       <div class="fakeimg" style="height:200px;"><img src="img/border.png"></div> 
  124.       <p>文本...</p> 
  125.       <p>一切事无法追求完美,唯有追求尽力而为。这样心无压力,出来的结果反而会更好!</p> 
  126.     </div> 
  127.   </div> 
  128.   <div class="rightcolumn"
  129.     <div class="card"
  130.       <h2>关于我</h2> 
  131.       <div class="fakeimg" style="height:100px;"></div> 
  132.       <p>6666</p> 
  133.     </div> 
  134.     <div class="card"
  135.       <h3>热门文章</h3> 
  136.       <div class="fakeimg"><img src="img/fy2_wp.png">\</div> 
  137.      
  138.     </div> 
  139.     <div class="card"
  140.       <h3>关注我</h3> 
  141.       <p>本站发布的系统与软件仅为个人学习测试使用,请在下载后24小时内删除, 
  142.       不得用于任何商业用途,否则后果自负,请支持购买正版软件!如侵犯到您的权益,请及时通知我们,我们会及时处理。 
  143.  
  144. 声明:为非赢利性网站 不接受任何赞助和广告。</p> 
  145.     </div> 
  146.   </div> 
  147. </div> 
  148.  
  149. <div class="footer"
  150.   <h2>底部区域</h2> 
  151. </div> 
  152.  
  153. </body> 
  154. </html> 

三、总结

本文主要介绍了Html的网页布局结构,如何去了解网络的布局,介绍了常见的移动设备的三种网页模式,最后通过一个小项目,总结之前讲解的内容。

代码很简单,希望可以帮助你学习。

【编辑推荐】

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区
  2. 鸿蒙,就算套壳安卓又能怎样呢?
  3. Kubernetes为什么要弃用Docker?
  4. 从“PPT系统”走向现实:HarmonyOS,你真香了吗?
  5. 这6款Python IDE&代码编辑器,你都用过吗?
  6. Kubernetes实践之优雅终止
【责任编辑:姜华 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

带你轻松入门 RabbitMQ

带你轻松入门 RabbitMQ

轻松入门RabbitMQ
共4章 | loong576

9人订阅学习

数据湖与数据仓库的分析实践攻略

数据湖与数据仓库的分析实践攻略

助力现代化数据管理:数据湖与数据仓库的分析实践攻略
共3章 | 创世达人

9人订阅学习

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

40人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微