表單的制作是在進行CSS網頁布局的時候經常會碰到的，同時表單的制作也是一項比較頭疼的問題，我們今天學習一個CSS表單實例，我個人認為效果挺不錯。
　　看下面的效果：


　　首頁我們進行整體的規劃：

　　建立一個容器main將表單元素及其它相關元素一起扔進去。
　　設置標簽h1，放置User Login。
　　設置標簽h2，放置“請輸入您的用戶名和密碼”。
　　設置“Username”與“Password”表單提示文字的容器。
　　設置表單輸入框。
　　設置密碼找回的文字鏈接。
　　最終我們設置提交表單的按鈕圖片。

　　我們形成如下的xhtml代碼：


　　下面我們開始進行CSS代碼的編寫，實現這一款表單效果。

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


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

接下來我們設置h2“請輸入您的用戶名和密碼”


　　高度與寬度為208px、24px。進行上填充的調整，設置背景圖片，文字縮進，以及字體加粗為100等。

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


　　背景色為#fff白色，邊框1px、實線、#ccc灰色。
　　設置文字顏色，字體及大小。
　　設置輸入框的高度與寬度196px、22px。
　　由于想要與提示文字左對齊，我們設置左邊距為6px。
　　為了給小圖標留下足夠的空間，我們內容左填充為20px。
　　輸入框input內的文字可能與小圖標不能水平對齊，我們預調行高為20px。


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

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


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

　　我們來看完整的CSS代碼：


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

　　我們看最終的運行效果：