通常我們從設計師手上拿到設計稿，按照功能劃分為很多小塊，然后再利用div+css寫成靜態頁面按照設計稿排列還原，最后把具體內容填充到小塊里面，網頁布局就是你想要的頁面功能在你拿到設計圖切塊完成重新排列還原好！
div是一個容器，具體根據內容自動適配，可以設定它的寬高，內容盡可能的排列到div當中，當然在設定div寬高后，它里面的圖片文字是可能超出設定的寬高度的，
table布局，可以查看HTML基礎標簽圖片文本超鏈接串列表格介紹這里面有講到，需要注意的是在table表格中，colspan是可以跨列合并單元格的，rowspan是可以跨行合并單元格的！以前的布局除了div+css還有frameset布局,它主要運用于管理后臺控制選單切換，實作這個區域的重繪，
iframe翻譯過來是頁面框架，其實它是用來嵌套頁面的，在頁面里面可以嵌套別人的頁面，展示代碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>ifame嵌套</title> 7 </head> 8 <body> 9 <iframe src="https://www.baidu.com/" frameborder="0" width="50%"></iframe> 10 <iframe src="https://hao.360.com/" frameborder="0" width="50%" style="float: left;"></iframe> 11 </body> 12 </html>
其次是frameset基于frame一個一個頁面嵌套進來的,需要注意的是frameset不能和body共用，它們是平級的關系，二者只能出現其一！具體按照下面的代碼來看，也可以實際操作下，有點繞哈，按照講解一二三依次來看，有相應的注釋：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>frameset實作區域重繪</title> 7 </head> 8 <!--講解一：frameset中frame的嵌套--> 9 <!-- <frameset rows="30%,70%"> 10 <frame src="https://www.cnblogs.com/webaction/p/frame1.html"> 11 <frame src="https://www.cnblogs.com/webaction/p/frame2.html"> 12 </frameset> --> 13 14 <!--講解二：frameset和table表格差不多，2行2列--> 15 <!-- <frameset rows="30%,70%"> 16 <frame src="https://www.cnblogs.com/webaction/p/frame1.html"> 17 <frameset cols="20%,80%"> 18 <frame src="https://www.cnblogs.com/webaction/p/frame2.html"> 19 <frame src="https://www.cnblogs.com/webaction/p/frame3.html"> 20 </frameset> 21 </frameset> --> 22 23 <!--講解三：frameset如何控制實作區域重繪--> 24 <!-- 4個frame檔案寫的內容如下： --> 25 <!-- frame1中寫著： --><!--frame1--> 26 <!-- frame2中寫著： --><!-- <a href="https://www.cnblogs.com/webaction/p/frame3.html" target="showframe">frame3.html</a><a href="https://www.cnblogs.com/webaction/p/frame4.html" target="showframe">frame4.html</a> --> 27 <!-- frame3中寫著： --><!--frame3--> 28 <!-- frame4中寫著： --><!--frame4--> 29 <frameset rows="30%,70%"> 30 <frame src="frame1.html"> 31 <frameset cols="20%,80%"> 32 <frame src="frame2.html"> 33 <frame src="frame3.html" name="showframe"><!--如果不寫name="showframe"沒辦法實作區域重繪，會打開新的視窗--> 34 </frameset> 35 </frameset> 36 </html>
最后關于iframe與frame的區別在我看來：iframe翻譯過來是嵌套，其實就是把別的頁面嵌套到自己的頁面進來<iframe src="https://www.cnblogs.com/webaction/p/嵌套目標檔案" frameborder="0"></iframe>；而這個frame是frameset實作區域重繪的基石，沒有frame，frameset就無法實作區域重繪,同時要注意的是frameset與body不能同時出現!
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/73724.html
標籤：Html/Css