目錄：
首頁動態效果圖展現
組件介紹
動手開發--新建模塊（Module）
動手開發--技術棧分析
動手開發--代碼編寫--添加tabs容器
動手開發--代碼編寫--修改焦點和tab的默認索引
本章小結 css
首頁模塊開發之一
首頁動態效果圖展現html
效果圖分解css3
知識點講解：git
佈局說明：web
JS UI框架中智慧屏以720px（px指邏輯像素，非物理像素）爲基準寬度，根據實際屏幕寬度進行縮放，例如當width設爲100px時，在寬度爲1440物理像素的屏幕上，實際顯示的寬度爲200物理像素。智能穿戴的基準寬度爲454px，換算邏輯同理。api
一個頁面的基本元素包含標題區域、文本區域、圖片區域等，每一個基本元素內還能夠包含多個子元素，開發者根據需求還能夠添加按鈕、開關、進度條等組件。在構建頁面佈局時，須要對每一個基本元素思考如下幾個問題：瀏覽器
該元素的尺寸和排列位置框架
是否有重疊的元素工具
是否須要設置對齊、內間距或者邊界佈局
是否包含子元素及其排列位置
是否須要容器組件及其類型
將頁面中的元素分解以後再對每一個基本元素按順序實現，能夠減小多層嵌套形成的視覺混亂和邏輯混亂，提升代碼的可讀性，方便對頁面作後續的調整。
組件介紹：
組件（Component）是構建頁面的核心，每一個組件經過對數據和方法的簡單封裝，實現獨立的可視、可交互功能單元。組件之間相互獨立，隨取隨用，也能夠在需求相同的地方重複使用。開發者還能夠經過組件間合理的搭配定義知足業務需求的新組件，減小開發量，自定義組件的開發方法詳見後面的自定義組件。
組件分類
根據組件的功能，能夠將組件分爲如下四大類：
動手開發--新建模塊（Module）：
注意：我這裏省去了HelloWorld工程的建立，若是不會HelloWorld的請自行查看官網工具使用介紹。爲了更好的按部就班演示項目的迭代成型，我這裏用一個Module爲一個demo代碼進行編寫，下一個demo的Module會在前一個的基礎上進行開發，直到最後項目成型。
若是您已經建立好了一個TV 版JS UI開發的HelloWorld工程，請參照下面的步驟建立一個Module
給本身模塊取個名字，注意名字首個字符爲字母，而且不要包含特殊字符，我這裏取名爲IcollegeTVDemo1，創新好以後的工程結構以下圖
項目建立完成以後，推薦你們使用git進行託管起來哦！
動手開發--技術棧分析：
咱們已經把佈局作好了切割，而且對鴻蒙系統JS UI開發作了簡單介紹，下面咱們來選取合適的容器和組件進行開發。
首先整個頁面時放置在一個根容器div裏面，該div採用垂直方向至上而下佈局，頁面裏面的頂部採用div容器水平居右排列，該div內部放置一個搜索框和一張用戶圖片。而後該div下面放置一個tabs容器，可以經過點擊tab切換子頁面，而且滑動子頁面可以切換tab標籤。
思考：
一、div容器如何使用？如何橫向排列和縱向排列，如何設置居中、居左、居右，如何設置寬度和高度，如何設置留白空間。
二、tabs容器如何使用，如何添加tabs標籤，如何添加子頁面，如何讓tab標籤變化跟隨子頁面變化？
解決思路：查找鴻蒙官方API手冊
div容器api介紹地址：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-div-0000000000611484
tabs容器api介紹地址：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-container-tabs-0000000000611572
做爲一個開發者，最好的方式就是多閱讀官方API，我也是通讀了好幾遍以後纔開始着手這個項目開發的
動手開發--代碼編寫--添加頂部佈局：
編寫Module下的index.hml代碼：
<div class="container">
<div class="top">
<search class="search" focusable="false"></search>
<image src="common/image/user.png" class="user" ></image>
</div>
</div>
重點講解：
注意該文件後綴是hml，並非html。它裏面的組件是由鴻蒙底層使用c語言編寫封裝而成的，並非html中的標籤，因此必定不要想着把html裏的標籤在這裏面寫，好比<ul>和<li>標籤，在hml裏面就沒有這個組件，具體能使用哪些組件請以鴻蒙官方api手冊爲準。
<div>是容器組件，通常用來承載組件。
<image>是圖片組件，用來添加圖片，src指定圖片路徑，這裏指定的本地路徑，須要先在common目錄下建立image文件夾，而且放置相應圖片。
<search>是搜索組件。
編寫index.css代碼：
.container {
flex-direction: column;
padding-left: 10px;
align-items:flex-start;
}
.top {
flex-direction: row;
height: 36px;
justify-content:flex-end;
align-items: center;
}
.user {
height:32px;
width: 32px;
margin-right: 20px;
}
.search{
width: 200px;
height:32px;
padding: 5px;
}
重點講解：
JS UI佈局方式默認採用的是flex佈局，這個佈局與web開發中的css3裏面的flex基本一致，只是有個別屬性在鴻蒙中不存在，具體屬性以鴻蒙官網手冊爲準。
flex-direction是主軸排列方向及內部組件排列方向，column是豎直方向排列，row是水平方向排列。詳細瞭解請看另外一篇flex佈局詳解以及官方api介紹。
align-items是定義子組件如何在交叉軸上對齊
justify-content：定義了子組件如何在主軸上對齊
此時咱們來查看下運行效果
當寫好代碼以後，咱們能夠在模擬器中運行查看效果，根據效果再來修改代碼，注意模擬器是沒有像瀏覽器F12那種直接調試標籤和css樣式的功能的。
小技巧：若是想調整css細節，能夠給組件加上不一樣顏色的border邊框，來觀察細節
做者：軟通夏德旺
想了解更多內容，請訪問： 51CTO和華爲官方戰略合做共建的鴻蒙技術社區https://harmonyos.51cto.com