使用傳統(tǒng)方法開(kāi)發(fā)控件的缺點(diǎn)使用傳統(tǒng)的技術(shù)開(kāi)發(fā)一個(gè)控件常常是從用一個(gè)包含了一個(gè)矩形或其它形狀文本輸入框的小圖標(biāo)開(kāi)始的。這個(gè)控件也許使用陰影、光效、傾斜或者其它的效果予以修飾，但是它本質(zhì)也只是一個(gè)包含了文本的框架。首先，你需要為控件的每個(gè)狀態(tài)創(chuàng)建一個(gè)獨(dú)立的圖標(biāo)。例如，你需要為控件在默認(rèn)情況下創(chuàng)建一個(gè)圖標(biāo)，還要為其在鼠標(biāo)指針指向這個(gè)控件的時(shí)候創(chuàng)建一個(gè)圖標(biāo)。僅僅是這樣一個(gè)簡(jiǎn)單的效果，你需要至少兩個(gè)圖標(biāo)（默認(rèn)和鼠標(biāo)指向兩個(gè)狀態(tài)），如果你要加入點(diǎn)擊和訪問(wèn)過(guò)的狀態(tài)，每個(gè)控件需要三或四個(gè)圖標(biāo)。在你的網(wǎng)頁(yè)中加入一個(gè)基本的圖標(biāo)用于超鏈接再簡(jiǎn)單不過(guò)，只需要牢記輸入合適的位置以滿足訪問(wèn)需要為了使你的控件具有交互性，你需要增加javascript腳本代碼來(lái)使控件圖標(biāo)能夠在鼠標(biāo)事件發(fā)生的時(shí)候有所反應(yīng)，比如說(shuō)在鼠標(biāo)指向圖標(biāo)的時(shí)候。像Dreamweaver這樣的開(kāi)發(fā)軟件可以使用簡(jiǎn)單的鼠標(biāo)操作自動(dòng)添加代碼，但是這些代碼包含了網(wǎng)頁(yè)的大小信息。為了使得動(dòng)態(tài)效果，你需要預(yù)先下載圖片這樣當(dāng)用戶指向這個(gè)控件的時(shí)候?yàn)g覽器能立即改變。預(yù)先下載圖片將會(huì)使網(wǎng)頁(yè)的加載時(shí)間變長(zhǎng)，而且它的不方便之處還在于即使是用戶不需要使用所有的控件，它也要加載所有的圖片的。是什么使得CSS技術(shù)具有優(yōu)越性？使用CSS，你可以從一個(gè)簡(jiǎn)單的文本超鏈接中創(chuàng)建一個(gè)完全的交互控件。適當(dāng)?shù)母袷交梢园岩粋�(gè)段落變化或者分解成一個(gè)圍繞著文本超鏈接的矩形框。在超鏈接文本中添加動(dòng)態(tài)效果，只需要多幾條簡(jiǎn)單的CSS代碼可以使得控件具有交互性。與基于圖標(biāo)的空間相比，這個(gè)控件有以下幾個(gè)優(yōu)點(diǎn)：1、不需要任何的圖標(biāo)。CSS通過(guò)格式化文本來(lái)創(chuàng)建控件效果，所以不需要?jiǎng)?chuàng)建任何獨(dú)立的圖標(biāo)文件。2、你不需要鍵入任何的文本屬性，因?yàn)镃SS控件的文本已經(jīng)具有了完全的可訪問(wèn)性。3、更加有效的代碼。CSS規(guī)則和分類的代碼比其所取代的javascript腳本代碼更小，因而瀏覽器執(zhí)行的更快。4、沒(méi)有圖標(biāo)需要預(yù)先加載。含有CSS控件的網(wǎng)頁(yè)加載速度要明顯快一些。5、CSS規(guī)則可以在所有的網(wǎng)站上容易地使用和維護(hù)�？梢酝ㄟ^(guò)修改你的CSS風(fēng)格更改你網(wǎng)頁(yè)上所有的控件形態(tài)。通過(guò)為超鏈接的控件格式化創(chuàng)建規(guī)則，你可以通過(guò)在其他文件中使用超連接格式化使控件看上去和用起來(lái)與其它的不同。解析一個(gè)CSS控件的例子下面是一個(gè)引用的CSS風(fēng)格表單的例子。格式化規(guī)則創(chuàng)建的.button類有80象素寬，背景是黑色的，白色的邊框，白色的文本框。.button{....border:1pxsolidWhite;....padding:5px;....width:80px;....color:White;....font-family:Arial,Helvetica,sans-serif;....font-size:1.1em;....font-weight:normal;....text-align:center;....height:1.25em;....background-color:Black;}接下來(lái)，風(fēng)格表單包括具體說(shuō)明格式是如何隨著超鏈接的狀態(tài)變化而變化的規(guī)則。這些規(guī)則都是相互關(guān)聯(lián)的并且只在類.button的范圍內(nèi)影響。默認(rèn)的鏈接狀態(tài)不改變；鼠標(biāo)覆蓋的狀態(tài)是在藍(lán)色背景下的白色的文本邊框；訪問(wèn)過(guò)的狀態(tài)是在深灰色背景下的淺灰色文本框。.buttona:link{text-decoration:none;color:White;}.buttona:hover{text-decoration:none;color:White;font-weight:bold;background:Blue;}.buttona:visited{text-decoration:none;color:#BBBBBB;background:#333333;}下面的代碼顯示了在網(wǎng)頁(yè)上使用CSS控件的簡(jiǎn)單操作。所有需要做的只是將合適的類的屬性添加到模塊標(biāo)簽中去（例如分段或者是段落），而這個(gè)標(biāo)簽包含一個(gè)簡(jiǎn)單的超鏈接。在這種情況下，結(jié)果將是三個(gè)矩形控件：Home，Gallery和AboutUs。HomeGalleryAboutUs在文本超鏈接中使用CSS格式創(chuàng)建控件是既快而且的，并且結(jié)果對(duì)于大多用戶都足夠滿足需要。這個(gè)技術(shù)的優(yōu)勢(shì)對(duì)于基于圖標(biāo)的控件開(kāi)發(fā)可以創(chuàng)造出一個(gè)新的標(biāo)準(zhǔn)。
- TEL：131 7970 3111
-
慧網(wǎng)微信
- 掃描二維碼
- 關(guān)注邳州在線
-
手機(jī)網(wǎng)站
- 手機(jī)掃描二維碼
- 進(jìn)入手機(jī)站
網(wǎng)站地圖
付款方式