1. 程式人生 > >【ionic】做一個簡單的 card功能

【ionic】做一個簡單的 card功能

今天發現ionic有一個很好看的介面,是用card做的,先貼效果圖,效果看上去還不錯~

效果圖:


原始碼:



<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
<title>菜鳥教程</title>
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script> </head> <body> <div class="bar bar-header"> <div class="h1 title">卡片列表</div> </div> <div class="content has-header ionic-pseudo"> <div class="list card"> <a href="#" class="item item-icon-left">
<i class="icon ion-home"></i> Home </a> <a href="#" class="item item-icon-left"> <i class="icon ion-ios-telephone"></i> Phone </a> <a href="#" class="item item-icon-left"> <i class="icon ion-wifi"></i> WIFI </a> <a href="#" class="item item-icon-left">
<i class="icon ion-card"></i> CARD </a> </div> </div></body>

說明:

其實就是<a>標籤的堆疊,其中的<i>標籤是圖示標籤;

相關推薦

ionic一個簡單card功能

今天發現ionic有一個很好看的介面,是用card做的,先貼效果圖,效果看上去還不錯~ 效果圖: 原始碼: <html ng-app="ionicApp"> <head>

D3.js 入門系列 --- 3 一個簡單的圖表!

    轉載請註明出處,謝謝。     前面說了幾節,都是對文字進行處理,這一節中將用 D3.js 做一個簡單的柱形圖。     做柱形圖有很多種方法,比如用 HTML 的 div 標籤,或用 svg 。     推薦用 SVG 來做各種圖形。SVG 意為可縮放

bzoj5016[Snoi2017]一個簡單的詢問 莫隊算法

bsp math 輸出 load 存在 不能 int 註意 sort 題目描述 給你一個長度為N的序列ai,1≤i≤N和q組詢問,每組詢問讀入l1,r1,l2,r2,需輸出 get(l,r,x)表示計算區間[l,r]中,數字x出現了多少次。 輸入 第

QtWebSocket建立一個簡單的websocket連線

1、使用說明 pro檔案中: QT += websockets C++類檔案中: #include <QWebSocket> 2、客戶端的demo 該demo實現的功能: 1、建立webSocket連線; 2、連線中斷後,自動發起重連,週期為3秒。 這裡新建一個類,類

一個簡單的爬蟲來批量爬取新浪網的新聞

工具:Anaconda 先進入該頁,新浪新聞:http://news.sina.com.cn/china/ 往下翻,找到這樣的最新訊息 先爬取單個頁面的資訊:(隨便點一個進去), 該新聞網址:http://news.sina.com.cn/c/nd/2018-06-08/doc-ihcscwxa1

原創實現一個簡單的移動端左右滑動翻頁+ 點選下標翻頁 利用:HTML5+CSS+Js

//【如何做一個簡單的手機端頁面的翻頁】//第一步:建立移動端頁面內  HTML + CSS  【注】可用彈性佈局   但需要注意的是  外層盒子的定位//第二步: 思考問題  要實現怎樣的效果?//1. 手指滑動時觸發事件【左右】兩個方向  //2.點選footer部分的下

Linux實現一個簡單的shell

1.shell原理 shell就是運用程式替換的原理進行實現的。 何為程式替換? 假如作業系統正在執行某一個程式,然後我們利用程式替換函 數指定一個新的程式,讓作業系統去執行我們新指定的程式。也就是這樣一種情形下,我們fork一個程序,如果for

C++編寫一個簡單的類。包含建構函式,成員函式等。

//編寫一個簡單的類。包含建構函式,成員函式等。 #include <iostream> using namespace std; class Rec { public: Rec(i

雜談一個不被開發鄙視的測試工程師

忙忙碌碌,不知不覺在新公司已經3個月了。尤其是最近一段時間,異常的忙,但是我仍然會抽出一定量的時間來做些開發。 以後成熟的話,打算輸出一個手把手開發的系列,分享給更多的測試童鞋。 前幾天跟群裡一位小夥伴聊天,聽到了一個關鍵詞。相信這也是很多測試童鞋都有過的體會,感覺測試容易被開發鄙視,得不到尊重。 既然今

