色彩

ionic定義了九種前景/背景/邊框的色彩樣式，：

可以在任何元素上使用這些樣式設定前景和背景顏色：

1. <any class="positive-bg energized">
2. ...
3. </any>

圖示

ionic使用ionicons圖示樣式庫。ionicons採用了TrueType 字型實現圖示樣式，有超過500個圖示可供選擇。

使用圖示很簡單，在元素上宣告以下兩個CSS類即可：

• .icon - 將元素宣告為圖示
• .ion-{icon-name} - 宣告要使用的具體圖示

通常使用i元素定義圖示，例如下面聲明瞭元素顯示ion-home圖示：

1. <i class="icon ion-home"></i>

要了解有哪些圖示及具體名稱，需要訪問ionics.com。 點選某個圖示即可檢視其CSS類名稱。

可以在任何元素中插入圖示，使用元素的font-size樣式指定圖示的大小：

1. <any style="font-size:100px;">
2. <i class="icon ion-search"></i>
3. </any>

內邊距

ionic定義了常用的內邊距樣式：

樣式名很直白，邊距統一為10px。可以在任何元素上應用這些樣式。

列表 : .list

列表非常適合於手機螢幕上的資訊的顯示。使用.list定義列表容器， 使用.item定義列表成員：

1. <any class="list">
2. <any class="item">...</any>
3. <any class="item">...</any>
4. <any class="item">...</any>
5. <any class="item">...</any>
6. </any>

對列表外觀的定製化主要集中在.item元素上，.list元素僅有 少數的幾個樣式定義：

成員容器 : .item

列表的樣式定製主要發生在.item元素上。在.item元素內， 可以插入文字、徽章、圖示、影象（頭像、縮圖或大圖）、按鈕等各種 樣式的元素：

.item : 嵌入文字

列表成員中經常需要顯示不同規格的文字，比如今日頭條的新聞列表：

.item元素可以使用h1~h6/p標籤插入不同規格的文字。

.item : 嵌入圖示

列表成員的內容中插入圖示，比單純的文字更加生動：

要插入圖示，需要滿足兩個條件：

1. 在.item元素上宣告圖示位置。圖示可以位於列表的左側或右側， 分別使用.item-icon-left和.item-icon-right宣告
2. 在.item元素內插入圖示。

.item : 嵌入頭像

很多社交App中，一個相當固定的UI模式是包含使用者頭像的資訊列表：

在ionic中，頭像被設定為40x40固定大小。和插入圖示類似，向.item 中插入頭像需要滿足兩個條件：

1. 在.item元素上宣告頭像位置。頭像可以位於列表的左側或右側， 分別使用.item-avatar-left和.item-avatar-right宣告
2. 在.item元素內使用img標籤插入頭像。

.item : 嵌入縮圖

回到今日頭條的新聞列表，我們給它加上兩張新聞圖片：

在ionic中，縮圖被定義為80px大小，比頭像大，適合新聞圖片。 和插入頭像類似，向.item中插入縮圖需要滿足兩個條件：

1. 在.item元素上宣告縮圖位置。縮圖可以位於列表的左側或右側， 分別使用.item-thumbnail-left和.item-thumbnail-right宣告
2. 在.item元素內使用img標籤插入頭像。

注意：將img標籤放到.item內容的開頭！

.item : 嵌入大圖

大圖非常有衝擊力，在圖片類App中很常見：

源引：http://www.cnblogs.com/xuema/p/4371857.html