用css實(shí)現(xiàn)表格外觀的無(wú)序列表

2024-07-11 08:22:11

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

參與測(cè)試的瀏覽器：ie6 / ie7 / ie8 / ff3 / op9.6 / sf3 / chrome2
操作系統(tǒng)：windows
特別提示：這不是表格的模擬。表格無(wú)論在語(yǔ)義、結(jié)構(gòu)，還是在效果實(shí)現(xiàn)上，都是無(wú)法替代的。本文只針對(duì)無(wú)序列表在外觀方面的一個(gè)特殊需求

別看有的東東長(zhǎng)得個(gè)表格樣，其實(shí)是披著表格皮的無(wú)序列表，為了偉大的語(yǔ)義，我們需要用css實(shí)現(xiàn)表格外觀的無(wú)序列表。

個(gè)人喜好，這里采用border和negative margin來(lái)實(shí)現(xiàn)，非常簡(jiǎn)單：

這是一個(gè)最簡(jiǎn)單的模型，然而，實(shí)戰(zhàn)總是殘酷的：

寬度如何自適應(yīng)分辨率？
單元格內(nèi)容過(guò)多、形成換行如何處理？
最糾結(jié)的問(wèn)題：5×4的表格，如果只有17條數(shù)據(jù)怎么辦？empty-cell也黯然失色…

問(wèn)題1：寬度如何自適應(yīng)分辨率？
這個(gè)問(wèn)題也許有人說(shuō)沒(méi)必要，但是在模塊化設(shè)計(jì)時(shí)，幾乎任何部件都被要求設(shè)置為寬度自適應(yīng)模式的。

解決1：參考完美的firefox3和ie8百分比寬度處理方案，給剩余的寬度分配給某個(gè)“列”，就行了 ^-^
記得二列等高的笨辦法嗎？——用背景圖片模擬。

問(wèn)題2：?jiǎn)卧駜?nèi)容過(guò)多、形成換行如何處理？

解決2：隱藏吧，它已經(jīng)沒(méi)有存在的價(jià)值了！（ - -! 其實(shí)是我想不出別的辦法來(lái)了）
但為了體驗(yàn)好一點(diǎn)，我加上了text-overflow。這個(gè)，ff暫時(shí)不支持……aoao有好的解決辦法，我也有次點(diǎn)的解決辦法。