demo使用React+Webpackt一個簡單的todolist

使用React實現一個簡單的todolist,實現基本的增刪功能 GitHub:https://github.com/heyue-99/todolist 建立專案 建立的todo主要採用node包的方式,使用webpack打包 初始化專案並建立一些基礎檔案 初始化專案之

WebRTC自己一個簡單的sfu視訊通訊demo

由於p2p視訊通訊不支援定向ip流量, 所以,做了一個基於mediasoup框架的sfu轉發伺服器和簡單的web客戶端(給安卓端和ios端提前踩坑) 涉及到的技術: mediasoup(官網) Nodejs React WebPack

Java編程建立一個簡單的JDBC連接-Drivers, Connection, Statement and PreparedStatement

code ava 語句 ole man for out 讀取 drop 本blog提供了一個簡單的通過JDBC驅動建立JDBC連接例程,並分別通過Statement和PreparedStatement實現對數據庫的查詢。在下一篇blog中將重點比較Statement與P

樹莓派一個備份鏡像

運行 using clas 準備 prim 初始化 per ole nac 在做樹莓派鏡像時候,遇到了一點問題,參考這篇文章,再重試一下。 Adafruit的樹莓派教程第一課福利:做一個備份鏡像 04/08/2014 Boyd Wang A

jQuery外掛分享Cropper——一個簡單方便的圖片裁剪外掛

原文地址:https://segmentfault.com/a/1190000012344970   外掛介紹 這是一個我在寫以前的專案的途中發現的一個國人寫的jQuery影象裁剪外掛,當時想實現使用者資料的頭像上傳功能,並且能夠預覽圖片,和對圖片進行簡單的裁剪、旋轉,花了不少

做一個簡單的銀行、賬戶演示程式。 (1)定義一個賬戶類,包含使用者名稱、密碼、餘額等屬性、存錢、取錢等方法。 (2)定義一個銀行類,包含銀行名、賬戶列表等屬性,開賬戶、查賬戶的功能。賬戶列表可以使用集

做一個簡單的銀行、賬戶演示程式。 (1)定義一個賬戶類,包含使用者名稱、密碼、餘額等屬性、存錢、取錢等方法。 (2)定義一個銀行類,包含銀行名、賬戶列表等屬性,開賬戶、查賬戶的功能。賬戶列表可以使用

banner介紹一個純CSS3的輪播圖

日常搜尋元件中,發現有人做出一款css3輪播圖,感覺挺棒,就轉載過來分享下。 HTML部分: <div class="baner-box"> <ul class="banner"> <li style="background

Arduino一份簡單的(偽)多執行緒示例 - print "Hello World" 和 echo 功能

Arduino 上執行(偽)多執行緒示例 - print “Hello World” 和 echo 功能 Arduino 上執行(偽)多執行緒示例 - print "Hello World" 和 echo 功能 Demo Note

Java編寫一個方法,實現基本的字串壓縮功能

利用重複字元出現的次數,編寫一個方法,實現基本的字串壓縮功能。 例如,字串aabcccccaaa會變為a2b1c5a3。若壓縮後的字串沒有變短,則返回原先的字串。 StringBuffer: 如果頻繁地對字串進行拼接,直接用“+”的話會建立很多String型的物件,對伺服器

jQuery插件分享Cropper——一個簡單方便的圖片裁剪插件

spa jdk 上傳 bject bootstra box 調整 inf doc 原文:https://segmentfault.com/a/1190000012344970 插件介紹 這是一個我在寫以前的項目的途中發現的一個國人寫的jQuery圖像裁剪插件,當時想實現用戶

EJB學習筆記——建立一個簡單的EJB應用

  這裡建立一個簡單的EJB應用,結構如下:      EJB_DEMO專案型別為EJB Project,是需要部署到JBoss上的EJB應用。EJB_DEMO_CLIENT專案型別為普通的Java