ionic-CSS：Cards(卡片)

近年來卡片(card)的應(yīng)用越來越流行，卡片提供了一個更好組織信息展示的工具。 像 Google , Twitter , 和 Spotify ..

創(chuàng)新互聯(lián)建站是一家網(wǎng)站設(shè)計公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營產(chǎn)品：響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作、成都全網(wǎng)營銷。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立，網(wǎng)絡(luò)互動的體驗，以及在手機等移動端的優(yōu)質(zhì)呈現(xiàn)。成都網(wǎng)站制作、網(wǎng)站設(shè)計、移動互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運營、VI設(shè)計、云產(chǎn)品.運維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場的競爭激烈，認(rèn)真對待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價值服務(wù)。

針對移動端的應(yīng)用，卡片會根據(jù)屏幕大小自適應(yīng)大小,甚至還可以有動畫效果.卡片通常被放在在另一個之上, 但它們也可以被當(dāng)做"頁"來使用,像左滑,右滑.

卡片(card)默認(rèn)樣式帶有box-shadow(陰影)，由于性能的原因，和他類似的元素像 list list-inset 并沒有陰影。 如果你有很多的卡片，每個卡片都有很多子元素，建議使用內(nèi)嵌列表 inset lists 。

我們可以通過添加 item-divider 類為卡片添加頭部與底部： 添加帶 item-divider

類的 card

的元素在內(nèi)容區(qū)域的上方或者下方.

使用 list card 類來設(shè)置卡片列表：

卡片中使用圖片，效果會更好，實例如下：

以下實例中使用幾種不同的選項的卡片展現(xiàn)方式。 開始使用了 list card 元素，并使用了 item-avatar , item-body 元素用于展示圖片和文本信息，底部使用 item-divider 類。

用CSS怎么做選項卡？

授之于魚 不如.....呵呵 上面的給你了代碼 我來給你說下思路吧。這里最重要的是 css里的 display:none 這個的使用，當(dāng)鼠標(biāo)點中一個選項卡時，將自身的css中的display:none去掉 讓其顯示出來，讓其他的選項卡中的css中添加display:none， 隱藏其他的選項卡。其實就是這個簡單 ，具體的實現(xiàn)方法就是用js實現(xiàn)的。實現(xiàn)的方法有多種，上面給你的只是其中的一種。你可以去網(wǎng)上多搜些這方面的源代碼，多多學(xué)習(xí)，希望你能編寫出屬于自己的代碼~

CSS實現(xiàn)底部弧度效果--卡片樣式

使用了 CSS 的一些屬性：

:after 偽類

position 定位

border-radius 圓角邊框

linear-gradient 背景顏色漸變

display: flex; flex 布局

box-shadow 盒子陰影

css3分頁，卡片制作

transition-property ：規(guī)定設(shè)置過渡效果的css屬性名稱(默認(rèn)值all)

transition-duration ：規(guī)定完成過渡效果需要多少秒或毫秒（默認(rèn)0s）

transition-timing-function ：指定過渡函數(shù)，規(guī)定速度效果的速度曲線(默認(rèn)為ease函數(shù))

transition-delay ：指定開始出現(xiàn)的延遲時間（默認(rèn)延遲0s）

注意：transition四個子屬性之間只能用空格隔開，不能用逗號隔開