用css實現表格外觀的無序列表

DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 用css實現表格外觀的無序列表

用css實現表格外觀的無序列表

編輯：CSS進階教程

網頁制作poluoluo文章簡介：別看有的東東長得個表格樣，其實是披著表格皮的無序列表，為了偉大的語義，我們需要用css實現表格外觀的無序列表。

參與測試的浏覽器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2
操作系統：Windows
特別提示：這不是表格的模擬。表格無論在語義、結構，還是在效果實現上，都是無法替代的。本文只針對無序列表在外觀方面的一個特殊需求

別看有的東東長得個表格樣，其實是披著表格皮的無序列表，為了偉大的語義，我們需要用css實現表格外觀的無序列表。

個人喜好，這裡采用border和negative margin來實現，非常簡單：

這是一個最簡單的模型，然而，實戰總是殘酷的：

寬度如何自適應分辨率？
單元格內容過多、形成換行如何處理？
最糾結的問題：5×4的表格，如果只有17條數據怎麼辦？empty-cell也黯然失色…

問題1：寬度如何自適應分辨率？
這個問題也許有人說沒必要，但是在模塊化設計時，幾乎任何部件都被要求設置為寬度自適應模式的。

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

問題2：單元格內容過多、形成換行如何處理？

解決2：隱藏吧，它已經沒有存在的價值了！（ - -! 其實是我想不出別的辦法來了）
但為了體驗好一點，我加上了text-overflow。這個，FF暫時不支持……aoao有好的解決辦法，我也有次點的解決辦法。

運行代碼框
<!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>表格外觀的無序列表 - 過剩文字的處理</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的寬度有點點囧*/ 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 / 實習醫生格蕾 / 格蕾的解剖" href="#nogo">Grey's Anatomy / 實習醫生格蕾 / 格蕾的解剖 </a></li> <li><a title="Lie to Me / 千謊百計" href="#nogo">Lie to Me / 千謊百計 </a></li> <li><a title="The Big Bang Theory / 天才理論傳 / 生活大爆炸" href="#nogo">The Big Bang Theory / 天才理論傳 / 生活大爆炸 </a></li> <li><a title="Growing Pains / 成長的煩惱" href="#nogo">Growing Pains / 成長的煩惱 </a></li> <li><a title="Prison Break (Season 3) / 越獄第三季" href="#nogo">Prison Break (Season 3) / 越獄第三季</a></li> <li><a title="House M.D. / 怪傑醫生豪斯 / 豪斯醫生" href="#nogo">House M.D. / 怪傑醫生豪斯 / 豪斯醫生 </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 / 犯罪現場：拉斯維加斯" href="#nogo">CSI: Crime Scene Investigation / 犯罪現場：拉斯維加斯</a></li> <li><a title="Heroes(Season 2) / 天驕 / 超能英雄" href="#nogo">Heroes(Season 2) / 天驕 / 超能英雄 </a></li> <li><a title="24 / 24反恐部隊 / 24小時" href="#nogo">24 / 24反恐部隊 / 24小時</a></li> <li><a title="Cashmere Mafia / 女人幫" href="#nogo">Cashmere Mafia / 女人幫 </a></li> </ul> 實際應用的時候，通過對單元文字長度范圍的預測、應用區域寬度的結合考慮，可通過調整列數來達到我們想要的效果。 </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

網頁制作poluoluo文章簡介：別看有的東東長得個表格樣，其實是披著表格皮的無序列表，為了偉大的語義，我們需要用css實現表格外觀的無序列表。

問題3：5×4的表格，如果只有17條數據怎麼辦？empty-cell也黯然失色…
看這個Demo，其實我覺得這個樣子不影響閱讀，也不難看了，可Boss和他的Money不樂意。

