使用表格和CSS漸變來(lái)格式化內(nèi)容

1、使用表格和CSS漸變來(lái)格式化內(nèi)容（第十講（第十講 ) )知識(shí)回顧n如何制作內(nèi)置列表？n如何制作列表分割線？n如何制作計(jì)數(shù)泡？n如何制作拆分按鈕列表？教學(xué)內(nèi)容njQuery Mobile 布局網(wǎng)格布局網(wǎng)格n自定義網(wǎng)格自定義網(wǎng)格n多行多行n可折疊塊可折疊塊重點(diǎn)、難點(diǎn)n重點(diǎn)pjQuery Mobile 布局網(wǎng)格布局網(wǎng)格p自定義網(wǎng)格自定義網(wǎng)格p多行多行p可折疊塊可折疊塊n難點(diǎn)pjQuery Mobile 布局網(wǎng)格布局網(wǎng)格p自定義網(wǎng)格自定義網(wǎng)格p多行多行p可折疊塊可折疊塊1.jQuery Mobile 布局網(wǎng)格lQuery Mobile 提供了一套基于 CSS 的分列布局。然而，在移動(dòng)設(shè)備上，由于考慮手

2、機(jī)的屏幕寬度狹窄，一般不建議使用分欄分列布局。l但有時(shí)您想要將較小的元素（如按鈕或?qū)Ш綐?biāo)簽）并排地排列在一起，就像是在一個(gè)表格中一樣。這種情況下，推薦使用分列布局。l網(wǎng)格中的列是等寬的（合計(jì)是 100%），沒(méi)有邊框、背景、margin 或 padding。1.jQuery Mobile 布局網(wǎng)格這里有四種布局網(wǎng)格可供使用：在列容器內(nèi)，子元素?fù)碛械?class 為 ui-block-a|b|c|d|e 取決于列數(shù)。列會(huì)浮動(dòng)并排。 實(shí)例 1:class 為 ui-grid-a（兩列布局），您必須指定 ui-block-a 和 ui-block-b 的兩個(gè)子元素。 實(shí)例 2:class 為 ui-g

3、rid-b（三列布局），則必須添加 ui-block-a、ui-block-b 和 ui-block-c 的三個(gè)子元素。網(wǎng)格類(lèi)列列寬對(duì)應(yīng)實(shí)例ui-grid-a250% / 50%ui-block-a|b嘗試一下嘗試一下ui-grid-b333% / 33% / 33%ui-block-a|b|c嘗試一下嘗試一下ui-grid-c425% / 25% / 25% / 25%ui-block-a|b|c|d嘗試一下嘗試一下ui-grid-d520% / 20% / 20% / 20% / 20% ui-block-a|b|c|d|e 嘗試一下嘗試一下1.jQuery Mobile 布局網(wǎng)格下面是三

4、列布局。下面是三列布局。效果圖如下，請(qǐng)制作效果圖如下，請(qǐng)制作 ：2.自定義網(wǎng)格通過(guò)使用CSS，您可以自定義列塊，如：.ui-block-a, .ui-block-b, .ui-block-c background-color: lightgray;border: 1px solid black;height: 100px;font-weight: bold;text-align: center;padding: 30px;2.自定義網(wǎng)格下面是三列布局。下面是三列布局。效果圖如下，請(qǐng)制作效果圖如下，請(qǐng)制作 ：2.自定義網(wǎng)格您也可以通過(guò)使用內(nèi)嵌樣式來(lái)自定義塊：Text.3.多行在列中也可以有多個(gè)行

5、。注意：注意：ui-block-a-class 總是創(chuàng)建一個(gè)新行。實(shí)例如下：實(shí)例如下：Some TextSome TextSome TextSome TextSome TextSome Text3.多行效果圖如下，請(qǐng)制作效果圖如下，請(qǐng)制作 ：4.jQuery Mobile 可折疊塊 可折疊塊允許您隱藏或顯示內(nèi)容 - 對(duì)于存儲(chǔ)部分信息很有用。 如需創(chuàng)建一個(gè)可折疊的內(nèi)容塊，需要為容器添添加加 data-role=“collapsible” 屬性。在容器（div）內(nèi)，添加一個(gè)標(biāo)題元素（H1-H6），后跟您想要進(jìn)行擴(kuò)展的 HTML 標(biāo)記。實(shí)例如下：4.jQuery Mobile 可折疊塊實(shí)例實(shí)例點(diǎn)擊我

6、 - 我可以折疊!我是可折疊的內(nèi)容。4. jQuery Mobile 可折疊塊效果圖如下，請(qǐng)制作效果圖如下，請(qǐng)制作 ：點(diǎn)擊前頁(yè)面效果 點(diǎn)擊后頁(yè)面效果4. jQuery Mobile 可折疊塊 默認(rèn)情況下，內(nèi)容是被折疊起來(lái)的。如需在頁(yè)面加載時(shí)展開(kāi)內(nèi)容，請(qǐng)使用 data-collapsed=“false”。效果圖如下，請(qǐng)制作效果圖如下，請(qǐng)制作 ：點(diǎn)擊前頁(yè)面效果 點(diǎn)擊后頁(yè)面效果4. jQuery Mobile 可折疊塊嵌套可折疊塊嵌套可折疊塊可折疊的內(nèi)容塊是可以彼此嵌套的。實(shí)例實(shí)例 點(diǎn)擊我 - 我可以折疊! 我是被展開(kāi)的內(nèi)容。 點(diǎn)擊我 - 我是嵌套的可折疊塊！ 我是嵌套的可折疊塊中被展開(kāi)的內(nèi)容。 l

7、效果圖如下，請(qǐng)制作效果圖如下，請(qǐng)制作 ：圖1圖2圖34. jQuery Mobile 可折疊塊 可折疊集合是將可折疊塊組合在一起（就像手風(fēng)琴一樣）。當(dāng)一個(gè)新的塊被展開(kāi)時(shí)，所有其他的塊都會(huì)被折疊起來(lái)。 創(chuàng)建若干個(gè)可折疊的內(nèi)容塊，然后把可折疊內(nèi)容塊用帶有 data-role=collapsible-set 的新容器包圍起來(lái)：4. jQuery Mobile 可折疊塊實(shí)例實(shí)例點(diǎn)擊我 - 我可以折疊！我是被展開(kāi)的內(nèi)容。點(diǎn)擊我 - 我可以折疊!我是被展開(kāi)的內(nèi)容。4. jQuery Mobile 可折疊塊效果圖如下，請(qǐng)制作效果圖如下，請(qǐng)制作 ：點(diǎn)擊前頁(yè)面效果 第一項(xiàng)點(diǎn)擊后頁(yè)面效果4. jQuery Mobile 可折疊塊l通過(guò) data-inset 屬性取消圓角 如何取消可折疊塊上的圓角。l通過(guò) data-mini 屬