自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

一篇文章帶你了解HTML的網(wǎng)頁(yè)布局結(jié)構(gòu)

作者： IT共享者
網(wǎng)絡(luò) 通信技術(shù)
本文主要介紹了Html的網(wǎng)頁(yè)布局結(jié)構(gòu)，如何去了解網(wǎng)絡(luò)的布局，介紹了常見(jiàn)的移動(dòng)設(shè)備的三種網(wǎng)頁(yè)模式，最后通過(guò)一個(gè)小項(xiàng)目，總結(jié)之前講解的內(nèi)容。

[[404070]]

大家好，我是IT共享者，人稱(chēng)皮皮。這篇我們來(lái)講講CSS網(wǎng)頁(yè)布局。

一、網(wǎng)頁(yè)布局

網(wǎng)頁(yè)布局有很多種方式，一般分為以下幾個(gè)部分：頭部區(qū)域、菜單導(dǎo)航區(qū)域、內(nèi)容區(qū)域、底部區(qū)域。

1. 頭部區(qū)域

頭部區(qū)域位于整個(gè)網(wǎng)頁(yè)的頂部，一般用于設(shè)置網(wǎng)頁(yè)的標(biāo)題或者網(wǎng)頁(yè)的 logo：

例

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

 

2. 菜單導(dǎo)航區(qū)域

菜單導(dǎo)航條包含了一些鏈接，可以引導(dǎo)用戶(hù)瀏覽其他頁(yè)面：

例

  1. /* 導(dǎo)航條 */ 
  2. .topnav { 
  3.   overflow: hidden; 
  4.   background-color: #333; 
  5. } 
  6.   
  7. /* 導(dǎo)航鏈接 */ 
  8. .topnav a { 
  9.   float: left; 
  10.   display: block; 
  11.   color: #f2f2f2; 
  12.   text-align: center; 
  13.   padding: 14px 16px; 
  14.   text-decoration: none; 
  15. } 
  16.   
  17. /* 鏈接 - 修改顏色 */ 
  18. .topnav a:hover { 
  19.   background-color: #ddd; 
  20.   color: black; 
  21. } 

3. 內(nèi)容區(qū)域

內(nèi)容區(qū)域一般有三種形式:

1 列：一般用于移動(dòng)端。

2 列：一般用于平板設(shè)備。

3 列：一般用于 PC 桌面設(shè)備。

不相等的列

不相等的列一般是在中間部分設(shè)置內(nèi)容區(qū)域，這塊也是最大最主要的，左右兩次側(cè)可以作為一些導(dǎo)航等相關(guān)內(nèi)容，這三列加起來(lái)的寬度是 100%。

例：

  1. .column { 
  2.   float: left; 
  3. } 
  4.   
  5. /* 左右側(cè)欄的寬度 */ 
  6. .column.side { 
  7.   width: 25%; 
  8. } 
  9.   
  10. /* 中間列寬度 */ 
  11. .column.middle { 
  12.   width: 50%; 
  13. } 
  14.   
  15. /* 響應(yīng)式布局 - 寬度小于600px時(shí)設(shè)置上下布局 */ 
  16. @media screen and (max-width: 600px) { 
  17.   .column.side, .column.middle { 
  18.     width: 100%; 
  19.   } 
  20. } 

4. 底部區(qū)域

底部區(qū)域在網(wǎng)頁(yè)的最下方，一般包含版權(quán)信息和聯(lián)系方式等。

例

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

二、響應(yīng)式網(wǎng)頁(yè)布局

通過(guò)以上等學(xué)習(xí)我們來(lái)創(chuàng)建一個(gè)響應(yīng)式等頁(yè)面，頁(yè)面的布局會(huì)根據(jù)屏幕的大小來(lái)調(diào)整：