運行代碼框
<!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>表格外觀的無序列表 - 5×4的表格，如果只有17條數據怎麼辦？</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的寬度有點點囧*/ 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 / 實習醫生格蕾 / 格蕾的解剖" href="#nogo">Grey's Anatomy / 實習醫生格蕾 / 格蕾的解剖 </a></li> <li><a title="Lie to Me / 千謊百計" href="#nogo">Lie to Me / 千謊百計 </a></li> <li><a title="The Big Bang Theory / 天才理論傳 / 生活大爆炸" href="#nogo">The Big Bang Theory / 天才理論傳 / 生活大爆炸 </a></li> <li><a title="Growing Pains / 成長的煩惱" href="#nogo">Growing Pains / 成長的煩惱 </a></li> <li><a title="Prison Break (Season 3) / 越獄第三季" href="#nogo">Prison Break (Season 3) / 越獄第三季</a></li> <li><a title="House M.D. / 怪傑醫生豪斯 / 豪斯醫生" href="#nogo">House M.D. / 怪傑醫生豪斯 / 豪斯醫生 </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 / 犯罪現場：拉斯維加斯" href="#nogo">CSI: Crime Scene Investigation / 犯罪現場：拉斯維加斯</a></li> </ul> 其實我覺得這個樣子不影響閱讀，也不難看了，可Boss和他的Money不樂意。 </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

解決3：
首先讓我們制造出我們想要的表格（很遺憾，制造了很多空標簽，暫時沒有找到更合適的純CSS解決方案，歡迎大家多多指點）。

運行代碼框
<!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>表格外觀的無序列表 - 讓我們制造出我們想要的表格</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的寬度有點點囧*/ 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 / 實習醫生格蕾 / 格蕾的解剖" href="#nogo">Grey's Anatomy / 實習醫生格蕾 / 格蕾的解剖 </a></li> <li><a title="Lie to Me / 千謊百計" href="#nogo">Lie to Me / 千謊百計 </a></li> <li><a title="The Big Bang Theory / 天才理論傳 / 生活大爆炸" href="#nogo">The Big Bang Theory / 天才理論傳 / 生活大爆炸 </a></li> <li><a title="Growing Pains / 成長的煩惱" href="#nogo">Growing Pains / 成長的煩惱 </a></li> <li><a title="Prison Break (Season 3) / 越獄第三季" href="#nogo">Prison Break (Season 3) / 越獄第三季</a></li> <li><a title="House M.D. / 怪傑醫生豪斯 / 豪斯醫生" href="#nogo">House M.D. / 怪傑醫生豪斯 / 豪斯醫生 </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 / 犯罪現場：拉斯維加斯" href="#nogo">CSI: Crime Scene Investigation / 犯罪現場：拉斯維加斯</a></li> </ul> 很遺憾，制造了很多空標簽，暫時沒有找到更合適的純CSS解決方案，歡迎大家多多指點。 </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

然後用position:relative實現css移魂大法：

運行代碼框
<!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>表格外觀的無序列表 - 用position:relative實現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的寬度有點點囧*/ 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 / 實習醫生格蕾 / 格蕾的解剖" href="#nogo">Grey's Anatomy / 實習醫生格蕾 / 格蕾的解剖 </a></li> <li><a title="Lie to Me / 千謊百計" href="#nogo">Lie to Me / 千謊百計 </a></li> <li><a title="The Big Bang Theory / 天才理論傳 / 生活大爆炸" href="#nogo">The Big Bang Theory / 天才理論傳 / 生活大爆炸 </a></li> <li><a title="Growing Pains / 成長的煩惱" href="#nogo">Growing Pains / 成長的煩惱 </a></li> <li><a title="Prison Break (Season 3) / 越獄第三季" href="#nogo">Prison Break (Season 3) / 越獄第三季</a></li> <li><a title="House M.D. / 怪傑醫生豪斯 / 豪斯醫生" href="#nogo">House M.D. / 怪傑醫生豪斯 / 豪斯醫生 </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 / 犯罪現場：拉斯維加斯" href="#nogo">CSI: Crime Scene Investigation / 犯罪現場：拉斯維加斯</a></li> </ul> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

