- 參與測(cè)試的瀏覽器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
- 操作系統(tǒng):Windows
- 特別提示:這不是表格的模擬。表格無論在語義、結(jié)構(gòu),還是在效果實(shí)現(xiàn)上,都是無法替代的。本文只針對(duì)無序列表在外觀方面的一個(gè)特殊需求
別看有的東東長(zhǎng)得個(gè)表格樣,其實(shí)是披著表格皮的無序列表,為了偉大的語義,我們需要用css實(shí)現(xiàn)表格外觀的無序列表。
個(gè)人喜好,這里采用border和negative margin來實(shí)現(xiàn),非常簡(jiǎn)單:
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
這是一個(gè)最簡(jiǎn)單的模型,然而,實(shí)戰(zhàn)總是殘酷的:
- 寬度如何自適應(yīng)分辨率?
- 單元格內(nèi)容過多、形成換行如何處理?
- 最糾結(jié)的問題:5×4的表格,如果只有17條數(shù)據(jù)怎么辦?empty-cell也黯然失色…
問題1:寬度如何自適應(yīng)分辨率? 這個(gè)問題也許有人說沒必要,但是在模塊化設(shè)計(jì)時(shí),幾乎任何部件都被要求設(shè)置為寬度自適應(yīng)模式的。
解決1:參考完美的firefox3和ie8百分比寬度處理方案,給剩余的寬度分配給某個(gè)“列”,就行了 ^-^ 記得二列等高的笨辦法嗎?——用背景圖片模擬。
問題2:?jiǎn)卧駜?nèi)容過多、形成換行如何處理?
解決2:隱藏吧,它已經(jīng)沒有存在的價(jià)值了。 - -! 其實(shí)是我想不出別的辦法來了) 但為了體驗(yàn)好一點(diǎn),我加上了text-overflow。這個(gè),F(xiàn)F暫時(shí)不支持……aoao有好的解決辦法,我也有次點(diǎn)的解決辦法。
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運(yùn)行]
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁 下一頁 表格外觀的無序列表 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|