Dreamweaver教程：CSS制作細(xì)框表格

細(xì)線框表格是我們?cè)诰W(wǎng)頁(yè)制作中經(jīng)常需要用到的效果之一，制作細(xì)線框表格的方法很多，代碼兼容性最高的還是單元格背景填充法，不過(guò)常規(guī)寫(xiě)法產(chǎn)生的垃圾代碼較多，今天我們轉(zhuǎn)換思路用CSS來(lái)實(shí)現(xiàn)該效果。整個(gè)過(guò)程完全在Dreamweaver可視化界面下完成，不需要大家手工寫(xiě)任何代碼，非常簡(jiǎn)單。

    新建CSS樣式

    運(yùn)行Dreamweaver，點(diǎn)擊菜單“窗口”→“CSS樣式”調(diào)用CSS面板。在面板中點(diǎn)擊“新建CSS規(guī)則”按鈕，如圖1。

    進(jìn)入“新建CSS規(guī)則”對(duì)話框，將“選擇器類(lèi)型”設(shè)置為：高級(jí)；鍵入“選擇器”名稱(chēng)：.bk(名稱(chēng)由大家任意確定，但該樣式以后會(huì)反復(fù)調(diào)用，不可搞錯(cuò))；“定義在”設(shè)置為“僅對(duì)該文檔”，點(diǎn)擊“確定”按鈕完成，如圖2。

    現(xiàn)在名為“.bk”的CSS就建立好了，接下來(lái)我們?yōu)樗砑右粋€(gè)子選擇器。繼續(xù)在CSS面板中點(diǎn)擊“新建CSS規(guī)則”按鈕，基本設(shè)置如圖2，不過(guò)選擇器名稱(chēng)定義為“.bk td”(表示這是一個(gè)依附于.bk的子樣式)。依然進(jìn)入“CSS規(guī)則定義”對(duì)話框，繼續(xù)設(shè)置背景顏色，本例值為“#FFFFFF”，即白色，點(diǎn)擊“確定”按鈕完成。

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)