2. 程式人生 > >Ionic基礎——CSS佈局

Ionic基礎——CSS佈局

阿新 • • 發佈：2019-01-21

1)頭部/Header、內容/Content、底部/Footer:

  .bar .bar-header——宣告元素為頭部；

  .bar .footer——宣告元素為底部；

  .content/.scroll-content——宣告元素為內容區；

  .bar .bar-subheader——宣告元素為二級導航欄；

  .bar .bar-subfooter——宣告元素為二級底部欄；

  .bar-light等——設定bar的顏色；

  .title——宣告元素為標題；

  .bar .item-input-inset——設定bar為條塊元素並用於嵌入input；

  .item-input-wrapper——設定元素為input的包裹元素；

2)按鈕/button：

  .button-bar——宣告元素為工具欄，通常包含一組按鈕；

  .button——宣告元素為按鈕；

  .button-light等——設定button的顏色;

  .button-clear——設定button為無邊框背景透明樣式;

  .button-block——設定button充滿父元素，並保留邊框半徑及左右邊框，保留padding，讓元素有點呼吸空隙；

  .button-full——設定button完全充滿父元素，無左右邊框及邊框半徑。

  .button-small——小按鈕;

  .button-large——大按鈕；

  .button-outline——背景透明帶邊框按鈕；

3)圖示/icon

  .icon .ion-images等——獲取ionic的內建圖示；

  .icon-right——將icon圖示放在元素的內部右側；

4）樣式

   .light等——設定字型的顏色；

   .light-border等——設定按鈕等元素的邊框；

   .light-bg等——設定元素的背景色；

   .padding等——設定元素的內邊距；

   .has-header等——設定元素所處的位置;

  

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<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="../lib/css/ionic.min.css">
</head>
<body>
	<div class="bar bar-header bar-positive">
		<div class="button icon ion-ios-arrow-left"></div>
		<h1 class="title">今日頭條</h1>
		<div class="button icon ion-gear-b"></div>
	</div>
	<div class="bar bar-subheader bar-dark">

		<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>

    <div class="scroll-content has-header has-subheader padding">
		<div class="bar bar-energized item-input-inset">
			<a class="button button-clear icon-right ion-android-arrow-dropdown">北京</a>
			<label class="item-input-wrapper">
				<input class="light-bg" type="text" placeholder="搜尋內容">
			</label>
		</div>
		<h4 class="assertive royal-bg">IONIC 是目前最有潛力的一款 HTML5 手機應用開發框架。</h4>
		<button class="button button-block button-positive">
			Block Button
		</button>
		<button class="button button-full button-light">
			Full Button
		</button>
		<button class="button button-large button-assertive">
			Large Button
		</button>
		<button class="button button-small positive-border">
			Small Button
		</button>
		<button class="button button-outline button-positive">
			Outlined Button
		</button>
		<a class="button icon-left ion-gear-b calm">設定</a>
		<a class="button icon-left positive">
			<i class="icon ion-refresh"></i>重新整理
		</a>
    </div>
	<div class="bar bar-subfooter bar-light">
		<div class="button-bar">
			<a class="button button-clear icon ion-images">新聞</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>
	<div class="bar bar-footer bar-dark">
		<h1 class="title">您關心的就是頭條</h1>
	</div>
</body>
</html>

效果如下：


5)列表/list

  .list——定義元素為列表容器；

  .list-borderless——設定樣式為無邊框;

  .list-inset——設定樣式為邊框縮排;

  .card——設定樣式為邊框縮排並在下方新增陰影。

  .item——定義元素為列表成員；


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<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="../lib/css/ionic.min.css">
</head>
<body class="stable">
	<div class="bar bar-header bar-balanced">
		 <h1 class="title">城市列表</h1>
	</div>
	<div class="scroll-content has-header">
		<ul class="list">
			<li class="item">北京</li>
			<li class="item">上海</li>
			<li class="item">武漢</li>
		</ul>
		<ul class="list list-borderless">
			<li class="item">北京</li>
			<li class="item">深圳</li>
		</ul>
		<ul class="list list-inset">
			<li class="item">北京</li>
			<li class="item">深圳</li>
		</ul>
		<ul class="list card">
			<li class="item">北京</li>
			<li class="item">深圳</li>
		</ul>
	</div>
