偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

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

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

[[404070]]

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

一、網(wǎng)頁布局

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

1. 頭部區(qū)域

頭部區(qū)域位于整個網(wǎng)頁的頂部，一般用于設(shè)置網(wǎng)頁的標題或者網(wǎng)頁的 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. /* 頭部樣式 */ 
  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)用戶瀏覽其他頁面：

例

  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 列：一般用于移動端。

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

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

不相等的列

不相等的列一般是在中間部分設(shè)置內(nèi)容區(qū)域，這塊也是最大最主要的，左右兩次側(cè)可以作為一些導(dǎo)航等相關(guān)內(nè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è)置上下布局 */ 
  16. @media screen and (max-width: 600px) { 
  17.   .column.side, .column.middle { 
  18.     width: 100%; 
  19.   } 
  20. } 

4. 底部區(qū)域

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

例

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

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

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

案例

  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.   
  11. body { 
  12.   font-family: Arial; 
  13.   padding: 10px; 
  14.   background: #f1f1f1; 
  15. } 
  16.   
  17. /* 頭部標題 */ 
  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. /* 列后面清除浮動 */ 
  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 時，兩列布局改為上下布局 */ 
  95. @media screen and (max-width: 800px) { 
  96.   .leftcolumn, .rightcolumn {    
  97.     width: 100%; 
  98.     padding: 0; 
  99.   } 
  100. } 
  101.   
  102. /* 響應(yīng)式布局 -屏幕尺寸小于 400px 時，導(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)頁</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>文章標題</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>當熱誠變成習(xí)慣，恐懼和憂慮即無處容身。缺乏熱誠的人也沒有明確的目標。熱誠使想象的輪子轉(zhuǎn)動。一個人缺乏熱誠就象汽車沒有汽油。 
  133.       善于安排玩樂和工作，兩者保持熱誠，就是最快樂的人。熱誠使平凡的話題變得生動。！</p> 
  134.     </div> 
  135.     <div class="card"> 
  136.       <h2>文章標題</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>一切事無法追求完美，唯有追求盡力而為。這樣心無壓力，出來的結(jié)果反而會更好！</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>熱門文章</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)與軟件僅為個人學(xué)習(xí)測試使用，請在下載后24小時內(nèi)刪除， 
  157.       不得用于任何商業(yè)用途，否則后果自負，請支持購買正版軟件！如侵犯到您的權(quán)益,請及時通知我們,我們會及時處理。 
  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)頁布局結(jié)構(gòu)，如何去了解網(wǎng)絡(luò)的布局，介紹了常見的移動設(shè)備的三種網(wǎng)頁模式，最后通過一個小項目，總結(jié)之前講解的內(nèi)容。

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

 

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

2021-06-30 00:20:12

Hangfire.NET平臺

2023-05-12 08:19:12

Netty程序框架

2020-10-23 08:17:29

HTML5MathML語言

2023-07-11 15:34:02

2023-05-08 08:21:15

JavaNIO編程

2024-04-19 14:23:52

SwitchJavaScript開發(fā)

2023-09-06 14:57:46

JavaScript編程語言

2023-07-30 15:18:54

JavaScript屬性

2021-05-18 08:30:42

JavaScript 前端JavaScript時

2024-01-30 13:47:45

2021-03-05 18:04:15

JavaScript循環(huán)代碼

2021-03-09 14:04:01

JavaScriptCookie數(shù)據(jù)

2021-09-27 09:18:30

ListIterato接口方法

2021-01-26 23:46:32

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

2021-06-24 09:05:08

JavaScript日期前端

2021-02-26 20:01:57

SVG濾鏡元素

2020-12-08 08:09:49

SVG圖標Web

2021-02-02 18:39:05

JavaScript

2020-11-10 10:48:10

JavaScript屬性對象

2021-06-04 09:56:01

JavaScript 前端switch
點贊
收藏

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