網頁DIV+CSS佈局與ifame傳統佈局對比

時間 2020-02-15

標籤網頁 div+css div css 佈局 ifame 傳統對比欄目 HTML 简体版

原文原文鏈接

一般咱們從設計師手上拿到設計稿，按照功能劃分爲不少小塊，而後再利用div+css寫成靜態頁面按照設計稿排列還原，最後把具體內容填充到小塊裏面。網頁佈局就是你想要的頁面功能在你拿到設計圖切塊完成從新排列還原好！css

div是一個容器，具體根據內容自動適配，能夠設置它的寬高，內容儘量的排列到div當中，固然在設置div寬高後，它裏面的圖片文字是可能超出設置的寬高度的。html

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共用，它們是平級的關係，兩者只能出現其一！具體按照下面的代碼來看，也能夠實際操做下，有點繞哈，按照講解一二三依次來看，有相應的註釋：spa

 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="frame1.html">
11         <frame src="frame2.html">  
12     </frameset> -->
13 
14 <!--講解二：frameset和table表格差很少，2行2列-->
15 <!-- <frameset rows="30%,70%">
16         <frame src="frame1.html">
17         <frameset cols="20%,80%">
18             <frame src="frame2.html">
19             <frame src="frame3.html">    
20         </frameset>
21     </frameset> -->
22 
23 <!--講解三：frameset如何控制實現局部刷新-->
24 <!-- 4個frame文件寫的內容以下： -->
25 <!-- frame1中寫着： --><!--frame1-->
26 <!-- frame2中寫着： --><!-- <a href="frame3.html" target="showframe">frame3.html</a><a href="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="嵌套目標文件" frameborder="0"></iframe>；而這個frame是frameset實現局部刷新的基石，沒有frame，frameset就沒法實現局部刷新,同時要注意的是frameset與body不能同時出現!翻譯