</body>
</html>
效果：


 .item-borderless——設定該列表成員為無邊框樣式；

 .item-light等——設定列表成員元素的顏色；

 .item-divider——設定該列表成員所佔行高減半，常用作分組；

 .item-button-left/right——設定按鈕位置居左/居右；

 .item-icon-left/right——設定圖示位置居左/居右；

 .item-thumbnail-left/right——設定縮圖位置居左/居右；

 .item-image——設定影象充滿列表成員；

 .barge——徽章；

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<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="../lib/css/ionic.min.css">
</head>
<body class="stable">
	<div class="bar bar-header bar-balanced">
		 <h1 class="title">列表/list</h1>
	</div>
	<div class="scroll-content has-header">
		<ul class="list list-inset">
			<li class="item item-divider item-positive">直轄市</li>
			<li class="item">北京</li>
			<li class="item item-button-right">天津
				<button class="button">修改</button>
			</li>
			<li class="item item-divider item-assertive">省會</li>
			<li class="item">武漢<i class="badge positive-bg light">15</i></li>
			<li class="item item-icon-left item-icon-right">
                <i class="icon ion-location"></i>
                <h2>深圳：當前位置</h2>
                <i class="icon ion-ios-arrow-right"></i>
            </li>
			<li class="item item-thumbnail-right">
				<img src="img/a-2.jpg">
				<h2>美國男子為防妻分家產, <br/>將價值50萬美元黃金扔垃圾桶</h2>
				<p>新浪新聞</p>
			</li>
			<div class="item item-avatar-left">
				<img src="img/a-1.jpg">
				<h2>papa醬</h2>
				<p>不是每個美女都愛錢...</p>
			</div>
			<div class="item item-image">
				<img src="img/bmw.jpg">
			</div>
			<div class="item item-icon-left">
				<i class="icon ion-thumbsup"></i>
				<p>44 贊</p>
			</div>
		</ul>
	</div>
</body>
</html>

6)表單/Forms

  .item-input——宣告元素為輸入框元件容器；

  .item-input-inset——設定輸入框元件容器為內嵌樣式；

  .item-stacked-label——設定為堆疊標籤樣式(分行)；

  .item-floating-label——設定為浮動標籤樣式；

  .item-checkbox——宣告元素為多選框元件容器；

  .item-radio——宣告元素為單選框元件容器；

  .item-select——宣告元素為下拉框元件容器；

  .item-toggle——宣告元素為開關按鈕的容器；

  .toggle——宣告元素為開關按鈕；

  .range——宣告元素為滑動條；

  

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<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="../lib/css/ionic.min.css">
</head>
<body>
	<div class="bar bar-header bar-balanced">
		<h1 class="title">表單輸入</h1>
	</div>
    <div class="scroll-content has-header">
        <div class="list">
            <div class="item item-input">
                <i class="icon ion-android-person positive"> 姓名 </i>
                <input type="text" placeholder=" 周杰倫">
            </div>
            <label class="item item-input">
                <i class="icon ion-ios-unlocked-outline positive"></i>
                <input type="password" placeholder="請輸入您的密碼">
            </label>
            <label class="item item-input item-input-inset item-button-right">
                <span class="input-label">年齡</span>
                <input type="text" placeholder="25">
                <a class="button button-clear icon ion-ios-arrow-right"></a>
            </label>
            <label class="item item-input item-floating-label">
                <span class="input-label">個性簽名</span>
                <input type="text" placeholder="論一個程式設計師的自我修養">
            </label>
            <label class="item item-input item-stacked-label">評論
                <textarea placeholder="請文明用語..."></textarea>
            </label>
            <label class="item item-checkbox">
                <label class="checkbox">
                    <input type="checkbox" checked>
                </label>
                記住密碼
            </label>
            <div class="item item-divider"><b>請選擇支付方式</b></div>
            <label class="item item-radio">
                <input type="radio" name="group">
                <div class="item-content">支付寶客戶端支付</div>
                <i class="radio-icon ion-checkmark balanced"></i>
            </label>
            <label class="item item-radio">
                <input type="radio" name="group">
                <div class="item-content">支付寶網頁支付</div>
                <i class="radio-icon ion-checkmark balanced"></i>
            </label>
            <label class="item item-radio">
                <input type="radio" name="group" checked>
                <div class="item-content">一鍵支付（無需支付寶賬戶）</div>
                <i class="radio-icon ion-checkmark balanced"></i>
            </label>
        </div>

        <div class="list">
            <div class="item range range-positive">
                <i class="icon ion-ios-sunny-outline"></i>
                <input type="range" name="volume" min="0" max="100" value="33">
                <i class="icon ion-ios-sunny"></i>
            </div>
            <div class="item item-toggle">
                定位
                <label class="toggle toggle-balanced">
                    <input type="checkbox" checked>
                    <div class="track">
                        <div class="handle"></div>
                    </div>
                </label>
            </div>
        </div>

        <div class="list">
            <label class="item item-input item-select">
                <div class="input-label">
                    前端技術
                </div>
                <select>
                    <option>HTML</option>
                    <option selected>CSS</option>
                    <option>JavaScript</option>
                </select>
            </label>
        </div>
    </div>