案例

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>項(xiàng)目</title> 
  6. <style> 
  7. * { 
  8.   box-sizing: border-box; 
  9. } 
  10.   
  11. body { 
  12.   font-family: Arial; 
  13.   padding: 10px; 
  14.   background: #f1f1f1; 
  15. } 
  16.   
  17. /* 頭部標(biāo)題 */ 
  18. .header { 
  19.   padding: 30px; 
  20.   text-align: center; 
  21.   background: white; 
  22. } 
  23.   
  24. .header h1 { 
  25.   font-size: 50px; 
  26. } 
  27.   
  28. /* 導(dǎo)航條 */ 
  29. .topnav { 
  30.   overflow: hidden; 
  31.   background-color: #333; 
  32. } 
  33.   
  34. /* 導(dǎo)航條鏈接 */ 
  35. .topnav a { 
  36.   float: left; 
  37.   display: block; 
  38.   color: #f2f2f2; 
  39.   text-align: center; 
  40.   padding: 14px 16px; 
  41.   text-decoration: none; 
  42. } 
  43.   
  44. /* 鏈接顏色修改 */ 
  45. .topnav a:hover { 
  46.   background-color: #ddd; 
  47.   color: black; 
  48. } 
  49.   
  50. /* 創(chuàng)建兩列 */ 
  51. /* Left column */ 
  52. .leftcolumn {    
  53.   float: left; 
  54.   width: 75%; 
  55. } 
  56.   
  57. /* 右側(cè)欄 */ 
  58. .rightcolumn { 
  59.   float: left; 
  60.   width: 25%; 
  61.   background-color: #f1f1f1; 
  62.   padding-left: 20px; 
  63. } 
  64.   
  65. /* 圖像部分 */ 
  66. .fakeimg { 
  67.   background-color: #aaa; 
  68.   width: 100%; 
  69.   padding: 20px; 
  70. } 
  71.   
  72. /* 文章卡片效果 */ 
  73. .card { 
  74.   background-color: white; 
  75.   padding: 20px; 
  76.   margin-top: 20px; 
  77. } 
  78.   
  79. /* 列后面清除浮動(dòng) */ 
  80. .row:after { 
  81.   content: ""; 
  82.   display: table; 
  83.   clear: both; 
  84. } 
  85.   
  86. /* 底部 */ 
  87. .footer { 
  88.   padding: 20px; 
  89.   text-align: center; 
  90.   background: #ddd; 
  91.   margin-top: 20px; 
  92. } 
  93.   
  94. /* 響應(yīng)式布局 - 屏幕尺寸小于 800px 時(shí)，兩列布局改為上下布局 */ 
  95. @media screen and (max-width: 800px) { 
  96.   .leftcolumn, .rightcolumn {    
  97.     width: 100%; 
  98.     padding: 0; 
  99.   } 
  100. } 
  101.   
  102. /* 響應(yīng)式布局 -屏幕尺寸小于 400px 時(shí)，導(dǎo)航等布局改為上下布局 */ 
  103. @media screen and (max-width: 400px) { 
  104.   .topnav a { 
  105.     float: none; 
  106.     width: 100%; 
  107.   } 
  108. } 
  109. </style> 
  110. </head> 
  111. <body> 
  112.  
  113. <div class="header"> 
  114.   <h1>我的網(wǎng)頁(yè)</h1> 
  115.   <p>重置瀏覽器大小查看效果。</p> 
  116. </div> 
  117.  
  118. <div class="topnav"> 
  119.   <a href="#">鏈接</a> 
  120.   <a href="#">鏈接</a> 
  121.   <a href="#">鏈接</a> 
  122.   <a href="#" style="float:right">鏈接</a> 
  123. </div> 
  124.  
  125. <div class="row"> 
  126.   <div class="leftcolumn"> 
  127.     <div class="card"> 
  128.       <h2>文章標(biāo)題</h2> 
  129.       <h5>xx 年xx月 xx日</h5> 
  130.       <div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div> 
  131.       <p>文本...</p> 
  132.       <p>當(dāng)熱誠(chéng)變成習(xí)慣，恐懼和憂(yōu)慮即無(wú)處容身。缺乏熱誠(chéng)的人也沒(méi)有明確的目標(biāo)。熱誠(chéng)使想象的輪子轉(zhuǎn)動(dòng)。一個(gè)人缺乏熱誠(chéng)就象汽車(chē)沒(méi)有汽油。 
  133.       善于安排玩樂(lè)和工作，兩者保持熱誠(chéng)，就是最快樂(lè)的人。熱誠(chéng)使平凡的話題變得生動(dòng)。！</p> 
  134.     </div> 
  135.     <div class="card"> 
  136.       <h2>文章標(biāo)題</h2> 
  137.       <h5>xx 年 xx 月xx日</h5> 
  138.       <div class="fakeimg" style="height:200px;"><img src="img/border.png"></div> 
  139.       <p>文本...</p> 
  140.       <p>一切事無(wú)法追求完美，唯有追求盡力而為。這樣心無(wú)壓力，出來(lái)的結(jié)果反而會(huì)更好！</p> 
  141.     </div> 
  142.   </div> 
  143.   <div class="rightcolumn"> 
  144.     <div class="card"> 
  145.       <h2>關(guān)于我</h2> 
  146.       <div class="fakeimg" style="height:100px;"></div> 
  147.       <p>6666</p> 
  148.     </div> 
  149.     <div class="card"> 
  150.       <h3>熱門(mén)文章</h3> 
  151.       <div class="fakeimg"><img src="img/fy2_wp.png">\</div> 
  152.      
  153.     </div> 
  154.     <div class="card"> 
  155.       <h3>關(guān)注我</h3> 
  156.       <p>本站發(fā)布的系統(tǒng)與軟件僅為個(gè)人學(xué)習(xí)測(cè)試使用，請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除， 
  157.       不得用于任何商業(yè)用途，否則后果自負(fù)，請(qǐng)支持購(gòu)買(mǎi)正版軟件！如侵犯到您的權(quán)益,請(qǐng)及時(shí)通知我們,我們會(huì)及時(shí)處理。 
  158.  
  159. 聲明：為非贏利性網(wǎng)站 不接受任何贊助和廣告。</p> 
  160.     </div> 
  161.   </div> 
  162. </div> 
  163.  
  164. <div class="footer"> 
  165.   <h2>底部區(qū)域</h2> 
  166. </div> 
  167.  
  168. </body> 
  169. </html> 

