整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
頁布局分為：網頁頭部、網頁主題、網頁底部。
初學html時制作出來的頁面非常丑陋，是因為沒有添加CSS樣式和布局排版，完全按照元素自身的特性來排列元素。事實上，對于這些標簽還有一個專門的屬性來控制元素的顯示方式，是像div那樣快元素顯示，還是像span那樣行內顯示，這個屬性就是display屬性。
block快元素的默認值，inline行內元素的默認值，inline-block行內塊元素，none設置元素不會被顯示。
下面我們來做個一個頁面用float屬性來實現網頁的布局。
樣張圖片：
下面我們就用浮動來進行編輯代碼如下：
看一下css樣式表：
下面來看一下我們設計出來的效果：
布局差不多沒什么大的區別，小編現在也是初學者，希望提出建議
作者：潤邦網絡科技
小白，你最近看CSS的時候碰到position屬性了么？"
“碰到了，通過position可以改變容器的定位，我記得官方描述是這樣的：這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對于它在正常流中的默認位置偏移。”
“恩，不錯，今天咱說一下position里面的fixed類型吧，這個屬性值是讓容器基于瀏覽器窗口的絕對定位，在我們平時的制作中經常會碰到。”
老朱接著說：“給一個容器設定position為fixed以后，可以通過left、right、bottom、top進行四個方向的距離定位。現在我們在頁面中寫一個fixed容器，看一下代碼片段。”
“你看，這里我在body里面加了一個標識為foot的div，然后他的css里面把position設置成了fixed，并且bottom（距離底部）為0，這里的bottom是基于瀏覽器窗口的距離進行計算的，foot的寬和高也進行了設定。現在我們看一下效果！”
“你可以看到，拖動滾動條往下滾動網頁的時候，foot的位置并不會隨著滾動條的滾動發生改變，它就像是漂浮在那里一樣。這里的foot是一個div容器，所以它的內部我們還可以放任何你希望布局的內容，比如放一個圖片，或者其他的容器。”
“這里插入的圖片要想跟foot容器寬度一致，根據我們之前說過的對圖片css的操作，把圖片的寬度（width）設定為100%，圖片就會自動與父容器寬度一致了。”
小白突然想到了很多手機HTML5頁面下方都有導航條，問道：“很多手機的HTML5頁面里面下方的導航條不會隨著頁面的滾動而滾動，這種導航條是不是也通過fixed來設定的。”
“是的，跟這里的foot一樣，我們只需要把導航條的父容器設定為fixed就可以了。有個需要注意的地方是導航條會根據手機屏幕的分辨率自動占用屏幕寬度，所以我們在給foot設定css樣式的時候就不能設定寬度了。”
小白問道：“那應該怎么設定呢？”
老朱說：“你忘了我們剛說了fiex可以通過top、right、bottom、left設定四個方向的距離么？如果要讓一個fixed容器左右靠邊，我們只需要left為0，right為0，它就會自動匹配窗口的寬度。現在我們把之前的foot容器改一下。”
“通過設定bottom、left、right可以讓foot靠近底部并且保持與窗口寬度一致。然后我們在foot里面放了一個ul-li容器，讓li容器向左浮動并且寬度為父容器的25%，布局就會變成這樣。”
“網頁上的底部導航通常都會放入透明的png圖片，現在我們插入png圖，再進行一下css的調整。”
“網頁底部導航條，上面還會牽扯到鼠標事件，焦點樣式變化，這些知識我們隨后也會一一展開討論，今天先這樣吧！你先練習練習今天說的這些內容，然后試著做一個居中漂浮的層，看看能不能做出來！”
想學H5的朋友可以關注老爐，您的關注是我持續更新《小白HTML5成長之路》的動力！
onic是開源的移動應用開發框架，便于構建高質量的本地和網絡技術先進的web應用程序。Ionic是基于Angular，有許多顯著的性能提升，可用性和功能都在不斷的進行改進。只需要會一點前端知識就能玩轉Ionic。
Ionic的應用程序創建開發主要通過Ionic命令行實用工具(“CLI—命令行界面”)，并使用cordova構建和部署本地應用。建立Ionic項目，您需要安裝最新版本的CLI和cordova。在你這樣做之前，你需要一個node.js的最新版本。這些在我之前的文章有安裝教程。
官網地址：
http://ionicframework.com/
版本更新說明：
https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md
學習ionic需要了解的知識：
HTML5
CSS3
TypeScript（JavaScript）
Angular2+
下面是一些組件的示例，不同系統有不同的樣式，下面展示iOS上的。
動作表單-Action Sheets
時間選擇器-DateTime
浮動的按鈕-Floating Action Buttons
分割按鈕-Segment
Inputs-輸入框
表格布局-Grid
小芯片-Chip
彈窗對話框1-Alert
彈窗對話框2-Popover
想要查看更多的ionic組件示例，可以在App Store和Google Play下載Ionic2Components應用，該APP即為官方所有組件的展示。
組件在線演示地址：
http://ionicframework.com/docs/api/
組件只能作用在用戶與界面交互上，想要調用原生設備功能就需要cordova，他提供了一組設備相關的API，通過這組API，移動應用能夠以JavaScript訪問原生的設備功能，如攝像頭、麥克風、GPS等。在應用商店下載Ionic Native即可體驗部分插件。
離子原生包裝插件：
http://ionicframework.com/docs/native/
通過以上組件配合使用，即使只懂css3一點皮毛也能做出一個漂亮簡單的HTML5 APP，想要了解更多ionic，可以關注我或者在官網查看最新消息。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