網頁制作poluoluo文章簡介：別看有的東東長得個表格樣，其實是披著表格皮的無序列表，為了偉大的語義，我們需要用css實現表格外觀的無序列表。

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

運行代碼框
<!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>表格外觀的無序列表 - 隱藏多余的一行</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的寬度有點點囧*/ 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 / 實習醫生格蕾 / 格蕾的解剖" href="#nogo">Grey's Anatomy / 實習醫生格蕾 / 格蕾的解剖 </a></li> <li><a title="Lie to Me / 千謊百計" href="#nogo">Lie to Me / 千謊百計 </a></li> <li><a title="The Big Bang Theory / 天才理論傳 / 生活大爆炸" href="#nogo">The Big Bang Theory / 天才理論傳 / 生活大爆炸 </a></li> <li><a title="Growing Pains / 成長的煩惱" href="#nogo">Growing Pains / 成長的煩惱 </a></li> <li><a title="Prison Break (Season 3) / 越獄第三季" href="#nogo">Prison Break (Season 3) / 越獄第三季</a></li> <li><a title="House M.D. / 怪傑醫生豪斯 / 豪斯醫生" href="#nogo">House M.D. / 怪傑醫生豪斯 / 豪斯醫生 </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 / 犯罪現場：拉斯維加斯" href="#nogo">CSI: Crime Scene Investigation / 犯罪現場：拉斯維加斯</a></li> </ul> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

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

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

運行代碼框
<!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>表格外觀的無序列表 - 不用加空標簽了，真美好，謝謝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的寬度有點點囧*/ 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 / 實習醫生格蕾 / 格蕾的解剖" href="#nogo">Grey's Anatomy / 實習醫生格蕾 / 格蕾的解剖 </a></li> <li><a title="Lie to Me / 千謊百計" href="#nogo">Lie to Me / 千謊百計 </a></li> <li><a title="The Big Bang Theory / 天才理論傳 / 生活大爆炸" href="#nogo">The Big Bang Theory / 天才理論傳 / 生活大爆炸 </a></li> <li><a title="Growing Pains / 成長的煩惱" href="#nogo">Growing Pains / 成長的煩惱 </a></li> <li><a title="Prison Break (Season 3) / 越獄第三季" href="#nogo">Prison Break (Season 3) / 越獄第三季</a></li> <li><a title="House M.D. / 怪傑醫生豪斯 / 豪斯醫生" href="#nogo">House M.D. / 怪傑醫生豪斯 / 豪斯醫生 </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 / 犯罪現場：拉斯維加斯" href="#nogo">CSI: Crime Scene Investigation / 犯罪現場：拉斯維加斯</a></li> </ul> </div> 不用加空標簽了，真美好，謝謝birdstudio的思路 </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

上一頁:CSS教程:讓IE6支持position:fixed
下一頁:替換和不可替換元素以及顯示元素

CSS進階教程

用CSS代碼輕松Diy你的網頁滾動條: 在浏覽網頁的時候我們有時可以看到有的網頁滾動條顏
DIV+CSS網頁布局的基礎知識整理: poluoluo.com的CSS教程欄目中匯集了大量的CSS知識，這些知識已經非常全面了，但很多CS
如何進行CSS布局: HTML的局限性迫使設計師們去開發更聰明的方式來使他們的網頁更美觀。過去最常用的工具是<tab

CSS基礎知識 Sass教程 CSS3基礎關於CSS CSS進階教程 DIV十CSS布局 CSS特效代碼 CSS詳解

小編推薦

百分百背景圖切圖和CSS編寫注意事項 CSS Hack匯總快查 css定位與定位應用詳解收集的6個關注CSS3的國外網站 CSS9則常見技巧幫助你學習CSS3的不錯的7個CSS3代碼生成工具 xhtml+css網頁制作中問題解決的方式 CSS樣式設計網頁字體與用戶體驗 CSS教程:詳解CSS特定值更有效率的編寫CSS代碼

DIV CSS 佈局教程網

相關文章