</body>
</html>
效果：


7)切換標籤元件/tabs:

  .tabs——宣告元素為切換標籤元件容器；

  .tabs-light等——設定切換標籤元件的顏色；

  .tabs-top——設定切換標籤元件在上部；

  .tabs-icon-top/left——設定切換標籤元件內部的圖示的位置；

  .tabs-icon-only——設定切換標籤元件只顯示圖示；

  .tabs-item——宣告元素為切換標籤元件的子選項；

  .active/.tab-item-active/.activated——設定子選項為選中狀態；

  .diasbled——設定子選項為禁用狀態；

  .has-badge——設定子選項含有徽章；

  .tabs-striped——宣告元素為條帶風格的切換標籤元件容器；

  

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <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="../lib/css/ionic.min.css">
</head>
<body>
    <div class="bar bar-header bar-dark">
        <h1 class="title">今日頭條</h1>
        <a class="button button-clear icon ion-ios-plus-empty"></a>
    </div>
	<div class="tabs tabs-top tabs-positive">
		<a class="tab-item">要聞</a>
		<a class="tab-item active">上海</a>
		<a class="tab-item">房產</a>
		<a class="tab-item">財經</a>
		<a class="tab-item">娛樂</a>
	</div>
	<div class="scroll-content stable-bg has-header has-tabs-top has-tabs tabs-item-hide">
		<h4 class="positive">IONIC 是目前最有潛力的一款 HTML5 手機應用開發框架。</h4>
	</div>
	<div class="tabs tabs-stable tabs-icon-top">
		<a class="tab-item active">
			<i class="icon ion-ios-paper-outline"></i>新聞
		</a>
		<a class="tab-item disabled">
			<i class="icon ion-ios-book-outline"></i>訂閱
		</a>
		<a class="tab-item has-badge">
            <div class="badge badge-assertive">12</div>
			<i class="icon ion-images"></i>圖片
		</a>
		<a class="tab-item activated">
			<i class="icon ion-ios-videocam-outline"></i>視訊
		</a>
	</div>