運(yùn)行代碼框
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta name="author" content="chomo" /><link rel="start" href="http://www.14px.com" title="home" /><title>表格外觀的無(wú)序列表 - 過(guò)剩文字的處理</title><style type="text/css">* { margin:0; padding:0; list-style:none;}ul { border:1px solid #cfdae8; border-left:none; border-bottom:none; overflow:hidden; background:url(http://www.14px.com/wp-content/uploads/2009/05/1.gif); zoom:1;}li { width:20%; *width:19.9%;/*ie6&ie7的寬度有點(diǎn)點(diǎn)囧*/ float:left;}span { display:block; border-left:1px solid #cfdae8; height:24px; font:12px/24px tahoma; padding:0 4px;}a { white-space:nowrap; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; color:#000; text-decoration:none;}a:hover { color:#f60;}</style></head><body><ul><li><a title="prison break / 越獄" href="#nogo">prison break / 越獄 </a></li><li><a title="gossip girl / 八卦天后" href="#nogo">gossip girl / 八卦天后 </a></li><li><a title="friends / 老友記 / 六人行" href="#nogo">friends / 老友記 / 六人行</a></li><li><a title="heroes / 超能英雄" href="#nogo">heroes / 超能英雄</a></li><li><a title="desperate housewives / 絕望的主婦" href="#nogo">desperate housewives / 絕望的主婦 </a></li><li><a title="sex and the city / 欲望都市" href="#nogo">sex and the city / 欲望都市 </a></li><li><a title="prison break: proof of innocence / 越獄第二季" href="#nogo">prison break: proof of innocence / 越獄第二季</a></li><li><a title="lost / 迷失" href="#nogo">lost / 迷失</a></li><li><a title="grey's anatomy / 實(shí)習(xí)醫(yī)生格蕾 / 格蕾的解剖" href="#nogo">grey's anatomy / 實(shí)習(xí)醫(yī)生格蕾 / 格蕾的解剖 </a></li><li><a title="lie to me / 千謊百計(jì)" href="#nogo">lie to me / 千謊百計(jì) </a></li><li><a title="the big bang theory / 天才理論傳 / 生活大爆炸" href="#nogo">the big bang theory / 天才理論傳 / 生活大爆炸 </a></li><li><a title="growing pains / 成長(zhǎng)的煩惱" href="#nogo">growing pains / 成長(zhǎng)的煩惱 </a></li><li><a title="prison break (season 3) / 越獄第三季" href="#nogo">prison break (season 3) / 越獄第三季</a></li><li><a title="house m.d. / 怪杰醫(yī)生豪斯 / 豪斯醫(yī)生" href="#nogo">house m.d. / 怪杰醫(yī)生豪斯 / 豪斯醫(yī)生 </a></li><li><a title="ugly betty / 丑女貝蒂" href="#nogo">ugly betty / 丑女貝蒂 </a></li><li><a title="gossip girl season2 / 八卦天后第二季" href="#nogo">gossip girl season2 / 八卦天后第二季</a></li><li><a title="csi: crime scene investigation / 犯罪現(xiàn)場(chǎng)：拉斯維加斯" href="#nogo">csi: crime scene investigation / 犯罪現(xiàn)場(chǎng)：拉斯維加斯</a></li><li><a title="heroes(season 2) / 天驕 / 超能英雄" href="#nogo">heroes(season 2) / 天驕 / 超能英雄 </a></li><li><a title="24 / 24反恐部隊(duì) / 24小時(shí)" href="#nogo">24 / 24反恐部隊(duì) / 24小時(shí)</a></li><li><a title="cashmere mafia / 女人幫" href="#nogo">cashmere mafia / 女人幫 </a></li></ul> 實(shí)際應(yīng)用的時(shí)候，通過(guò)對(duì)單元文字長(zhǎng)度范圍的預(yù)測(cè)、應(yīng)用區(qū)域?qū)挾鹊慕Y(jié)合考慮，可通過(guò)調(diào)整列數(shù)來(lái)達(dá)到我們想要的效果。</body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

|||

問(wèn)題3：5×4的表格，如果只有17條數(shù)據(jù)怎么辦？empty-cell也黯然失色…
看這個(gè)demo，其實(shí)我覺(jué)得這個(gè)樣子不影響閱讀，也不難看了，可boss和他的money不樂(lè)意。

運(yùn)行代碼框
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta name="author" content="chomo" /><link rel="start" href="http://www.14px.com" title="home" /><title>表格外觀的無(wú)序列表 - 5×4的表格，如果只有17條數(shù)據(jù)怎么辦？</title><style type="text/css">* { margin:0; padding:0; list-style:none;}ul { border:1px solid #cfdae8; border-left:none; border-bottom:none; overflow:hidden; background:url(http://www.14px.com/wp-content/uploads/2009/05/1.gif); zoom:1;}li { width:20%; *width:19.9%;/*ie6&ie7的寬度有點(diǎn)點(diǎn)囧*/ float:left;}span { display:block; border-left:1px solid #cfdae8; height:24px; font:12px/24px tahoma; padding:0 4px;}a { white-space:nowrap; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; color:#000; text-decoration:none;}a:hover { color:#f60;}</style></head><body><ul><li><a title="prison break / 越獄" href="#nogo">prison break / 越獄 </a></li><li><a title="gossip girl / 八卦天后" href="#nogo">gossip girl / 八卦天后 </a></li><li><a title="friends / 老友記 / 六人行" href="#nogo">friends / 老友記 / 六人行</a></li><li><a title="heroes / 超能英雄" href="#nogo">heroes / 超能英雄</a></li><li><a title="desperate housewives / 絕望的主婦" href="#nogo">desperate housewives / 絕望的主婦 </a></li><li><a title="sex and the city / 欲望都市" href="#nogo">sex and the city / 欲望都市 </a></li><li><a title="prison break: proof of innocence / 越獄第二季" href="#nogo">prison break: proof of innocence / 越獄第二季</a></li><li><a title="lost / 迷失" href="#nogo">lost / 迷失</a></li><li><a title="grey's anatomy / 實(shí)習(xí)醫(yī)生格蕾 / 格蕾的解剖" href="#nogo">grey's anatomy / 實(shí)習(xí)醫(yī)生格蕾 / 格蕾的解剖 </a></li><li><a title="lie to me / 千謊百計(jì)" href="#nogo">lie to me / 千謊百計(jì) </a></li><li><a title="the big bang theory / 天才理論傳 / 生活大爆炸" href="#nogo">the big bang theory / 天才理論傳 / 生活大爆炸 </a></li><li><a title="growing pains / 成長(zhǎng)的煩惱" href="#nogo">growing pains / 成長(zhǎng)的煩惱 </a></li><li><a title="prison break (season 3) / 越獄第三季" href="#nogo">prison break (season 3) / 越獄第三季</a></li><li><a title="house m.d. / 怪杰醫(yī)生豪斯 / 豪斯醫(yī)生" href="#nogo">house m.d. / 怪杰醫(yī)生豪斯 / 豪斯醫(yī)生 </a></li><li><a title="ugly betty / 丑女貝蒂" href="#nogo">ugly betty / 丑女貝蒂 </a></li><li><a title="gossip girl season2 / 八卦天后第二季" href="#nogo">gossip girl season2 / 八卦天后第二季</a></li><li><a title="csi: crime scene investigation / 犯罪現(xiàn)場(chǎng)：拉斯維加斯" href="#nogo">csi: crime scene investigation / 犯罪現(xiàn)場(chǎng)：拉斯維加斯</a></li></ul> 其實(shí)我覺(jué)得這個(gè)樣子不影響閱讀，也不難看了，可boss和他的money不樂(lè)意。</body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

解決3：
首先讓我們制造出我們想要的表格（很遺憾，制造了很多空標(biāo)簽，暫時(shí)沒(méi)有找到更合適的純css解決方案，歡迎大家多多指點(diǎn)）。

運(yùn)行代碼框
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta name="author" content="chomo" /><link rel="start" href="http://www.14px.com" title="home" /><title>表格外觀的無(wú)序列表 - 讓我們制造出我們想要的表格</title><style type="text/css">* { margin:0; padding:0; list-style:none;}ul { border:1px solid #cfdae8; border-left:none; border-bottom:none; overflow:hidden; background:url(http://www.14px.com/wp-content/uploads/2009/05/1.gif); zoom:1;}li { width:20%; *width:19.9%;/*ie6&ie7的寬度有點(diǎn)點(diǎn)囧*/ float:left;}span { display:block; border-left:1px solid #cfdae8; height:24px; font:12px/24px tahoma; padding:0 4px;}a { white-space:nowrap; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; color:#000; text-decoration:none;}a:hover { color:#f60;}</style></head><body><ul><li></li><li></li><li></li><li></li><li></li><li><a title="prison break / 越獄" href="#nogo">prison break / 越獄 </a></li><li><a title="gossip girl / 八卦天后" href="#nogo">gossip girl / 八卦天后 </a></li><li><a title="friends / 老友記 / 六人行" href="#nogo">friends / 老友記 / 六人行</a></li><li><a title="heroes / 超能英雄" href="#nogo">heroes / 超能英雄</a></li><li><a title="desperate housewives / 絕望的主婦" href="#nogo">desperate housewives / 絕望的主婦 </a></li><li><a title="sex and the city / 欲望都市" href="#nogo">sex and the city / 欲望都市 </a></li><li><a title="prison break: proof of innocence / 越獄第二季" href="#nogo">prison break: proof of innocence / 越獄第二季</a></li><li><a title="lost / 迷失" href="#nogo">lost / 迷失</a></li><li><a title="grey's anatomy / 實(shí)習(xí)醫(yī)生格蕾 / 格蕾的解剖" href="#nogo">grey's anatomy / 實(shí)習(xí)醫(yī)生格蕾 / 格蕾的解剖 </a></li><li><a title="lie to me / 千謊百計(jì)" href="#nogo">lie to me / 千謊百計(jì) </a></li><li><a title="the big bang theory / 天才理論傳 / 生活大爆炸" href="#nogo">the big bang theory / 天才理論傳 / 生活大爆炸 </a></li><li><a title="growing pains / 成長(zhǎng)的煩惱" href="#nogo">growing pains / 成長(zhǎng)的煩惱 </a></li><li><a title="prison break (season 3) / 越獄第三季" href="#nogo">prison break (season 3) / 越獄第三季</a></li><li><a title="house m.d. / 怪杰醫(yī)生豪斯 / 豪斯醫(yī)生" href="#nogo">house m.d. / 怪杰醫(yī)生豪斯 / 豪斯醫(yī)生 </a></li><li><a title="ugly betty / 丑女貝蒂" href="#nogo">ugly betty / 丑女貝蒂 </a></li><li><a title="gossip girl season2 / 八卦天后第二季" href="#nogo">gossip girl season2 / 八卦天后第二季</a></li><li><a title="csi: crime scene investigation / 犯罪現(xiàn)場(chǎng)：拉斯維加斯" href="#nogo">csi: crime scene investigation / 犯罪現(xiàn)場(chǎng)：拉斯維加斯</a></li></ul> 很遺憾，制造了很多空標(biāo)簽，暫時(shí)沒(méi)有找到更合適的純css解決方案，歡迎大家多多指點(diǎn)。</body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

然后用position:relative實(shí)現(xiàn)css移魂大法：

運(yùn)行代碼框
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta name="author" content="chomo" /><link rel="start" href="http://www.14px.com" title="home" /><title>表格外觀的無(wú)序列表 - 用position:relative實(shí)現(xiàn)css移魂大法</title><style type="text/css">* { margin:0; padding:0; list-style:none;}ul { border:1px solid #cfdae8; border-left:none; border-bottom:none; overflow:hidden; background:url(http://www.14px.com/wp-content/uploads/2009/05/1.gif); zoom:1;}li { width:20%; *width:19.9%;/*ie6&ie7的寬度有點(diǎn)點(diǎn)囧*/ float:left;}span { display:block; border-left:1px solid #cfdae8; height:24px; font:12px/24px tahoma; padding:0 4px;}a { white-space:nowrap; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; color:#000; text-decoration:none; position:relative; top:-24px;}a:hover { color:#f60;}</style></head><body><ul><li></li><li></li><li></li><li></li><li></li><li><a title="prison break / 越獄" href="#nogo">prison break / 越獄 </a></li><li><a title="gossip girl / 八卦天后" href="#nogo">gossip girl / 八卦天后 </a></li><li><a title="friends / 老友記 / 六人行" href="#nogo">friends / 老友記 / 六人行</a></li><li><a title="heroes / 超能英雄" href="#nogo">heroes / 超能英雄</a></li><li><a title="desperate housewives / 絕望的主婦" href="#nogo">desperate housewives / 絕望的主婦 </a></li><li><a title="sex and the city / 欲望都市" href="#nogo">sex and the city / 欲望都市 </a></li><li><a title="prison break: proof of innocence / 越獄第二季" href="#nogo">prison break: proof of innocence / 越獄第二季</a></li><li><a title="lost / 迷失" href="#nogo">lost / 迷失</a></li><li><a title="grey's anatomy / 實(shí)習(xí)醫(yī)生格蕾 / 格蕾的解剖" href="#nogo">grey's anatomy / 實(shí)習(xí)醫(yī)生格蕾 / 格蕾的解剖 </a></li><li><a title="lie to me / 千謊百計(jì)" href="#nogo">lie to me / 千謊百計(jì) </a></li><li><a title="the big bang theory / 天才理論傳 / 生活大爆炸" href="#nogo">the big bang theory / 天才理論傳 / 生活大爆炸 </a></li><li><a title="growing pains / 成長(zhǎng)的煩惱" href="#nogo">growing pains / 成長(zhǎng)的煩惱 </a></li><li><a title="prison break (season 3) / 越獄第三季" href="#nogo">prison break (season 3) / 越獄第三季</a></li><li><a title="house m.d. / 怪杰醫(yī)生豪斯 / 豪斯醫(yī)生" href="#nogo">house m.d. / 怪杰醫(yī)生豪斯 / 豪斯醫(yī)生 </a></li><li><a title="ugly betty / 丑女貝蒂" href="#nogo">ugly betty / 丑女貝蒂 </a></li><li><a title="gossip girl season2 / 八卦天后第二季" href="#nogo">gossip girl season2 / 八卦天后第二季</a></li><li><a title="csi: crime scene investigation / 犯罪現(xiàn)場(chǎng)：拉斯維加斯" href="#nogo">csi: crime scene investigation / 犯罪現(xiàn)場(chǎng)：拉斯維加斯</a></li></ul></body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

|||

最后讓我們隱藏多余的那一行：

運(yùn)行代碼框
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta name="author" content="chomo" /><link rel="start" href="http://www.14px.com" title="home" /><title>表格外觀的無(wú)序列表 - 隱藏多余的一行</title><style type="text/css">* { margin:0; padding:0; list-style:none;}div { overflow:hidden; zoom:1;}ul { border:1px solid #cfdae8; border-left:none; border-bottom:none; overflow:hidden; background:url(http://www.14px.com/wp-content/uploads/2009/05/1.gif); zoom:1; margin-bottom:-24px;}li { width:20%; *width:19.9%;/*ie6&ie7的寬度有點(diǎn)點(diǎn)囧*/ float:left;}span { display:block; border-left:1px solid #cfdae8; height:24px; font:12px/24px tahoma; padding:0 4px;}a { white-space:nowrap; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; color:#000; text-decoration:none; position:relative; top:-24px;}a:hover { color:#f60;}</style></head><body><div><ul><li></li><li></li><li></li><li></li><li></li><li><a title="prison break / 越獄" href="#nogo">prison break / 越獄 </a></li><li><a title="gossip girl / 八卦天后" href="#nogo">gossip girl / 八卦天后 </a></li><li><a title="friends / 老友記 / 六人行" href="#nogo">friends / 老友記 / 六人行</a></li><li><a title="heroes / 超能英雄" href="#nogo">heroes / 超能英雄</a></li><li><a title="desperate housewives / 絕望的主婦" href="#nogo">desperate housewives / 絕望的主婦 </a></li><li><a title="sex and the city / 欲望都市" href="#nogo">sex and the city / 欲望都市 </a></li><li><a title="prison break: proof of innocence / 越獄第二季" href="#nogo">prison break: proof of innocence / 越獄第二季</a></li><li><a title="lost / 迷失" href="#nogo">lost / 迷失</a></li><li><a title="grey's anatomy / 實(shí)習(xí)醫(yī)生格蕾 / 格蕾的解剖" href="#nogo">grey's anatomy / 實(shí)習(xí)醫(yī)生格蕾 / 格蕾的解剖 </a></li><li><a title="lie to me / 千謊百計(jì)" href="#nogo">lie to me / 千謊百計(jì) </a></li><li><a title="the big bang theory / 天才理論傳 / 生活大爆炸" href="#nogo">the big bang theory / 天才理論傳 / 生活大爆炸 </a></li><li><a title="growing pains / 成長(zhǎng)的煩惱" href="#nogo">growing pains / 成長(zhǎng)的煩惱 </a></li><li><a title="prison break (season 3) / 越獄第三季" href="#nogo">prison break (season 3) / 越獄第三季</a></li><li><a title="house m.d. / 怪杰醫(yī)生豪斯 / 豪斯醫(yī)生" href="#nogo">house m.d. / 怪杰醫(yī)生豪斯 / 豪斯醫(yī)生 </a></li><li><a title="ugly betty / 丑女貝蒂" href="#nogo">ugly betty / 丑女貝蒂 </a></li><li><a title="gossip girl season2 / 八卦天后第二季" href="#nogo">gossip girl season2 / 八卦天后第二季</a></li><li><a title="csi: crime scene investigation / 犯罪現(xiàn)場(chǎng)：拉斯維加斯" href="#nogo">csi: crime scene investigation / 犯罪現(xiàn)場(chǎng)：拉斯維加斯</a></li></ul></div></body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

解決3很抽搐，在birdstudio的幫助下找到了新的方法，這方法不用加空標(biāo)簽。

原理單用文字描述太復(fù)雜了，也不能描述得很清楚，自己看源碼吧，關(guān)鍵在li的高度與margin的設(shè)置上，多余的部分也隱藏了。

運(yùn)行代碼框
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta name="author" content="chomo" /><link rel="start" href="http://www.14px.com" title="home" /><title>表格外觀的無(wú)序列表 - 不用加空標(biāo)簽了，真美好，謝謝birdstudio的思路</title><style type="text/css">* { margin:0; padding:0; list-style:none;}div { overflow:hidden; zoom:1; position:relative;}ul { border:1px solid #cfdae8; border-left:none; border-bottom:none; overflow:hidden; background:url(http://www.14px.com/wp-content/uploads/2009/05/1.gif); zoom:1; margin-bottom:-24px; padding-top:24px;}li { width:20%; *width:19.9%;/*ie6&ie7的寬度有點(diǎn)點(diǎn)囧*/ float:left; margin-top:-24px; height:48px; position:relative;}span { display:block; border-left:1px solid #cfdae8; height:48px; font:12px/24px tahoma; padding:0 4px;}a { white-space:nowrap; display:block; width:100%; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; color:#000; text-decoration:none; position:relative; }a:hover { color:#f60;}</style></head><body><div><ul><li><a title="prison break / 越獄" href="#nogo">prison break / 越獄 </a></li><li><a title="gossip girl / 八卦天后" href="#nogo">gossip girl / 八卦天后 </a></li><li><a title="friends / 老友記 / 六人行" href="#nogo">friends / 老友記 / 六人行</a></li><li><a title="heroes / 超能英雄" href="#nogo">heroes / 超能英雄</a></li><li><a title="desperate housewives / 絕望的主婦" href="#nogo">desperate housewives / 絕望的主婦 </a></li><li><a title="sex and the city / 欲望都市" href="#nogo">sex and the city / 欲望都市 </a></li><li><a title="prison break: proof of innocence / 越獄第二季" href="#nogo">prison break: proof of innocence / 越獄第二季</a></li><li><a title="lost / 迷失" href="#nogo">lost / 迷失</a></li><li><a title="grey's anatomy / 實(shí)習(xí)醫(yī)生格蕾 / 格蕾的解剖" href="#nogo">grey's anatomy / 實(shí)習(xí)醫(yī)生格蕾 / 格蕾的解剖 </a></li><li><a title="lie to me / 千謊百計(jì)" href="#nogo">lie to me / 千謊百計(jì) </a></li><li><a title="the big bang theory / 天才理論傳 / 生活大爆炸" href="#nogo">the big bang theory / 天才理論傳 / 生活大爆炸 </a></li><li><a title="growing pains / 成長(zhǎng)的煩惱" href="#nogo">growing pains / 成長(zhǎng)的煩惱 </a></li><li><a title="prison break (season 3) / 越獄第三季" href="#nogo">prison break (season 3) / 越獄第三季</a></li><li><a title="house m.d. / 怪杰醫(yī)生豪斯 / 豪斯醫(yī)生" href="#nogo">house m.d. / 怪杰醫(yī)生豪斯 / 豪斯醫(yī)生 </a></li><li><a title="ugly betty / 丑女貝蒂" href="#nogo">ugly betty / 丑女貝蒂 </a></li><li><a title="gossip girl season2 / 八卦天后第二季" href="#nogo">gossip girl season2 / 八卦天后第二季</a></li><li><a title="csi: crime scene investigation / 犯罪現(xiàn)場(chǎng)：拉斯維加斯" href="#nogo">csi: crime scene investigation / 犯罪現(xiàn)場(chǎng)：拉斯維加斯</a></li></ul></div> 不用加空標(biāo)簽了，真美好，謝謝birdstudio的思路</body></html>
[ctrl+a 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

上一篇：CSS教程:讓IE6支持position:fixed

下一篇：替換和不可替換元素以及顯示元素