表單的制作是在進(jìn)行CSS網(wǎng)頁(yè)布局的時(shí)候經(jīng)常會(huì)碰到的，同時(shí)表單的制作也是一項(xiàng)比較頭疼的問題，我們今天學(xué)習(xí)一個(gè)CSS表單實(shí)例，我個(gè)人認(rèn)為效果挺不錯(cuò)。
　　看下面的效果：


　　首頁(yè)我們進(jìn)行整體的規(guī)劃：

　　建立一個(gè)容器main將表單元素及其它相關(guān)元素一起扔進(jìn)去。
　　設(shè)置標(biāo)簽h1，放置User Login。
　　設(shè)置標(biāo)簽h2，放置“請(qǐng)輸入您的用戶名和密碼”。
　　設(shè)置“Username”與“Password”表單提示文字的容器。
　　設(shè)置表單輸入框。
　　設(shè)置密碼找回的文字鏈接。
　　最終我們?cè)O(shè)置提交表單的按鈕圖片。

　　我們形成如下的xhtml代碼：


　　下面我們開始進(jìn)行CSS代碼的編寫，實(shí)現(xiàn)這一款表單效果。

　　我們發(fā)現(xiàn)h2元素title與表單提示文字的類formt，除了背景色不同，其它的屬性是相同的，我們將它們合并起來編寫，在后面我們單獨(dú)定義類formt與title的不同之處，進(jìn)一步簡(jiǎn)化代碼。


　　title與的formt共同屬性：
　　　高度與寬度為208px、26px。
　　　行高26px，文字縮進(jìn)5px。
　　　定義了字體及文字大小。
　　　設(shè)置背景色為#ddd淺灰色。
　　類.formt進(jìn)行單獨(dú)定義：
　　　設(shè)置為塊元素，文字加粗。
　　　由于title是h1標(biāo)簽，瀏覽器默認(rèn)為加粗，所以不必再單獨(dú)定義。
　　　設(shè)置formt的背景色為#fff白色。

接下來我們?cè)O(shè)置h2“請(qǐng)輸入您的用戶名和密碼”


　　高度與寬度為208px、24px。進(jìn)行上填充的調(diào)整，設(shè)置背景圖片，文字縮進(jìn)，以及字體加粗為100等。

　　同上面的情況類似，表單輸入框類.username和類.password除了小圖標(biāo)的不同，其它的屬性是相同的，進(jìn)一步簡(jiǎn)化代碼我們也將它們合并編寫。


　　背景色為#fff白色，邊框1px、實(shí)線、#ccc灰色。
　　設(shè)置文字顏色，字體及大小。
　　設(shè)置輸入框的高度與寬度196px、22px。
　　由于想要與提示文字左對(duì)齊，我們?cè)O(shè)置左邊距為6px。
　　為了給小圖標(biāo)留下足夠的空間，我們內(nèi)容左填充為20px。
　　輸入框input內(nèi)的文字可能與小圖標(biāo)不能水平對(duì)齊，我們預(yù)調(diào)行高為20px。


　　上面的代碼分別給類.username和類.password定義小圖標(biāo)。需要你注重的是背景圖片為不重復(fù)，定位在距左、距頂均為2px的地方。由于我們?cè)谏厦娴拇�碼中，已定義了左填充為20px，小圖標(biāo)有足夠的空間顯示出來，而不用擔(dān)心輸入表單的文字會(huì)遮蓋它。

　　下面我們定義忘記密碼的鏈接與表單的按鈕圖片。


　　關(guān)于忘記密碼的鏈接，進(jìn)行簡(jiǎn)單的定義就可以了，當(dāng)然，你也可以完善它，定義鏈接的hover屬性。
　　我們?cè)O(shè)置按鈕圖片的容器button寬度和高度208px、28px。
　　表單提交按鈕我們?cè)趚html中，是這樣編寫的：input type="image" src="loginin.gif"
　　這樣編寫的好處在于，我們輸入完用戶名和密碼以后，除了可以用鼠標(biāo)點(diǎn)擊提交，直接按回車就可以提交表單。增強(qiáng)用戶的易用性。
　　類imgbutton對(duì)表單按鈕進(jìn)行了設(shè)置，讓它處在合適的位置，頂邊距與左邊距設(shè)置一下就可以了。

　　我們來看完整的CSS代碼：


　　我們完成了這個(gè)表單的xhtml與css代碼的編寫。從這個(gè)小實(shí)例中，你應(yīng)該能夠把握背景圖片的靈活運(yùn)用，這種應(yīng)用的方式在CSS網(wǎng)頁(yè)布局中是非常重要的，有很多效果是通過這種方式來實(shí)現(xiàn)的。

　　我們看最終的運(yùn)行效果：