</body>
</html>
效果： 


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <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="../lib/css/ionic.min.css">
</head>
<body>
	<div class="tabs-striped tabs-top tabs-light tabs-icon-only">
		<div class="tabs">
			<a class="tab-item active">
				<i class="icon ion-ios-telephone"></i>
			</a>
			<a class="tab-item">
				<i class="icon ion-ios-clock"></i>
			</a>
			<a class="tab-item">
				<i class="icon ion-ios-person"></i>
			</a>
		</div>
	</div>
	<div class="tabs tabs-positive tabs-icon-only">
		<a class="tab-item">
			<i class="icon ion-ios-search"></i>
		</a>
		<a class="tab-item active">
			<i class="icon ion-ios-telephone"></i>
		</a>
		<a class="tab-item" href="#">
			<i class="icon ion-backspace"></i>
		</a>
	</div>
</body>
</html>
效果：



8)網格佈局/Grid:

  .row——宣告元素為柵格系統的行容器；

  .row-top/center/bottom——設定行容器內的元素所處的位置；

  .responsive-sm/md/lg——設定行容器所適配的螢幕尺寸；

  .col——宣告元素為柵格系統行內的列；

  .col-10等——設定列寬所佔的行寬比；

  .col-offset-10等——設定列偏移量所佔的行寬比；

  .col-top/offset/bottom——設定該列所處位置；

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<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="../lib/css/ionic.min.css">
    <style>
        .col-40{-webkit-box-flex:0;-webkit-flex:0 0 40%;-moz-box-flex:0;-moz-flex:0 0 40%;-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}
        .col-60{-webkit-box-flex:0;-webkit-flex:0 0 60%;-moz-box-flex:0;-moz-flex:0 0 60%;-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}
    </style>
</head>
<body>
	<div class="bar bar-header bar-stable">
		<h1 class="title">網格佈局</h1>
	</div>
    <div class="scroll-content has-header">
        <div class="row">
            <div class="col col-offset-25 positive-bg">
                col-offset-25
            </div>
            <div class="col calm-bg">
                col
            </div>
        </div>
        <div class="row">
            <div class="col col-33 balanced-bg">
                col-33
            </div>
            <div class="col col-67 energized-bg">
                col-67
            </div>
        </div>
        <div class="row">
            <div class="col col-40 assertive-bg">
                col-40
            </div>
            <div class="col col-60 royal-bg">
                col-60
            </div>
        </div>

        <div class="row">
            <div class="col col-top positive-bg">.col</div>
            <div class="col col-center calm-bg">.col</div>
            <div class="col col-bottom balanced-bg">.col</div>
            <div class="col energized-bg">1<br>2<br>3<br>4</div>
        </div>

        <div class="row row-top">
            <div class="col energized-bg">.col</div>
            <div class="col assertive-bg">.col</div>
            <div class="col royal-bg">.col</div>
            <div class="col positive-bg">1<br>2<br>3<br>4</div>
        </div>

        <div class="row responsive-sm">
            <div class="col positive-bg">.col</div>
            <div class="col calm-bg">.col</div>
            <div class="col balanced-bg">.col</div>
            <div class="col energized-bg">.col</div>
        </div>
    </div>
</body>
</html>


相關推薦

Ionic基礎——CSS佈局

1)頭部/Header、內容/Content、底部/Footer:   .bar .bar-header——宣告元素為頭部；   .bar .footer——宣告元素為底部；   .content/.scroll-content——宣告元素為內容區；   .bar .bar

前端基礎總結-佈局-css元素

一: 1css三大特性 繼承性   重疊性  優先順序 繼承性:text-/font-/line- a標籤的顏色不具有繼承性,標題標籤的字型大小不具有繼承性 !2元素類別 塊元素:div,p,h1-h6 塊元素特徵:自動繼承直接父元素的寬度,

css佈局——行列基礎佈局

一、基礎行佈局程式碼：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title>

前端基礎——CSS+DIV佈局

       隨便開啟一個網頁，按下F12，你會發現一堆密密麻麻的“DIV”，沒錯，現在大部分的網頁都用了CSS+DIV的佈局方式。        上篇說了盒子模型，這裡就以盒子模型為基礎來簡單瞭

前端之基礎css