三、總結(jié)

本文主要介紹了Html的網(wǎng)頁(yè)布局結(jié)構(gòu)，如何去了解網(wǎng)絡(luò)的布局，介紹了常見(jiàn)的移動(dòng)設(shè)備的三種網(wǎng)頁(yè)模式，最后通過(guò)一個(gè)小項(xiàng)目，總結(jié)之前講解的內(nèi)容。

代碼很簡(jiǎn)單，希望可以幫助你學(xué)習(xí)。

 

責(zé)任編輯：姜華 來(lái)源： IT共享之家
HTML網(wǎng)頁(yè)布局CSS
相關(guān)推薦

2023-05-12 08:19:12

Netty程序框架

2021-06-30 00:20:12

Hangfire.NET平臺(tái)

2023-07-11 15:34:02

2020-10-23 08:17:29

HTML5MathML語(yǔ)言

2020-11-10 10:48:10

JavaScript屬性對(duì)象

2021-01-29 18:41:16

JavaScript函數(shù)語(yǔ)法

2021-02-02 18:39:05

JavaScript

2021-06-04 09:56:01

JavaScript 前端switch

2023-07-30 15:18:54

JavaScript屬性

2023-05-08 08:21:15

JavaNIO編程

2020-12-08 08:09:49

SVG圖標(biāo)Web

2021-01-26 23:46:32

JavaScript數(shù)據(jù)結(jié)構(gòu)前端

2021-03-09 14:04:01

JavaScriptCookie數(shù)據(jù)

2021-06-24 09:05:08

JavaScript日期前端

2021-09-27 09:18:30

ListIterato接口方法

2023-09-06 14:57:46

JavaScript編程語(yǔ)言

2024-01-30 13:47:45

2024-04-19 14:23:52

SwitchJavaScript開(kāi)發(fā)

2021-03-05 18:04:15

JavaScript循環(huán)代碼

2021-05-18 08:30:42

JavaScript 前端JavaScript時(shí)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)