整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。
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 標簽
| 標簽 | 說明 |
|---|---|
| <iframe> | 定義一個內聯的iframe |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
天我教大家怎么零基礎編寫html框架
首先建立一個index.html文件，index（為首頁的意思）
請大家先看看效果圖
網站可分為三個部分
head頭
<head></head>
body體
<body><body>
foot腳
<footer></footer>
在剛剛建好的index.html里面寫上html標準代碼
<!--這為文本類型也是html開始代碼-->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
其次給html寫上編碼讓瀏覽器知道他是什么編碼，不然會出現亂碼
<!DOCTYPE html>
<html>
<head>
<!--網站編碼為utf-8-->
<meta charset="utf-8">
<!--此為網站標題-->
<title></title>
</head>
<body>
</body>
</html>
在給網站起個標題
<!DOCTYPE html>
<html>
<head>
<!--網站編碼為utf-8-->
<meta charset="utf-8">
<!--此為網站標題-->
<title>html框架</title>
</head>
<body>
</body>
</html>
現在我們開始寫body體
先建立三個div塊
我們給這三個塊下個名稱
在給這三個div塊寫上css樣式，css樣式有三種我們先講內聯，下節課再講外聯
再給css樣式寫上內容
/*width:為寬度;height :為高;background:為網站背景;（也可以用color表示）css樣式要以;結尾*/
現在我們來看看效果
div塊靠左，不美觀怎么辦？
沒關系我們寫上css讓它居中更美觀
/*margin:上邊距 右邊距 下邊距 左邊距;margin:0 auto; 0就是塊離瀏覽器上邊框的距離為0個像素點，auto為塊自動居中*/
/*也可以用margin-left：左邊距;margin-right: 右邊距;margin-top: 上邊距;margin-bottom: 下邊距;*/
再讓我們看看效果吧
是不是居中了
只是這樣還不像網站怎辦別急我們再給它寫上幻燈片的框架和做導航和右內容框架
我們在建三個塊分別命名為lmage（圖片的意思）left（左）right（右）
我們在給這三個塊寫上css樣式
讓我們看看效果吧
讓我們再給右內容區寫的東西吧
我們再寫上四個塊
我們給這四個塊寫上css樣式
.kuai1{
width: 50%;
height:50%;
background: #bcdbcd;
}
.kuai2{
width: 50%;
height:50%;
float: left;
background: #cdfcdf;
}
.kuai3{
width: 50%;
height:50%;
background: #defdef;
}
.kuai4{
width: 50%;
height:50%;
background: #efbefb;
}
這是我們會發現板塊亂了怎么辦，別擔心現在教給你新知識那就是浮動代碼
/*float:為浮動代碼;（意為漂浮起來）*/
/*float:left;(向左浮動)float:right;(向右浮動)*/
讓我們看看效果如何把
是不是很漂亮呢
好了現在我們就回顧一下這節課的知識點吧
<!--網站編碼為utf-8-->
<meta charset="utf-8">
<!--這為網站標題-->
<title>html框架</title>
/*width:為寬度;height :為高;background:為網站背景;（也可以用color表示）css樣式要以;結尾*/
/*margin:上邊距 右邊距 下邊距 左邊距;margin:0 auto; 0就是塊離瀏覽器上邊框的距離為0個像素點，auto為塊自動居中*/
/*也可以用margin-left：左邊距;margin-right: 右邊距;margin-top: 上邊距;margin-bottom: 下邊距;*/
/*float:為浮動代碼;（意為漂浮起來）*/
/*float:left;(向左浮動)float:right;(向右浮動)*/
<!--這為div（塊）-->
<div class="header"></div>
<div class="body">
<div class="lmage"></div>
<div class="left"></div>
<div class="right">
<div class="kuai1"></div>
<div class="kuai2"></div>
<div class="kuai3"></div>
<div class="kuai4"></div>
</div>
</div>
<div class="footer"></div>
<!--class為塊名稱也可以用//id//,//name//為名稱-->
今，CSS框架越來越受歡迎，可以說已經應用到每一個網站上了。作為開發工具，CSS框架一直處于不斷進化和改進的狀態，因此我們強烈建議您關注眼下的趨勢。這篇文章會帶您了解2017年最流行的5種CSS框架。
1.Bootstrap
這個框架是GitHub的明星產品之一，被認為是擁有最好的響應性的CSS框架。專為前端開發而設計，有助于構建web設計理念、移動優先項目、網格系統、排版和按鈕等。
Bootstrap沒有任何附加功能，但是有第三方插件可用，除了常規的HTML元素，還具有其他常見的UI元素。其核心原則是RWD和mobile first。Bootstrap版本3支持各種瀏覽器(最新版本)，并且自Bootstrap 2開始，框架支持響應式網頁設計。Bootstrap 4版本目前正在開發中。
Bootstrap非常受歡迎，但并不是說他比其他的框架要好。大多數人用它是因為它的受歡迎程度，由于這一點，有很多資源可用(如教程，額外的插件等)，使得使用Bootstrap更容易。
2.Foundation
Foundation是一個開源項目，是CSS框架界的另一巨頭。眾所周知，它得流暢性和響應性非常好，可以用于許多用途：構建網站、創建電子郵件模板、構建移動和web應用程序。
這個框架對用戶也非常友好，提供了培訓、支持和咨詢等服務。還有一些獨特的組件(擊鍵，Joyride，Flex視頻等)和一些附加組件。其核心原則除了RWD和mobile first，還包括semantic。
Foundation以完美的工作流程和開發人員的大力支持為自己贏得了巨大的利潤。它是一個非常專業的框架，并提供了大量可用的教程，用戶能夠隨時了解Foundation。
3.Bulam
Bulam開放源碼、免費并且節約開發人員的時間。由于學習起來和使用非常簡單，因此最近變得非常流行。
首先，Bulma包含很棒的UI組件，如選標簽、導航欄、框和面板等等，因為此框架旨在為用戶提供清晰而有吸引力的UI。其次，Bulma非常的模塊化，用戶可以只導入所需的功能。 最后，這個框架的類可讀性很高，這點對于一些開發者來說可能是非常具有吸引力的。
Bulma易于理解和使用簡單，同時它具有所有必要的功能，幫助您高效的創建出優質產品。
4. Ulkit
可能沒有多少人知道(使用)這個框架，但它與其他類似框架具有相同的功能。
Ulkit是輕量級和模塊化的，用于創建快速但功能強大的Web界面。 Ulkit基本上是一組易于定制的組件集合，具有HTML Editor、Flex、其他附加組件和獨特的組件。它的核心原則是RWD和mobile first，Ulkit廣泛應用于WordPress主題中。使您能夠靈活的進行手動定制機制。
5. Semantic UI
從名稱就能猜出，Semantic UI旨在使網站構建過程更加語義化。核心特征是利用自然語言原理使代碼更易于閱讀，更容易理解。
核心原則是標簽矛盾、語義和響應能力。這個框架是將語句和類作為可交換的組件來處理，并使用直觀的JS和簡單的調試。
Semantic UI的好處在于，它提供了組織良好的文檔和網站，并提供了使用指南。簡而言之，它有3000多個主題變量，50多個UI組件，以及5000多個提交。絕對值得一試。是創建頁面漂亮、反應靈敏的網站的不錯之選擇。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
