過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。

iframe語法:

<iframe src="URL"></iframe>

該URL指向不同的網頁。

Iframe - 設置高度與寬度

height 和 width 屬性用來定義iframe標簽的高度與寬度。

屬性默認以像素為單位, 但是你可以指定其按比例顯示 (如："80%").

實例

<iframesrc="demo_iframe.htm"width="200"height="200"></iframe>

Iframe - 移除邊框

frameborder 屬性用于定義iframe表示是否顯示邊框。

設置屬性值為 "0" 移除iframe的邊框:

實例

<iframesrc="demo_iframe.htm"frameborder="0"></iframe>

使用iframe來顯示目錄鏈接頁面

iframe可以顯示一個目標鏈接的頁面

目標鏈接的屬性必須使用iframe的屬性，如下實例:

實例

<iframesrc="demo_iframe.htm"name="iframe_a"></iframe><p><a>RUNOOB.COM</a></p>

HTML iframe 標簽

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

就深入了解布局規范都足夠說上一個月的，今天我就不論大范圍，挑選小米網站首頁的部分區塊布局來講解吧！下面是小米官網的首頁，很多人一看到這樣的網頁就傻眼，不知道咋弄，要么就隨性布局，要么就干看著，其實遇到問題首先一點就是不要慌，先分析，將你認為難的問題拆分成多個問題區塊，還解決不了就再拆分，直到變成能解決的小問題，一個個解決那些小問題最終大問題也就搞定了。咱們布局網頁前也是一樣套路，先分析整體的架構，畫出布局圖將大塊拆分為小塊，這樣會更加直觀看到網頁的布局結構。我大致上用線框將網頁內容劃分為四個區塊：頂部導航條區域topnav（藍色線框）、頭部分類導航區域header（綠色線框），主體內容區域main（紫色線框）、網頁底部信息區域foot（橘色線框）。

（注意：在初學不知道如何布局時建議使用畫圖工具做輔助分析。且并非只有這一種區塊劃分方式，布局有很多種，我只從其中挑一種來寫，講不完=_=||）

這里我是按照整體網頁的內容進行區塊劃分的：（每個線框都為一個標簽盒子）

• topnav（頂部導航區域）：從整體布局來看，topnav展示的內容都是小米網站下所有類別的子產品導航，而小米網站的首頁主題是商城（直接展示電子類產品），它跟主題不符，所以這塊區域單獨劃分出來。整體區塊使用nav標簽，考慮兼容性的話就使用div標簽。header（頭部分類信息導航區域）：這塊區域主要包含不同商品的分類導航和其他的服務導航，和主題也不太相符。輪播和輪播下方圖片因為位置原因，打開該網頁第一眼看見的就是這部分區塊，即便其中也包含商品，但更多的是具有廣告位的性質，這里就單獨劃分出header區塊。整體區塊使用header標簽，考慮兼容性的話就使用div標簽。main(主體內容區域)：小米首頁下小米商城的主題內容區域，也是整體網頁面積最廣的區塊（實在不知道定主體內容區塊時也可以根據面積比重來劃分，最大的那塊一定是主題中心），布局的重復性很高。整體區塊使用main標簽，考慮兼容性的話就使用div標簽。footer（網頁底部信息區域）：這部分幾乎沒啥好說的，展示的都是網站特色、網站信息，也單獨劃分一個塊。整體區塊使用footer標簽，考慮兼容性的話就使用div標簽。

代碼如下：（考慮兼容IE）

<div id="pagewrap">
 <div id="page-topnav"></div> <!--導航區域-->
 <div id="page-header"></div> <!--頭部分類信息導航區域-->
 <div id="page-main"></div> <!--主體內容區域-->
 <div id="page-footer"></div> <!--網頁底部信息區域-->
</div>

這樣咱們就將網頁劃分為四大塊了，看起來難度是不是比之前要小一點了呢？那下一步就是將各個區塊看做單個的整體，對它進行分析再拆分。

topnav布局分析

• 紅色線框：頂部導航欄區域（）黃色線框：內容盒子藍綠色線框：左右兩塊列表區域

? 如下布局圖所示，頂部導航欄區域中，內容盒子寬度在1226px，水平居中，其內部又分為左右兩塊列表區域和一個div盒子（購物車），都包含著文字鏈接。

對應標簽結構代碼：

<div id="page-topnav">
 <div class="container">
 <ul class="topbar">
 <li><a href="#">小米商城</a></li>
 <li><a href="#">小米商城</a></li>
 <li><a href="#">小米商城</a></li>
 <li><a href="#">小米商城</a></li>
 <li><a href="#">小米商城</a></li>
 <li><a href="#">小米商城</a></li>
 <li><a href="#">小米商城</a></li>
 <li><a href="#">小米商城</a></li>
 <li><a href="#">小米商城</a></li>
 <li><a href="#">小米商城</a></li>
 <li><a href="#">小米商城</a></li>
 <li><a href="#">小米商城</a></li>
 </ul>
 <ul class="info">
 <li><a href="#">登錄</a></li>
 <li><a href="#">登錄</a></li>
 <li><a href="#">登錄</a></li>
 </ul>
 <div class="cart">
 <a href="#">購物車</a>
 </div>
 </div>
</div>
<!--文字內容我懶的寫，復制粘貼的，自己私下練習記得一個個敲-->

標簽搭建好結構還需要搭配css來使用，這里順便把相關的css技巧我也講一些。 .container（黃色線框）本身就是一個塊級元素，不改變元素類型的前提下實現水平居中有以下幾種方式：

• 第一種：（當前場景下推薦使用這種居中方式）

#page-topnav .container{ 
 width:1226px; 
 margin：0 auto; 
}
 

使用margin：auto實現自動計算達到水平居中，注意這種居中方式作用對象必須是塊級標簽，且有固定的寬度才可以實現

• 第二種：

#page-topnav .container{ 
 position: relative; 
 left: 50%; 
 width: 1226px; 
 margin-left: -613px; 
}
 

使用相對定位，通過設置left讓.container向右移動50%的相對距離，再利用負左外邊距向左移動自身寬度的一半距離，達到水平居中的效果。參考下圖：

兩個左右ul分別添加左浮動float:left;和右浮動float:right;就能實現左右對齊。

li中的文本實現水平垂直居中的2種方式：

• 第一種：

.container .topbar li{ 
 height: 40px; /*盒子高度*/ 
 line-height: 40px; /*行高*/ 
 font-size: 14px; /*文字大小*/ 
 text-align: center; /*盒子內的文本水平居中*/ 
}

將文本的行高與li盒子高度設為一致，達到文本垂直居中效果。

• 第二種：

.container .topbar li{ 
 padding: 10px; 
}
 

給li添加內邊距，實現文本上下左右居中效果，但會造成li高度不固定。所以當前場景下推薦第一種方式

----持續更新----