用戶名 常見 tex sele har sel hide 完全 塊級元素 一、anchor偽類，用於閱讀文章。a:link(沒有接觸過的鏈接),用於鏈接常規狀態 （末訪問的鏈接）a:hover(鼠標放在鏈接上的狀態) 用

前端基礎CSS規則

也會 nbsp selector pro 顏色 :active 鼠標 優先級 p標簽 CSS 語法 CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。 selector { property: value;

前端基礎---CSS

前端基礎 css python基礎 CSS1.CSS語法CSS 規則由兩個主要的部分構成選擇器以及一條或多條聲明 selector{ property:value; property:value;

Html5 學習筆記 --》html基礎 css 基礎

學習 ado itl doctype tran red 陰影 基礎 插圖 HTML5 功能 HTML5特點 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta

html基礎-CSS

lin 層級選擇器 NPU weight border 設置 pass pad 層級 1.id選擇器 #id1{ backgroud-color: } <div id="id1">1</div> 2.類選擇器 .c1{ backgro

前端基礎------CSS

div標簽 for reset 電子 resource 產生 cti format ref <!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位於 <html> 標簽之前。<!DOCTYPE> 聲明不是 HTML 標簽；它是指示

前端基礎-- CSS

值範圍 接收 times span www. 外觀 cit 背景 sim CSS知識 CSS（Cascading Style Sheet，層疊樣式表）定義如何顯示HTML元素。 當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。Css之車更豐富的文

百度前端技術學院--CSS佈局例項

CSS背景圖片佈局 <!doctype html><html><body>...Your content goes here...</body></html>　　給body標籤指定背景圖，這樣背景圖就可以填充整個瀏覽器viewport了。　　其實，

css-佈局的漂浮

　　float 　　　　** 屬性值　　　　left: 文字流向物件的右邊 　　　　right:文字流向物件的左邊 <html> <head> <title>World</title> <style type

css佈局簡寫

盒模型程式碼簡寫 還記得在講盒模型時外邊距(margin)、內邊距(padding)和邊框(border)設定上下左右四個方向的邊距是按照順時針方向設定的：上右下左。具體應用在margin和padding的例子如下： margin:10px 15px 12px 14

CSS佈局（補充）

主站：     <div vlass='pg-header'>         <div style='width:980px;margin: 0 auto;'> 內容自動

幾種常見的CSS佈局

本文概要 本文將介紹如下幾種常見的佈局： 單列布局 兩列自適應佈局 聖飛佈局和雙飛翼佈局 偽等高佈局 粘連佈局 一、單列布局 常見的單列布局有兩種： header,content和footer等寬的單列布局 header與footer等寬,con

思維導圖加上css,讓你輕鬆掌握css佈局

在很多朋友學習css過程中，總是覺得標籤記不住、屬性記不住和屬性值記不住等問題，不過沒關係，我們可以利用博贊發明的思維導圖來記憶，下面本人來舉例說明。 比如我們學習CSS樣式，css樣式分為背景、文字、字型、連結、列表、表格和輪廊7種樣式。按照這樣的方式，學習css的其它內容就變得輕而易舉

css佈局之浮動佈局（float）

CSS佈局模型 流動佈局 流動佈局,為網頁自帶佈局方式也就是說網頁預設情況下就是採用流動佈局方式來完成對HTML元素的佈置。   流動佈局主要有2大特徵： - 從塊級元素上來說,塊級元素在網頁上預設採用從上到下的順序來完成分佈，每個塊級元素獨自一行，不能與其它的任何

-----產品-----css佈局（解決移動端1px問題）

<div class="header"> <div class="divider item"></div> <div class="header-count item">產品</div> <div cl

CSS佈局學習（二） - flex屬性

flex屬性 定義 flex佈局包括最外層的容器和內部的元素，flex屬性是內部元素屬性。flex屬性是flex-grow, flex-shrink, flex-basis三個屬性的簡寫 　　flex-grow 　　設定元素佔flex容器所剩空餘空間的比例 　　flex-shrink 　　設定元素