1、定高條塊：.bar
樣式.bar将元素聲明為螢幕上絕對定位的塊狀區域，具有 固定的高度（44px）：
ionic樣式學習（一）1、定高條塊：.bar2、.bar : 位置3、标題欄搜尋框.bar中加入input4、内容：.content和.scroll-content5、色彩6、圖示7、内邊距8、清單9、成員容器 : .item10、.item : 嵌入文本11、.item : 嵌入圖示12、.item : 嵌入頭像13、.item : 嵌入縮略圖14、.item : 嵌入大圖
2、.bar : 位置
ionic使用以下樣式定義條塊的位置：
- .bar-header - 置頂
- .bar-subheader - header之下置頂
- .bar-footer - 置底
- .bar-subfooter - footer之上置底
在騰訊新聞App中，你可以看到，使用了三個條塊：标題、副标題、頁腳：
<div class="bar bar-subheader bar-stable">
<div class="button-bar">
<a class="button button-balanced">要聞</a>
<a class="button button-clear">财經</a>
<a class="button button-clear">娛樂</a>
<a class="button button-clear">體育</a>
<a class="button button-clear">科技</a>
</div>
</div> bar-stable可以讓文字顔色加深
3、标題欄搜尋框.bar中加入input
<body class="stable-bg">
<div class="bar bar-header bar-energized item-input-inset">
<a class="button button-clear icon-right ion-android-arrow-dropdown">北京</a>
<label class="item-input-wrapper">
<input type="text" placeholder="輸入商戶名搜尋">
</label>
</div>
<div class="bar bar-footer bar-dark">
</div>
</body> 在.bar元素中嵌入input元素，需要注意兩點：
- 在條塊元素上應用.item-input-inset樣式
- 将input包裹在應用.item-input-wrapper樣式的元素内
這是因為，在ionic的實作中，.bar中的.input樣式定義如下：
.bar.item-input-inset{ .item-input-wrapper{ .input{ ... } }}
4、内容：.content和.scroll-content
ionic預定義了兩個内容容器樣式：
- .content - 流式定位，内容元素在文檔流中按順序定位
- .scroll-content - 絕對定位，内容元素占滿整個螢幕
這兩種樣式都可以使用以下樣式進一步确定位置及範圍：
<body class="stable-bg">
<div class="bar bar-header">
<h1 class="title">.bar .bar-header</h1>
</div>
<div class="scroll-content has-header balanced-bg light">
<p>This is a demo!</p>
<p>Can you see this line?</p>
</div>
<div class="bar bar-footer">
<h1 class="title">.bar .bar-footer</h1>
</div>
</body> 去掉scroll-content的效果
去掉has-header的效果
5、色彩
6、圖示
ionic使用ionicons圖示樣式庫。ionicons采用了TrueType字型實作圖示樣式，有超過500個圖示可供選擇。
使用圖示很簡單，在元素上聲明以下兩個CSS類即可：
- .icon - 将元素聲明為圖示
- .ion-{icon-name} - 聲明要使用的具體圖示
通常使用i元素定義圖示，例如下面聲明了元素顯示ion-home圖示：
<i class="icon ion-home"></i>
要了解有哪些圖示及具體名稱，需要通路ionics.com。 點選某個圖示即可檢視其CSS類名稱。
可以在任何元素中插入圖示，使用元素的font-size樣式指定圖示的大小：
<any style="font-size:100px;"> <i class="icon ion-search"></i></any>
7、内邊距
ionic定義了常用的内邊距樣式：
樣式名很直白，邊距預設統一為10px。可以在任何元素上應用這些樣式。
8、清單
對清單外觀的定制化主要集中在.item元素上，.list元素僅有 少數的幾個樣式定義：
<div class="scroll-content has-header">
<ul class="list">
<li class="item">Battletoads</li>
<li class="item">Contra</li>
<li class="item">Duck Tales</li>
<li class="item">Mega Man</li>
<li class="item">Metroid</li>
<li class="item">Mike Tyson's Punch-Out</li>
</ul>
</div> 在 list 樣式上加三種樣式的效果
list-borderless
list-inset
card
9、成員容器 : .item
清單的樣式定制主要發生在.item元素上。在.item元素内， 可以插入文本、徽章、圖示、圖像（頭像、縮略圖或大圖）、按鈕等各種 樣式的元素：
<div class="scroll-content has-header">
<ul class="list">
<li class="item">Battletoads<i class="badge badge-positive">123</i></li>
<li class="item">Contra<i class="badge badge-stable">15</i></li>
<li class="item">Duck Tales</li>
<li class="item">Mega Man</li>
<li class="item">Metroid</li>
<li class="item">Mike Tyson's Punch-Out<i class="badge badge-positive">20</i></li>
</ul>
</div> 10、.item : 嵌入文本
.item元素可以使用h1~h6/p标簽插入不同規格的文本。
11、.item : 嵌入圖示
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<link rel="stylesheet" type="text/css" href="ionic.min.css" target="_blank" rel="external nofollow" >
</head>
<body>
<div class="bar bar-header bar-positive">
<button class="button icon ion-ios-arrow-left">傳回</button>
<h1 class="title">酒店搜尋</h1>
<button class="button">首頁</button>
</div>
<div class="scroll-content has-header">
<div class="list list-inset">
<div class="item item-icon-left item-icon-right">
<i class="icon ion-location"></i>
<h2>入住城市：目前位置</h2>
<i class="icon ion-ios-arrow-right"></i>
</div>
<div class="item item-icon-left item-icon-right">
<i class="icon ion-calendar"></i>
<h2>入住日期：7月27日 星期五</h2>
<i class="icon ion-ios-arrow-right"></i>
</div>
<div class="item item-icon-left item-icon-right">
<i class="icon ion-social-yen"></i>
<h2>價格範圍：不限價格</h2>
<i class="icon ion-ios-arrow-right"></i>
</div>
</div>
<div class="padding">
<button class="button button-block button-assertive">搜尋</button>
</div>
</div>
</body>
</html> 注意兩個寫法：
1、以後可以用這種寫法産生一行空格間隙。
<div class="padding">
<button class="button button-block button-assertive">搜尋</button>
</div>
2、分别寫兩個樣式，分别控制兩個左右的圖示
<div class="item item-icon-left item-icon-right">
<i class="icon ion-location"></i>
<h2>入住城市：目前位置</h2>
<i class="icon ion-ios-arrow-right"></i>
</div>
12、.item : 嵌入頭像
在ionic中，頭像被設定為40x40固定大小。和插入圖示類似，向.item中插入頭像需要滿足兩個條件：
- 在.item元素上聲明頭像位置。頭像可以位于清單的左側或右側， 分别使用.item-avatar-left和.item-avatar-right聲明
- 在.item元素内使用img标簽插入頭像。
<div class="scroll-content has-header">
<div class="list">
<div class="item item-avatar">
<img src="img/a-1.jpg">
<h2>Venkman</h2>
<p>我們周末去爬山吧！</p>
</div>
<div class="item item-avatar">
<img src="img/a-2.jpg">
<h2>Ray</h2>
<p>真的好好吃啊...</p>
</div>
<div class="item item-avatar">
<img src="img/a-3.jpg">
<h2>Egon</h2>
<p>什麼時候去看演唱會啊，...</p>
</div>
<div class="item item-avatar">
<img src="img/a-4.jpg">
<h2>Winston</h2>
<p>I love this game!</p>
</div>
</div>
</div> 13、.item : 嵌入縮略圖
在ionic中，縮略圖被定義為80px大小，比頭像大，适合新聞圖檔。 和插入頭像類似，向.item中插入縮略圖需要滿足兩個條件：
- 在.item元素上聲明縮略圖位置。縮略圖可以位于清單的左側或右側， 分别使用.item-thumbnail-left和.item-thumbnail-right聲明
- 在.item元素内使用img标簽插入頭像。
注意：将img标簽放到.item内容的開頭！否則就是下圖的效果
<div class="scroll-content has-header">
<ul class="list">
<li class="item">
<h2>國務院常務會議部署推進公司注冊資本登記制度改革</h2>
<p>中國青年報</p>
</li>
<li class="item item-thumbnail-right">
<img src="img/g-1.jpg">
<h2>大黃鴨在北京兩個月創收超兩億元 今日離京</h2>
<p>中國經營報</p>
</li>
<li class="item">
<h2>LinkedIn創始人：在見風投之前，我希望自己當時懂得這七件事...</h2>
<p>虎嗅網</p>
</li>
<li class="item item-thumbnail-right">
<img src="img/g-12.jpg">
<h2>美國男子為防妻分家産 将價值50萬美元黃金扔垃圾桶</h2>
<p>新浪新聞</p>
</li>
</ul>
</div> 14、.item : 嵌入大圖
<div class="scroll-content has-header">
<div class="list">
<div class="item item-avatar-left">
<img src="img/a-1.jpg">
<h2>Thomasguy</h2>
</div>
<div class="item item-image">
<img src="img/road.png">
</div>
<div class="item item-icon-left">
<i class="icon ion-thumbsup"></i>
<p>44 likes</p>
</div>
</div>
</div> 版權聲明：本文為CSDN部落客「weixin_33811539」的原創文章，遵循CC 4.0 BY-SA版權協定，轉載請附上原文出處連結及本聲明。
原文連結：https://blog.csdn.net/weixin_33811539/article/details/92100322