|
表格的模擬
1、模擬前的建議:
DIV就是DIV 而不是table,極力反對(duì)變下面這樣的DIV模擬表格,偶爾也考慮考慮一下親和力
<div>
<div>
<div>...</div>
</div>
</div>
2、兩列多行的數(shù)據(jù)顯示:
兩列多行的數(shù)據(jù)顯示應(yīng)用得最多的是文章列表之類的,一般來(lái)說(shuō)主要由標(biāo)題,時(shí)間組成的.
我選擇ol來(lái)做~是下面演示的是有有序列表~可能你會(huì)問(wèn)我~為什么不用ul呢??
在參考中說(shuō)到ol:繪制文本的編號(hào)列表,ul:繪制文本的項(xiàng)目符號(hào)列表 簡(jiǎn)單的說(shuō)就是ol是有序列表,ul是無(wú)序列表
html部分
<ol>
<li><a href="#" title="晚上我沒(méi)吃飯">晚上我沒(méi)吃飯</a>2-13</li>
<li><a href="#" title="今天是中國(guó)的情人節(jié),要一個(gè)人過(guò)">今天是中國(guó)的情人節(jié),要一個(gè)人過(guò)</a>2-12</li>
<li><a href="#" title="下午朋友來(lái)看我">下午朋友來(lái)看我</a>2-11</li>
<li><a href="#" title="^_^ 發(fā)工資拉">^_^ 發(fā)工資拉,</a>2-10</li>
<li><a href="#" title="...">...........</a> ....</li>
</ol>
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
CSS部分
ol.news{
width:400px;/*裝飾用的~只限顯示的數(shù)據(jù)總寬度 */
list-style-type :none;/*去掉列表數(shù)據(jù)*/
}
ol.news li{
text-align:right;/* 把文本右對(duì)齊,主要的作用是把時(shí)間放在右邊*/
clear:both;/*清行*/
}
ol.news li a{
float:left;
display : inline;/* 再把主要顯示的內(nèi)容浮動(dòng)到左邊*/
text-align:left;/* 文本左對(duì)齊,可選~保證更多的瀏覽器是左對(duì)齊*/
}
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
另一種方法:
html
<ul class="news2">
<li><span>[廣東]</span>這里沒(méi)電了</li>
<li><span>[四川]</span>這里也沒(méi)電了</li>
<li><span>[上海]</span>郁悶!同上,沒(méi)電啊~</li>
<li><span>[北京]</span>挖哈哈 ^_^ 這里有電~</li>
<li><span>....</span>........</li>
</ul>
css
ul.news2{
width:400px;
list-style-type :none;
}
ul.news2 li{
text-align:left;/*這回向左對(duì)齊,因?yàn)槲覀円裺pan浮到右邊*/
}
ul.news2 li span
{
float:right;/*我浮我浮我浮浮浮,我在右邊了*/
display : inline;
}
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
更多的裝飾
我們可以加background,border,font等定義~可以把他定義得漂亮點(diǎn),不過(guò)這里的目的已經(jīng)達(dá)到了,漂亮的樣式等大家自己去嘗試
2、三列多行的數(shù)據(jù)顯示:
這里依然選擇文章列表來(lái)做演示,選擇標(biāo)簽為ol,li,a,address,i.當(dāng)然,你也可以依照你的文檔資料選擇如span,b,s等來(lái)做
<ol class="art">
<li><a herf="#" title="...">[原創(chuàng):JS]由淺到深了解JavaScript類</a><address>笨紅</address><i>2-9</i></li>
<li><a herf="#" title="...">[原創(chuàng):CSS]正確認(rèn)識(shí)html與body </a><address>一葉千鳥(niǎo)</address><i>2-8</i></li>
<li><a herf="#" title="...">[灌水:泡MM]沒(méi)有MM的日子怎樣過(guò)</a><address>嗷嗷</address><i>2-8</i></li>
<li><a herf="#" title="...">........</a><address>....</address><i>....</i></li>
</ol>
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
CSS部分
ol.art{
list-style-type :none;
}
ol.art li{
clear:both;/*清行*/
}
ol.art li a{
width:500px;/*定義寬度只是發(fā)了對(duì)齊*/
float:left;display:inline;/*不能路過(guò)就浮過(guò)吧*/
}
ol.art li address{
width:100px;
font-style : normal;/*中文斜體不是很好看的說(shuō)*/
float:left;display:inline;
}
ol.art li i{
font-style : normal;
float:left;display:inline;
}
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
總結(jié)
當(dāng)做到三列時(shí)~我發(fā)現(xiàn)我已經(jīng)一步一步的走向我反對(duì)的那種模擬了.
HTML4的時(shí)代table,table已經(jīng)成為基本所有的網(wǎng)頁(yè)設(shè)計(jì)用來(lái)布局的工具, XHTML1.x的時(shí)代table的任務(wù)只是數(shù)據(jù)顯示,我支持表格的使用,不過(guò)不是用來(lái)布局的, 要想完全拋棄table,我認(rèn)為應(yīng)該等到瀏覽器們都支持display: table的CSS2才可以
以前文章只是個(gè)人看法,在WEB設(shè)計(jì)中我屬于學(xué)得晚的,學(xué)得菜的,可能里面說(shuō)的有些不大對(duì),也希望大家能幫我指出來(lái).
經(jīng)典論壇討論帖：
http://m.95time.cn/bbs/NewsDetail.asp?id=2455054
本文鏈接：http://m.95time.cn/tech/site/2006/3299.asp 
出處：藍(lán)色理想
責(zé)任編輯：moby
上一頁(yè) 如何用CSS定義表格與模擬表格 [1] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)站綜合、網(wǎng)頁(yè)制作版塊參加討論
|
第 1 頁(yè) 
第 2 頁(yè) 如何用CSS定義表格與模擬表格 [2]
