divcss表單布局的五個(gè)小技巧_Div+CSS教程
教程Tag:暫無(wú)Tag,歡迎添加,賺取U幣!
div css表單布局的五個(gè)小技巧可以幫助你更靈活的控制表單,使頁(yè)面更加滿足。
1、表單文本輸入的移動(dòng)選擇:
在文本輸入欄中,假如加入了提示,來(lái)訪者往往要用鼠標(biāo)選取后刪除,再輸入有用的信息。其實(shí)只要加入onMouseOver="this.focus()" onFocus="this.select()" 代碼到 <textarea> 中,一切就會(huì)變得簡(jiǎn)單多了,如:
類似的,可以加入代碼到<input>。
2、表單輸入單元點(diǎn)擊刪除:
本列同上則作用類似,只是使用鼠標(biāo)上略有變化,需要點(diǎn)擊而不像上則的只要鼠標(biāo)覆蓋。如:
點(diǎn)擊輸入單元后,提示信息會(huì)刪除,是不是很方便。
3、表單輸入單元的邊框設(shè)置:
更改傳統(tǒng)的表單單元邊框,會(huì)讓你的主頁(yè)生色不少。如:
其中"style=***"為左右上下和背景色設(shè)置,適用于其它單元,請(qǐng)讀者親自試試。
4、表單輸入單元的文字設(shè)置:
表單中單元的字體是可以修改的,如:
其中"style=***"為字體和字大小設(shè)置。
5、修改表單屬性為彈出窗口:
大多數(shù)表單激活后,會(huì)在當(dāng)前頁(yè)面中打開(kāi),影響正常瀏覽。不如修改一下,如:
其中"target=_blank"為控制在彈出窗口打開(kāi)。
1、表單文本輸入的移動(dòng)選擇:
在文本輸入欄中,假如加入了提示,來(lái)訪者往往要用鼠標(biāo)選取后刪除,再輸入有用的信息。其實(shí)只要加入onMouseOver="this.focus()" onFocus="this.select()" 代碼到 <textarea> 中,一切就會(huì)變得簡(jiǎn)單多了,如:
示例代碼 [hl5o.cn]
<textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">Input English..</textarea>
類似的,可以加入代碼到<input>。
2、表單輸入單元點(diǎn)擊刪除:
本列同上則作用類似,只是使用鼠標(biāo)上略有變化,需要點(diǎn)擊而不像上則的只要鼠標(biāo)覆蓋。如:
示例代碼 [hl5o.cn]
<input type=text name="address" size=19 value="Enter,e-mail..."onFocus="this.value=''">
點(diǎn)擊輸入單元后,提示信息會(huì)刪除,是不是很方便。
3、表單輸入單元的邊框設(shè)置:
更改傳統(tǒng)的表單單元邊框,會(huì)讓你的主頁(yè)生色不少。如:
示例代碼 [hl5o.cn]
<input type=radio name=action value=subscribe checked style="BORDER-BOTTOM: dashed 1px; BORDER-LEFT: dashed 1px; BORDER-RIGHT: dashed 1px; BORDER-TOP: dashed 1px;background-color: #FEF5C8">
其中"style=***"為左右上下和背景色設(shè)置,適用于其它單元,請(qǐng)讀者親自試試。
4、表單輸入單元的文字設(shè)置:
表單中單元的字體是可以修改的,如:
示例代碼 [hl5o.cn]
<input type=text name="address" size=19 value="Enter,e-mail..." style=font-family:"verdana";font-size:10px >
其中"style=***"為字體和字大小設(shè)置。
5、修改表單屬性為彈出窗口:
大多數(shù)表單激活后,會(huì)在當(dāng)前頁(yè)面中打開(kāi),影響正常瀏覽。不如修改一下,如:
示例代碼 [hl5o.cn]
<form method=POST action=url target=_blank>
其中"target=_blank"為控制在彈出窗口打開(kāi)。
相關(guān)Div+CSS教程:
- 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ū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
猜你也喜歡看這些
- DIVCSS菜單:超炫的菜單一張圖片實(shí)現(xiàn)鼠標(biāo)的兩種狀態(tài)及CSS當(dāng)前頁(yè)效果
- ul列表中包含input時(shí)line-height屬性失效的解決辦法
- CSS實(shí)例教程:紅藍(lán)炫CSS橫向菜單
- CSS圖片放大展示的一種小思路
- CSS布局教程:如何用CSS構(gòu)建圖片、文字混排的產(chǎn)品展示?
- CSSFloatLayoutBasics-CSS浮動(dòng)布局基礎(chǔ)
- CSS菜單:明快清新的格調(diào)闡述CSS當(dāng)前頁(yè)效果的實(shí)現(xiàn)
- DIVCSS橫向菜單實(shí)例:簡(jiǎn)單的思路陷下的風(fēng)格不錯(cuò)的效果
- DIV CSS布局入門(mén)示例(五)border和clear
- 一個(gè)無(wú)序列表UL鼠標(biāo)激活顯示背景色的實(shí)例
- 相關(guān)鏈接:
- 教程說(shuō)明:
Div+CSS教程-divcss表單布局的五個(gè)小技巧
。