欧美激情婬妇A片AAA毛多水多_自拍偷拍专区_日本无码在线_熟女人妻のav中文字幕精品图集_欧美性爱视频在线看

用CSS制作親和力的表格[網(wǎng)站建設(shè)]

發(fā)布時(shí)間:2006-05-28來(lái)源：本站點(diǎn)擊數(shù):18
在前一段時(shí)間制作了CSScalendar，然后我就想用css制作一個(gè)table的模型，該模型遵循親和力規(guī)則，而且有良好的視覺效果圖：顏色的選擇和搭配這樣做的好處是：利用表格來(lái)裝載數(shù)據(jù)，不言而喻是最好的，你可以很靈活的為每個(gè)單元格定義樣式。下面是具體的做法首先在...
在前一段時(shí)間制作了CSS calendar，然后我就想用css制作一個(gè)table的模型，該模型遵循親和力規(guī)則，而且有良好的視覺效果 圖：顏色的選擇和搭配 這樣做的好處是： 利用表格來(lái)裝載數(shù)據(jù)，不言而喻是最好的，你可以很靈活的為每個(gè)單元格定義樣式。下面是具體的做法 首先在photoshop設(shè)計(jì)一個(gè)效果出來(lái)，通過(guò)對(duì)各種顏色，小圖標(biāo)等的常識(shí)，做出了一個(gè)效果令人滿意的效果圖來(lái)。下一步呢，裁處下面三個(gè)圖片來(lái)作為標(biāo)題的背景圖片，如果你對(duì)顏色的把握不是很好的話，這里給你提供一些調(diào)色工具 www.snook.ca/technical/colour_contrast/colour.html veerle.duoh.com/comments.php?id=108_0_2_20_C8 數(shù)據(jù)結(jié)構(gòu)為 ... 可以看到我用了scope 屬性來(lái)確保這個(gè)表格在無(wú)視覺效果的瀏覽器下展示出更好的效果，這個(gè)屬性定義標(biāo)題元素包含的標(biāo)題內(nèi)容是否為 行 (scope="col") 或 列(scope="row") 。下面是CSS的內(nèi)容對(duì)于上面的標(biāo)題，使用和背景來(lái)更好的區(qū)分出他們 th { font: 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; font: 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; font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #B4AA9D; } 這里的數(shù)據(jù)來(lái)自于MAC的technical specifications of each Power Mac G5http://www.apple.com/powermac/specs.html下來(lái)定義普通的和重要的數(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è)制作過(guò)程結(jié)束了 譯者的話：這個(gè)頁(yè)面經(jīng)我測(cè)試通過(guò)W3C標(biāo)準(zhǔn)嚴(yán)格型驗(yàn)證，而且兼容IE，F(xiàn)irefox，Opera等主流瀏覽器，對(duì)于大量數(shù)據(jù)，可以利用js實(shí)現(xiàn)行兩種背景交替顯示。 
    • 
Table 1: Power Mac G5 tech specs 

      
  Configurations
  Dual 1.8GHz
  Dual 2GHz
  Dual 2GHz

      

      
  Model
  M9454LL/A
  M9455LL/A
  M9457LL/A

      
		   
           
        
      
    
    
        
       
	   
	
 













          <sub id="t98rn"></sub>
        •