快捷導(dǎo)航

div+css模擬表格效果代碼

更新時(shí)間：2008年12月06日 10:34:28 作者：

非常不錯(cuò)的模擬表格效果代碼，需要注意的是這類(lèi)代碼一般都是通過(guò)寬度控制，大家注意計(jì)算好

<!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" /> <title>DIV+CSS模擬表格效果 - by koyoz.com</title> <style type="text/css"> * {margin:0;padding:0} #main {margin:100px 0 0 200px} #main ul {width:520px;height:165px;list-style:none} #main li {border-left:1px solid #ccc;border-top:1px solid #ccc;float:left;width:102px;height:33px;text-align:center;line-height:33px} #main li.b {border-bottom:1px solid #ccc} #main li.r {border-right:1px solid #ccc} </style> </head> <body> <div   class="wppm3vysvbp"   id="main"> <ul> <li>11</li> <li>11</li> <li>11</li> <li>11</li> <li id="wppm3vysvbp"    class="r">11</li> <li></li> <li></li> <li></li> <li></li> <li id="wppm3vysvbp"    class="r">11</li> <li></li> <li></li> <li></li> <li></li> <li id="wppm3vysvbp"    class="r">11</li> <li></li> <li></li> <li></li> <li></li> <li id="wppm3vysvbp"    class="r">11</li> <li id="wppm3vysvbp"    class="b"></li> <li id="wppm3vysvbp"    class="b"></li> <li id="wppm3vysvbp"    class="b"></li> <li id="wppm3vysvbp"    class="b"></li> <li id="wppm3vysvbp"    class="b r">11</li> </ul> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

相關(guān)文章

CSS 浮動(dòng)清理，不使用 clear:both標(biāo)簽
CSS:浮動(dòng)清理，不使用 clear:both標(biāo)簽在進(jìn)行浮動(dòng)布局時(shí)，大多數(shù)人都深知，在必要的地方進(jìn)行浮動(dòng)清理：<div style="clear:both;"></div>。
2008-07-07
Javascript的匿名函數(shù)講解
匿名函數(shù)可以有效的保證在頁(yè)面上寫(xiě)入Javascript，而不會(huì)造成全局變量的污染。這在給一個(gè)不是很熟悉的頁(yè)面增加Javascript時(shí)非常有效，也很優(yōu)美。
2008-05-05
激發(fā)你的靈感:50個(gè)優(yōu)秀的Favicons
激發(fā)你的靈感:50個(gè)優(yōu)秀的Favicons...
2007-02-02
從p開(kāi)始，循序漸進(jìn)
從今天開(kāi)始，我將全面的共享出我所能理解的所有WEB標(biāo)準(zhǔn)方面的知識(shí)放在這個(gè)“WEB標(biāo)準(zhǔn)能有多難？”的專(zhuān)欄里。當(dāng)然由于振之的水平有限，所講并非是完全正確的。在看了這個(gè)專(zhuān)欄的文章的時(shí)候要理性的分析，要有自己的判斷，歡迎各位朋友提出自己的看法與意見(jiàn)。
2008-04-04
dhtml shtml xhtml的區(qū)別解析
dhtml shtml xhtml的區(qū)別解析...
2007-06-06
css 兼容性問(wèn)題this.style.cursor=''''hand''''
css 兼容性問(wèn)題this.style.cursor='hand'讓我們來(lái)CSS HACK
2008-11-11
firefox的超鏈接點(diǎn)擊去除擴(kuò)大的難看虛線的解決方法
在Firefox里，鼠標(biāo)點(diǎn)擊一個(gè)鏈接時(shí)，它的周?chē)闯霈F(xiàn)虛線畫(huà)出的邊框。這種例子遍地都是，在WordPress后臺(tái)寫(xiě)這個(gè)文章的時(shí)候，隨手點(diǎn)一下右邊那些widget，就看到了這個(gè)問(wèn)題（圖片的右上角）
2008-12-12
深入理解z-index的工作原理和應(yīng)用技巧
z-index是CSS中控制元素層級(jí)的屬性，但其工作原理并不簡(jiǎn)單。本文將深入探討z-index的工作原理，包括堆疊上下文、層疊順序和層疊上下文等概念，并介紹z-index的應(yīng)用技巧，如如何避免z-index的陷阱、如何使用z-index實(shí)現(xiàn)復(fù)雜布局等。
2023-05-05
css之使table也能overflow:hidden
overflow用在div上時(shí)很好用，但直接用在td上，好像沒(méi)有任何效果。 td中的文本過(guò)長(zhǎng)時(shí)依然自動(dòng)換了一行像下面這要設(shè)定一下就行了
2008-08-08
IE6/IE7/IE8/IE9中tbody的innerHTML不能賦值的完美解決方案
最近發(fā)現(xiàn)各大類(lèi)庫(kù)都能利用xxx.innerHTML=HTML片斷來(lái)生成節(jié)點(diǎn)元素，再把它們插入到目標(biāo)元素的各個(gè)位置上。這東西實(shí)際上就是insertAdjacentHTML，但是IE可惡的innerHTML把這優(yōu)勢(shì)變成劣勢(shì)。
2014-06-06