亚洲黄色一级毛片,亚洲天堂a级无码视频网址,天天摸夜夜添夜夜添国产

　表格外觀的無序列表

作者：14px　時(shí)間： 2009-06-03　文檔類型：原創(chuàng)　來自：藍(lán)色理想

第 1 頁(yè) 表格外觀的無序列表 [1]
第 2 頁(yè) 表格外觀的無序列表 [2]
第 3 頁(yè) 表格外觀的無序列表 [3]

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

運(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" title="Home" /> <title>表格外觀的無序列表 - 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í)我覺得這個(gè)樣子不影響閱讀，也不難看了，可Boss和他的Money不樂意。 </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運(yùn)行]

解決3：
首先讓我們制造出我們想要的表格（很遺憾，制造了很多空標(biāo)簽，暫時(shí)沒有找到更合適的純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" 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的寬度有點(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í)沒有找到更合適的純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" title="Home" /> <title>表格外觀的無序列表 - 用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)行]

出處：藍(lán)色理想
責(zé)任編輯：bluehearts

上一頁(yè) 表格外觀的無序列表 [1] 下一頁(yè) 表格外觀的無序列表 [3]

◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。

相關(guān)文章

無序列表

作者文章

div仿框架方法詳解

層疊加的五條疊加法則

超過寬度顯示省略號(hào)(無js全兼容)


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計(jì)比賽網(wǎng)頁(yè)制作 web標(biāo)準(zhǔn) 用戶體驗(yàn) UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點(diǎn)最新

站點(diǎn)最新列表

周大福“敬•自然”設(shè)計(jì)大賽開啟

國(guó)際體驗(yàn)設(shè)計(jì)大會(huì)7月將在京舉行

中國(guó)國(guó)防科技信息中心標(biāo)志征集

云計(jì)算如何讓安全問題可控

云計(jì)算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機(jī)會(huì)

阿里行云

云手機(jī)年終巨獻(xiàn)，送禮標(biāo)配299起

阿里巴巴CTO王堅(jiān)的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機(jī)主題設(shè)計(jì)大賽

欄目最新

欄目最新列表

淺談JavaScript編程語(yǔ)言的編碼規(guī)范

如何在illustrator中繪制臺(tái)歷

Ps簡(jiǎn)單繪制一個(gè)可愛的鉛筆圖標(biāo)

數(shù)據(jù)同步算法研究

用ps作簡(jiǎn)單的作品展示頁(yè)面

CSS定位機(jī)制之一:普通流

25個(gè)最佳最閃亮的Eclipse開發(fā)項(xiàng)目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx