整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頁布局對改善網站的外觀非常重要。
請慎重設計您的網頁布局。
實例
使用 <div> 元素的網頁布局
[demo]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}
div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}
div#footer {background-color:#99bbbb;clear:both;text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0;font-size:18px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright W3School.com.cn</div>
</div>
</body>
</html>
[/demo]
如何使用 <div> 元素添加布局。
使用 <table> 元素的網頁布局
[demo]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
Copyright W3School.com.cn</td>
</tr>
</table>
</body>
</html>
[/demo]
如何使用 <table> 元素添加布局。
網站布局
大多數網站會把內容安排到多個列中（就像雜志或報紙那樣）。
可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。
提示：即使可以使用 HTML 表格來創建漂亮的布局，但設計表格的目的是呈現表格化數據 - 表格不是布局工具！
HTML 布局 - 使用 <div> 元素
div 元素是用于分組 HTML 元素的塊級元素。
下面的例子使用五個 div 元素來創建多列布局：
實例
[demo]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div#container{width:500px}
div#header {background-color:#99bbbb;}
div#menu {background-color:#ffff99; height:200px; width:100px; float:left;}
div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;}
div#footer {background-color:#99bbbb; clear:both; text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0; font-size:14px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Main Title of Web Page</h1>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here</div>
<div id="footer">Copyright W3School.com.cn</div>
</div>
</body>
</html>
[/demo]
上面的 HTML 代碼會產生如下結果：
使用 div 和 CSS 進行布局
HTML 布局 - 使用表格
使用 HTML <table> 標簽是創建布局的一種簡單的方式。
可以使用 <div> 或者 <table> 元素來創建多列。CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀。
提示：即使可以使用 HTML 表格來創建漂亮的布局，但設計表格的目的是呈現表格化數據 - 表格不是布局工具！
下面的例子使用三行兩列的表格 - 第一和最后一行使用 colspan 屬性來橫跨兩列：
實例
[demo]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#99bbbb;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ffff99;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#99bbbb;text-align:center;">
Copyright W3School.com.cn</td>
</tr>
</table>
</body>
</html>
[/demo]
上面的 HTML 代碼會產生以下結果：
使用表格進行布局
HTML 布局 - 有用的提示
提示：使用 CSS 最大的好處是，如果把 CSS 代碼存放到外部樣式表中，那么站點會更易于維護。通過編輯單一的文件，就可以改變所有頁面的布局。如需學習更多有關 CSS 的知識，請訪問我們的 CSS 教程。
提示：由于創建高級的布局非常耗時，使用模板是一個快速的選項。通過搜索引擎可以找到很多免費的網站模板（您可以使用這些預先構建好的網站布局，并優化它們）。
HTML 布局標簽
標簽 描述
<div> 定義文檔中的分區或節（division/section）。
<span> 定義 span，用來組合文檔中的行內元素。
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。
實例
垂直框架
[demo]
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
[/demo]
本例演示：如何使用三份不同的文檔制作一個垂直框架。
水平框架
[demo]
<html>
<frameset rows="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
[/demo]
本例演示：如何使用三份不同的文檔制作一個水平框架。
框架
通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱為一個框架，并且每個框架都獨立于其他的框架。
使用框架的壞處：
開發人員必須同時跟蹤更多的HTML文檔
很難打印整張頁面
框架結構標簽（<frameset>）
框架結構標簽（<frameset>）定義如何將窗口分割為框架
每個 frameset 定義了一系列行或列
rows/columns 的值規定了每行或每列占據屏幕的面積
編者注：frameset 標簽也被某些文章和書籍譯為框架集。
框架標簽（Frame）
Frame 標簽定義了放置在每個框架中的 HTML 文檔。
在下面的這個例子中，我們設置了一個兩列的框架集。第一列被設置為占據瀏覽器窗口的 25%。第二列被設置為占據瀏覽器窗口的 75%。HTML 文檔 "frame_a.htm" 被置于第一個列中，而 HTML 文檔 "frame_b.htm" 被置于第二個列中：
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
基本的注意事項 - 有用的提示：
假如一個框架有可見邊框，用戶可以拖動邊框來改變它的大小。為了避免這種情況發生，可以在 <frame> 標簽中加入：noresize="noresize"。
為不支持框架的瀏覽器添加 <noframes> 標簽。
重要提示：不能將 <body></body> 標簽與 <frameset></frameset> 標簽同時使用！不過，假如你添加包含一段文本的 <noframes> 標簽，就必須將這段文字嵌套于 <body></body> 標簽內。（在下面的第一個實例中，可以查看它是如何實現的。）
更多實例
如何使用 <noframes> 標簽
[demo]
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
<noframes>
<body>您的瀏覽器無法處理框架！</body>
</noframes>
</frameset>
</html>
[/demo]
本例演示：如何使用 <noframes> 標簽。
混合框架結構
[demo]
<html>
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html>
[/demo]
本例演示如何制作含有三份文檔的框架結構，同時將他們混合置于行和列之中。
含有 noresize="noresize" 屬性的框架結構
[demo]
<html>
<frameset cols="50%,*,25%">
<frame src="/example/html/frame_a.html" noresize="noresize" />
<frame src="/example/html/frame_b.html" />
<frame src="/example/html/frame_c.html" />
</frameset>
</html>
[/demo]
本例演示 noresize 屬性。在本例中，框架是不可調整尺寸的。在框架間的邊框上拖動鼠標，你會發現邊框是無法移動的。
導航框架
[demo]
<html>
<frameset cols="120,*">
<frame src="/example/html/html_contents.html">
<frame src="/example/html/frame_a.html" name="showframe">
</frameset>
</html>
[/demo]
本例演示如何制作導航框架。導航框架包含一個將第二個框架作為目標的鏈接列表。名為 "contents.htm" 的文件包含三個鏈接。
內聯框架
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<iframe src="./imagecopy1234567890/test.jpg"></iframe>
<p>一些老的瀏覽器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可見的。</p>
</body>
</html>
[/demo]
本例演示如何創建內聯框架（HTML 頁中的框架）。
跳轉至框架內的一個指定的節
[demo]
<html>
<frameset cols="20%,80%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/link.html#C10">
</frameset>
</html>
[/demo]
本例演示兩個框架。其中的一個框架設置了指向另一個文件內指定的節的鏈接。這個"link.htm"文件內指定的節使用 <a name="C10"> 進行標識。
使用框架導航跳轉至指定的節
[demo]
<html>
<frameset cols="180,*">
<frame src="/example/html/content.html">
<frame src="/example/html/link.html" name="showframe">
</frameset>
</html>
[/demo]
本例演示兩個框架。左側的導航框架包含了一個鏈接列表，這些鏈接將第二個框架作為目標。第二個框架顯示被鏈接的文檔。導航框架其中的鏈接指向目標文件中指定的節。
用 CSS 框架是當前大部分前后端開發人員都會選擇的，CSS框架的好處是幫開發人員節省了開發時間，提高了工作效率，改善用戶體驗，并且能很好的解決各種瀏覽器之間的兼容性問題。當然也會存在代碼冗余，影響網站打開速度，但是對于好處來說這些問題都不是問題。
接下去我會分享我所知道的所有的CSS框架，盡量把網絡上現有的框架都收集起來，方便網友們的選擇和比較。（框架順序不代碼框架的好壞）
www.bootcss.com
Bootstrap 就不多做介紹了屬于老牌框架了，國內教程地址：www.bootcss.com（非官網），該網站目前已經整理了從2.0~5.0的所有教程資料。
www.layui.com
layui國人開發。layui是一套開源的 Web UI 解決方案，采用自身經典的模塊化規范，并遵循原生 HTML/CSS/JS 的開發方式，極易上手，拿來即用。其風格簡約輕盈，而組件優雅豐盈，從源代碼到使用方法的每一處細節都經過精心雕琢，非常適合網頁界面的快速開發。layui 區別于那些基于 MVVM 底層的前端框架，卻并非逆道而行，而是信奉返璞歸真之道。準確地說，它更多是面向后端開發者，你無需涉足前端各種工具，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這里信手拈來。
semantic-ui.com
Semantic UI—完全語義化的前端界面開發框架，跟 Bootstrap 和 Foundation 比起來，還是有些不同的，在功能特性上、布局設計上、用戶體驗上均存在很多差異。
bulma.io
作為一個基于Flexbox的開源框架，Bulma在全世界擁有超過20萬名開發用戶。它可以通過可視化的組件，讓開發人員了解其運作的過程。該前端框架通過各種技術，為前端開發人員提供了一種內聚(cohesive)的界面。此外，由于它使用了響應式模板，因此我們可以更好地專注于網站的內容，而不是代碼的編寫。
www.purecss.cn
由Yahoo開發的PureCSS，提供了一組體積小、且具有快速響應能力的CSS模塊。它非常適合開發那些界面美觀且功能不同的項目。PureCSS具有快速響應能力的內置設計，以及最小體積的標準化CSS，而且它們都是免費的!
www.tailwindcss.cn
Tailwind CSS 是一個功能類優先的 CSS 框架,它由 Adam Wathan 創建。本站提供 Tailwind CSS 官方文檔中文翻譯致力于為廣大國內開發者提供準確的中文文檔,助力開發者掌握并使用這一框架。
www.axui.cn
ax前端框架的特點是：能用css寫的不用js；能用js寫的不用插件；能用插件的不重復使用插件。通過觀察本框架的核心文件會發現核心文件只有ax.css和ax.js，加載速度飛快。ax前端框架對一些常用的功能進行集成處理，比如美化滾動條、菜單、cookie等，在演示頁面復制代碼即可使用。
Amaze UI
Amaze UI 以移動優先（Mobile first）為理念，從小屏逐步擴展到大屏，最終實現所有屏幕適配，適應移動互聯潮流。
get.foundation
Foundation 是一個適用于任何設備、媒介和可訪問性的框架。Foundation是一個響應式前端框架系列，它可以讓你輕松設計出漂亮的響應式網站、應用程序和電子郵件，在任何設備上看起來都非常漂亮。Foundation具有語義性、可讀性、靈活性和完全可定制性。
www.openzui.com
一個基于 Bootstrap 深度定制開源前端實踐方案，幫助你快速構建現代跨屏應用。
getuikit.com
UIkit 是 YOOtheme 團隊開發的一款輕量級、模塊化的前端框架，可快速構建強大的web前端界面。UIKit 提供了全面的 HTML、CSS 及 JS 組件，它們使用簡單，容易定制和擴展。
www.pintuer.com
拼圖前端框架 Pintuer.com：國內優秀的HTML、CSS、JS跨屏響應式開源前端框架，使用最新瀏覽器技術，為快速的前端開發提供一系列的顏色、文本、排版、內容、媒體、按鈕、表單、元件、導航、組件等樣式工具包，占用資源小，使用拼圖可以快速構建簡潔、優雅而且自動適應手機、平板、桌面電腦等設備的前端界面，讓前端開發像玩拼圖游戲一下輕松靈活。
www.h-ui.net
H-ui前端框架系統是基于 HTML、CSS、JAVASCRIPT開發的輕量級web前端框架。H-ui是根據中國現階段網站特性和程序員開發習慣，在bootstrap基礎上，吸取眾家框架之長，融合開發者自己的思想，進行深度開發，提煉出一套適合中國開發者的HTML和CSS規范。開源免費，簡單靈活，兼容性好，一經推出深受國內廣大web開發者喜愛。
ui.kuaping.com
如果說Boostrap提供了一個可靠的網頁元素UI組件，來構建一個網頁，那么跨屏UI框架，則在bootstrap基礎上提供了更為完整的網頁組件，例如“關于我們”、“聯系我們”，“相冊”，“產品”等等組件。
milligram.io
Milligram雖然非常輕小，但功能依舊不差，它具有一整套web開發工具，并且充分利用了CSS3規范中的各種原理來幫助開發人員快速開發。
暫時收集了這些框架，你可以根據實際項目的需求，進行選擇，正式使用之前請先測試代碼，確保你采用的框架不會出現CSS或HTML的瀏覽器兼容性問題。
~~~感謝閱讀，順便點個贊，歡迎關注【Yimao軟件】，謝謝~~~
聯網的迅速發展，軟件行業成了更多年輕人的就業選擇。HTML5簡單易學門檻低，是Web時代前端開發超好用的工具。而HTML5開發人員的就業薪資也遠遠高于其他行業。
資料顯示，初級HTML5開發人員的平均薪資在8K-10K左右，擁有一定工作經驗的人薪資普遍達到15K-20K。如此廣闊的前景當然吸引了無數專業或非專業人士的加入。HTML5用途范圍廣，下面小編就來給大家分享常見的HTML5框架。
HTML5基礎入門之常見的HTML5框架有哪些?
1、Siimpler
Siimpler 是個簡單的 HTML 開發框架，他可以通過選擇你自己喜歡的部分，來幫助你迅速又簡單地創建 HTML5 開發結構。網絡設計者們也可以通過使用 Siimpler 框架類的文件和文件夾來無縫的開始一個 Web 項目。
2、Ionic
Ionic 是個神奇的框架和強大前端開源系統，使用先進的Web技術，比如CSS、HTML 和 JS 來創建令人驚嘆的手機應用。
3、Foundation
Foundation 是世界上精妙的前端響應框架，同時，它可以兼容所有的瀏覽器和網絡設備。Foundation 擁有移動友好型的用戶接口，設置了許多關鍵特性。
4、Enyo
Enyo是一個開源的 Jaa 框架，該框架能夠讓你創建頂級的 HTML5 應用程序，該應用程序能夠運行在各種各樣的電子設備上，比如說手機、臺式機、筆記本、電視以及Web應用。
5、LimeJS
針對于所有的新的桌面瀏覽器和觸屏設備，LimeJS 對于有用戶經驗的游戲開發者而言是教好的和較強大的開發框架。
6、Bootstrap
Bootstrap能讓所有開發者都能迅速上手、所有設備都可以適配、所有項目都適用。此外，bootstrap的官網也有很多教程提供。
7、juery UI
juery UI 主要分為交互、微件和效果庫3個部分，主打代碼開源，操作繼承了juery 的簡單特性，兼容各主流桌面瀏覽器。
前端HTML5是當下很多企業都會用到的軟件開發，HTML5是移動互聯網前端的主流開發語言，目前還沒有任何一種前端開發技術能夠取代HTML5。因此，無論是PC端還是APP端的應用，前端樣式都離不開HTML5.
從手機與電腦上網的使用率來看，從事HTML5或者Web相關的開發工作，就業前景還是比較可觀的。而且，現在的網站開發都往移動設備上轉移，所以HTML5或者Web前端是眾望所歸。
小編是一個有著5年工作經驗的架構師，關于web前端，自己有做材料的整合，一個完整學習web前端的路線，學習材料和工具。需要的伙伴可以私信我，發送“前端”等3秒后就可以獲取領取地址，免費送給大家。對于學習web前端有任何問題（學習方法，學習效率，如何就業）都可以問我。希望你也能憑自己的努力，成為下一個優秀的程序員！
這7個框架，你都會用嗎？
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
