在前一段時(shí)間制作了CSS calendar,然后我就想用css制作一個(gè)table的模型,該模型遵循親和力規(guī)則,而且有良好的視覺效果圖:顏色的選擇和搭配這樣做的好處是: 利用表格來裝載數(shù)據(jù),不言而喻是最好的,你可以很靈活的為每個(gè)單元格定義樣式。下面是具體的做法首先在photoshop設(shè)計(jì)一個(gè)效果出來,通過對(duì)各種顏色,小圖標(biāo)等的常識(shí),做出了一個(gè)效果令人滿意的效果圖來。下一步呢,裁處下面三個(gè)圖片來作為標(biāo)題的背景圖片,如果你對(duì)顏色的把握不是很好的話,這里給你提供一些調(diào)色工具www.snook.ca/technical/colour_contrast/colour.htmlveerle.duoh.com/comments.php?id=108_0_2_20_C8數(shù)據(jù)結(jié)構(gòu)為
Table 1: Power Mac G5 tech specs Configurations | Dual 1.8GHz | Dual 2GHz | Dual 2GHz |
Model | M9454LL/A | M9455LL/A | M9457LL/A |
... 可以看到我用了scope 屬性來確保這個(gè)表格在無視覺效果的瀏覽器下展示出更好的效果,這個(gè)屬性定義標(biāo)題元素包含的標(biāo)題內(nèi)容是否為 行 (scope="col") 或 列(scope="row") 。下面是CSS的內(nèi)容對(duì)于上面的標(biāo)題,使用和背景來更好的區(qū)分出他們th {: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,sans-serif;color: #6D929B;border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;border-top: 1px solid #C1DAD7;letter-spacing: 2px;text-transform: uppercase;text-align: left;padding: 6px 6px 6px 12px;background: #CAE8EA url(images/bg_header.jpg) no-repeat;}th.nobg {border-top: 0;border-left: 0;border-right: 1px solid #C1DAD7;background: none;} 下面定義左側(cè)的標(biāo)題樣式th.spec { border-left: 1px solid #C1DAD7;border-top: 0;background: #fff url(images/bullet1.gif) no-repeat;: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,sans-serif;}th.specalt {border-left: 1px solid #C1DAD7;border-top: 0;background: #f5fafa url(images/bullet2.gif) no-repeat;: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica,sans-serif;color: #B4AA9D;} 這里的數(shù)據(jù)來自于MAC的technical specifications of each Power Mac G5http://www.apple.com/powermac/specs.html下來定義普通的和重要的數(shù)據(jù)內(nèi)容td {border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;background: #fff;padding: 6px 6px 6px 12px;color: #6D929B;}td.alt {background: #F5FAFA;color: #B4AA9D;} 至此,整個(gè)制作過程結(jié)束了譯者的話:這個(gè)頁面經(jīng)我測試通過W3C標(biāo)準(zhǔn)嚴(yán)格型驗(yàn)證,而且兼容IE,F(xiàn)irefox,Opera等主流瀏覽器,對(duì)于大量數(shù)據(jù),可以利用js實(shí)現(xiàn)行兩種背景交替顯示。
網(wǎng)站名稱:用CSS制作親和力的表格[網(wǎng)站建設(shè)]
URL標(biāo)題:http://jinyejixie.com/news/33552.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站建設(shè)等
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)