CSSFormExample:帶有小圖標的清爽CSS表單設計!_DIV+CSS實例
教程Tag:暫無Tag,歡迎添加,賺取U幣!
表單的制作是在進行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網頁布局中是非常重要的,有很多效果是通過這種方式來實現的。
我們看最終的運行效果:
代碼調試框 [www.ghpqjb.com]
[ 可先修改部分代碼 再運行查看效果 ]
看下面的效果:

首頁我們進行整體的規劃:
建立一個容器main將表單元素及其它相關元素一起扔進去。
設置標簽h1,放置User Login。
設置標簽h2,放置“請輸入您的用戶名和密碼”。
設置“Username”與“Password”表單提示文字的容器。
設置表單輸入框。
設置密碼找回的文字鏈接。
最終我們設置提交表單的按鈕圖片。
我們形成如下的xhtml代碼:
示例代碼 [www.ghpqjb.com]
<div id="main">
<h1 id="title">User Login</h1>
<h2 id="login">請輸入您的用戶名和密碼</h2>
<p class="formt">Username</p>
<p><input name="Username" type="text" class="username"></p>
<p class="formt">Password</p>
<p><input name="Password" type="password" class="password"></p>
<p id="forget"><a href="http://www.ghpqjb.com/" target="_blank">ForGet Password ? </a></p>
<p id="button"><input type="image" src="loginin.gif" class="imgbutton" /></p>
</div>
<h1 id="title">User Login</h1>
<h2 id="login">請輸入您的用戶名和密碼</h2>
<p class="formt">Username</p>
<p><input name="Username" type="text" class="username"></p>
<p class="formt">Password</p>
<p><input name="Password" type="password" class="password"></p>
<p id="forget"><a href="http://www.ghpqjb.com/" target="_blank">ForGet Password ? </a></p>
<p id="button"><input type="image" src="loginin.gif" class="imgbutton" /></p>
</div>
下面我們開始進行CSS代碼的編寫,實現這一款表單效果。
我們發現h2元素title與表單提示文字的類formt,除了背景色不同,其它的屬性是相同的,我們將它們合并起來編寫,在后面我們單獨定義類formt與title的不同之處,進一步簡化代碼。
示例代碼 [www.ghpqjb.com]
#title,.formt { width:208px; height:26px; line-height:26px; text-indent:5px; font-family:verdana, tahoma, sans-serif; font-size:10px; background:#ddd;}
.formt { display:block; font-weight:800; background:#fff;}
.formt { display:block; font-weight:800; background:#fff;}
title與的formt共同屬性:
高度與寬度為208px、26px。
行高26px,文字縮進5px。
定義了字體及文字大小。
設置背景色為#ddd淺灰色。
類.formt進行單獨定義:
設置為塊元素,文字加粗。
由于title是h1標簽,瀏覽器默認為加粗,所以不必再單獨定義。
設置formt的背景色為#fff白色。
接下來我們設置h2“請輸入您的用戶名和密碼”
示例代碼 [www.ghpqjb.com]
#login { width:208px; height:24px; padding-top:11px; background:url(warning.gif) no-repeat 9px 8px; text-indent:28px; font-size: 12px; color:#666; font-weight:100;}
高度與寬度為208px、24px。進行上填充的調整,設置背景圖片,文字縮進,以及字體加粗為100等。
同上面的情況類似,表單輸入框類.username和類.password除了小圖標的不同,其它的屬性是相同的,進一步簡化代碼我們也將它們合并編寫。
示例代碼 [www.ghpqjb.com]
.username,.password {
background:#fff;
border:1px solid #ccc;
color:#000;
font-family:verdana, tahoma, sans-serif;
font-size:12px;
width:196px;
height:22px;
margin-left:6px;
padding-left:20px;
line-height:20px;
}
background:#fff;
border:1px solid #ccc;
color:#000;
font-family:verdana, tahoma, sans-serif;
font-size:12px;
width:196px;
height:22px;
margin-left:6px;
padding-left:20px;
line-height:20px;
}
背景色為#fff白色,邊框1px、實線、#ccc灰色。
設置文字顏色,字體及大小。
設置輸入框的高度與寬度196px、22px。
由于想要與提示文字左對齊,我們設置左邊距為6px。
為了給小圖標留下足夠的空間,我們內容左填充為20px。
輸入框input內的文字可能與小圖標不能水平對齊,我們預調行高為20px。
示例代碼 [www.ghpqjb.com]
.username { background:url(username.gif) no-repeat 2px 2px;}
.password { background:url(password.gif) no-repeat 2px 2px;}
.password { background:url(password.gif) no-repeat 2px 2px;}
上面的代碼分別給類.username和類.password定義小圖標。需要你注重的是背景圖片為不重復,定位在距左、距頂均為2px的地方。由于我們在上面的代碼中,已定義了左填充為20px,小圖標有足夠的空間顯示出來,而不用擔心輸入表單的文字會遮蓋它。
下面我們定義忘記密碼的鏈接與表單的按鈕圖片。
示例代碼 [www.ghpqjb.com]
#forget a { width:208px; height:20px; line-height:20px; text-indent:3px; font-family:verdana, tahoma, sans-serif; font-size:10px; color:#f60}
#button { width:208px; height:28px; }
.imgbutton {margin-top:7px; margin-left:132px; }
#button { width:208px; height:28px; }
.imgbutton {margin-top:7px; margin-left:132px; }
關于忘記密碼的鏈接,進行簡單的定義就可以了,當然,你也可以完善它,定義鏈接的hover屬性。
我們設置按鈕圖片的容器button寬度和高度208px、28px。
表單提交按鈕我們在xhtml中,是這樣編寫的:input type="image" src="loginin.gif"
這樣編寫的好處在于,我們輸入完用戶名和密碼以后,除了可以用鼠標點擊提交,直接按回車就可以提交表單。增強用戶的易用性。
類imgbutton對表單按鈕進行了設置,讓它處在合適的位置,頂邊距與左邊距設置一下就可以了。
我們來看完整的CSS代碼:
示例代碼 [www.ghpqjb.com]
* { margin:0; padding:0;}
#main { width:208px; margin:50px;}
#title,.formt { width:208px; height:26px; line-height:26px; text-indent:5px; font-family:verdana, tahoma, sans-serif; font-size:10px; background:#ddd;}
#login { width:208px; height:24px; padding-top:11px; background:url(warning.gif) no-repeat 9px 8px; text-indent:28px; font-size: 12px; color:#666; font-weight:100;}
.formt { display:block; font-weight:800; background:#fff;}
.username,.password {
background:#fff;
border:1px solid #ccc;
color:#000;
font-family:verdana, tahoma, sans-serif;
font-size:12px;
width:196px;
height:22px;
margin-left:6px;
padding-left:20px;
line-height:20px;
}
.username { background:url(username.gif) no-repeat 2px 2px;}
.password { background:url(password.gif) no-repeat 2px 2px;}
#forget a { width:208px; height:20px; line-height:20px; text-indent:3px; font-family:verdana, tahoma, sans-serif; font-size:10px; color:#f60}
#button { width:208px; height:28px; }
.imgbutton {margin-top:7px; margin-left:132px; }
#main { width:208px; margin:50px;}
#title,.formt { width:208px; height:26px; line-height:26px; text-indent:5px; font-family:verdana, tahoma, sans-serif; font-size:10px; background:#ddd;}
#login { width:208px; height:24px; padding-top:11px; background:url(warning.gif) no-repeat 9px 8px; text-indent:28px; font-size: 12px; color:#666; font-weight:100;}
.formt { display:block; font-weight:800; background:#fff;}
.username,.password {
background:#fff;
border:1px solid #ccc;
color:#000;
font-family:verdana, tahoma, sans-serif;
font-size:12px;
width:196px;
height:22px;
margin-left:6px;
padding-left:20px;
line-height:20px;
}
.username { background:url(username.gif) no-repeat 2px 2px;}
.password { background:url(password.gif) no-repeat 2px 2px;}
#forget a { width:208px; height:20px; line-height:20px; text-indent:3px; font-family:verdana, tahoma, sans-serif; font-size:10px; color:#f60}
#button { width:208px; height:28px; }
.imgbutton {margin-top:7px; margin-left:132px; }
我們完成了這個表單的xhtml與css代碼的編寫。從這個小實例中,你應該能夠把握背景圖片的靈活運用,這種應用的方式在CSS網頁布局中是非常重要的,有很多效果是通過這種方式來實現的。
我們看最終的運行效果:
代碼調試框 [www.ghpqjb.com][ 可先修改部分代碼 再運行查看效果 ]
相關DIV+CSS實例:
- 相關鏈接:
- 教程說明:
DIV+CSS實例-CSSFormExample:帶有小圖標的清爽CSS表單設計!
。