Web Developer插件 Information工具教程_Div+CSS教程
Web Developer插件的Information工具是一個(gè)包羅很多實(shí)用功能的地方,有些東西對(duì)于我們CSS網(wǎng)頁布局設(shè)計(jì)顯得非常有用。Information工具提供的功能非常多,我們僅挑一些CSS網(wǎng)頁布局設(shè)計(jì)中常用的功能加以介紹。該工具菜單如下圖:

1、Display Blocks Size 顯示塊元素對(duì)象的尺寸。該功能將頁面中所有div描邊為紅色進(jìn)行區(qū)域劃分,同時(shí)顯示出該div區(qū)域的尺寸。如下圖:

2、Display Div order 顯示網(wǎng)頁中div在xhtml代碼中的順序與編號(hào)。用紅色的線框進(jìn)行區(qū)域劃分,并顯示div編號(hào)。如下圖:

3、Display Element Information 顯示元素信息。非常實(shí)用的功能之一,點(diǎn)選該命令,會(huì)在網(wǎng)頁中顯示一個(gè)浮動(dòng)的窗口,鼠標(biāo)移動(dòng)到不同的網(wǎng)頁對(duì)象上時(shí),會(huì)用紅線框標(biāo)識(shí)當(dāng)前對(duì)象,并且顯示該對(duì)象的一些信息:名稱、樣式、title、target、href等等。該功能會(huì)折疊顯示一些信息,如定位等。如下圖:

4、Display ID & Class Details 顯示ID和Class的細(xì)節(jié)。點(diǎn)選該功能,將對(duì)頁面中的對(duì)象標(biāo)出其ID和Class的名稱。如下圖:

5、Display Link Details 顯示鏈接的信息。此功能將在頁面中標(biāo)注出鏈接的URL。
6、Display Stack Levels 顯示層級(jí)關(guān)系。若頁面中使用了z-index屬性的定位,將顯示對(duì)象的z-index屬性值。
7、Display Table Information 顯示表格信息。與上面的一些功能相似,標(biāo)注顯示出表格的詳細(xì)信息。
其它的信息大家自己試一下就能明白它的作用,我們這里就不詳細(xì)的深入了,需要提示你注意View Color Information查看色彩信息,會(huì)將頁面中應(yīng)用的色彩用方塊以一個(gè)新的標(biāo)簽頁顯示出來,對(duì)于頁面美工的色彩設(shè)計(jì)有非常大的作用。
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-Web Developer插件 Information工具教程
。