DIV+CSS搜索框布局實(shí)例教程

1、div+css搜索框布局實(shí)例教程div+css搜尋框布局實(shí)例案例講解-搜尋框表單布局教程篇我們?cè)诰W(wǎng)頁(yè)中表單如搜尋框均為美化過(guò)的，這個(gè)時(shí)候如何來(lái)布局搜尋框呢？divcss5為大家實(shí)際布局搜尋框。搜尋表單控件效果截圖搜尋框布局名目 搜尋框布局思想 css切圖 css div布局預(yù)備 開(kāi)頭布局實(shí)例 完整代碼 一、搜尋框布局思想 - top1、實(shí)際搜尋框表單布局效果圖： css布局實(shí)例截圖 2、布局思想css布局搜尋表單與其它網(wǎng)頁(yè)內(nèi)容布局區(qū)分在于用法form表單控件標(biāo)簽。如上圖的搜尋表單布局，我們首先切出輸入框和搜尋按鈕作為背景（這里可以整切出作為表單布局背景），再通過(guò)對(duì)input標(biāo)簽設(shè)置class樣

2、式，控制輸入框的邊框、css背景、寬度、高度、css字體大小等樣式，再設(shè)置表單控件按鈕的樣式如css邊框、背景、文字躲藏等css樣式。小結(jié)：將表單美工圖切出素材作為背景，再分離對(duì)輸入框和按鈕表單設(shè)置不同的class樣式舉行分離控制樣式達(dá)到與美工圖相同效果樣式同時(shí)具有表單功能。擴(kuò)展閱讀：1、html form2、html input3、html下拉菜單美化-select美化4、html上傳控件美化- file美化二、切圖 - top用法ps將需要的表單搜尋框素材切出。切圖需要注重遵循經(jīng)受切圖要小、精確。詳細(xì)ps切圖辦法步驟這里就不再介紹。實(shí)例psd文件+切圖素材下載：此壓縮包包括了案例中psd文

3、件、ps切出素材。立刻下載 （30.135kb）三、css div布局預(yù)備 - top1、拷貝一份div+css初始化模板此模板包括了html文件+css文件，同時(shí)舉行了常用html標(biāo)簽樣式初始化（了解css初始化須要性），并html做了html引入css文件link。將解壓拷貝后的項(xiàng)目文件命名為"divcss5-search"項(xiàng)目文件命名以及文件結(jié)構(gòu)沒(méi)有初始化模板的可下載：下載地址：css初始化模板此模板包括了兩個(gè)編碼版本gbk和utf-8，大家任選一款即可。2、將切出素材拷貝如項(xiàng)目images文件夾將divcss5-so-bg.gif素材放入項(xiàng)目images文件夾內(nèi)放入

4、images文件夾實(shí)例截圖3、基礎(chǔ)設(shè)置用法dw軟件打開(kāi)項(xiàng)目divcss5-search文件夾內(nèi)的index.htmldw打開(kāi)index.html html文件1）、本實(shí)例不用法js，所以可以去掉html源代碼中2）、修改html標(biāo)題，修改標(biāo)題為divcss5實(shí)例之搜尋表單html基礎(chǔ)修改好截圖3)、去掉與本布局無(wú)關(guān)多余css代碼由于本實(shí)例布局內(nèi)容比較容易，一部分預(yù)設(shè)的css代碼不用法，做個(gè)刪除已簡(jiǎn)化代碼，需要?jiǎng)h除css代碼如下：.red ,.red a color:f00; .lan ,.lan a color:1e51a2; .disdisplay:block; .undisdisplay:

5、none; .lffloat:left; .rtfloat:right; .pt5padding-top:5px; .boxmargin:0 auto; width:100%; overflow:hidden四、開(kāi)頭布局實(shí)例 - topdivcss5實(shí)例描述：由于這里只舉行搜尋框的布局，所以我們?cè)O(shè)置新建一個(gè)div盒子的css命名為search-box用于布局搜尋框模塊布局。對(duì)輸入框css 命名為.input-box，搜尋按鈕css 命名為.button。1、布局搜尋框我們用法ps獵取囫圇需要布局搜尋框的寬度、高度（如何獵取精確的數(shù)值，我們?cè)谘薪淌矣邢嚓P(guān)教程）。這里有個(gè)最容易獵取辦法，查看我們前

6、面切出的搜尋框divcss5-so-bg.gif，即可得到寬度為326px；高度為29px。1）、最外層搜尋框盒子css代碼：search-boxwidth:326px;height:29px;background:url(divcss5-so-bg.gif) no-repeat 0 0說(shuō)明：這里設(shè)置了寬度高度，并設(shè)置將搜尋框切出輸出作為背景。2）、最外層搜尋框盒子html代碼片段： 2、布局輸入框從圖我們觀看到輸入框是布局靠右，輸入框控件默認(rèn)背景是不透亮白色，這個(gè)時(shí)候我們需要設(shè)置輸入框不顯示背景（background:none）；默認(rèn)狀況下輸入框是有邊框，這個(gè)時(shí)候我們用法是背景需不要邊框色彩

7、，即需要取得邊框（border:0）；最后我們?cè)偻ㄟ^(guò)ps獲得輸入框?qū)挾?、高度，寬度需要注重不能太寬以免用?hù)填寫(xiě)文字過(guò)多而超出背景。1）、按照以上發(fā)覺(jué)對(duì)應(yīng)css代碼：.input-box float:left; width:220px; height:29px; line-height:29px; padding-left:11px; border:0; background:none; text-align:left; font-size:14px說(shuō)明： float:left設(shè)置輸入框布局居左 width:220px; height:29px; line-height:29px; 設(shè)置輸入框?qū)?/p>

8、度、高度、css行高（用法ps可以精確獵取） padding-left:11px; 這個(gè)是為了讓輸入框輸入的文字距離左邊有一定距離（用法ps可以精確獵?。?border:0; background:none; 設(shè)置邊框和背景都不顯示 text-align:left; font-size:14px設(shè)置css文字居左、css字體大小為14px 2）、對(duì)應(yīng)html代碼片段 由于輸入框是在search-box盒子內(nèi)，所以將輸入框邊框放入到search-box盒子里，輸入框標(biāo)簽內(nèi)用法class="input-box" 引入對(duì)此輸入框設(shè)置的樣式表。3、布局搜尋按鈕按照分析，按鈕就靠右，

9、背景和邊框我們都不需要讓其顯示，所以同樣設(shè)置按鈕邊框和背景樣式不顯示，按鈕高度和寬度我們可以按照ps來(lái)精確獲得，搜尋兩個(gè)字本身背景帶有，這個(gè)時(shí)候按鈕就不需要再顯示文字，這個(gè)時(shí)候我們可以用法text-indent躲藏文字（具體了解css text-indent縮進(jìn)樣式）。1）、按照分析得到對(duì)應(yīng)按鈕樣式布局css代碼：.button float:right; border:0; background:none; text-indent:-999px; width:70px; height:29px; cursor:pointer說(shuō)明： float:right; 對(duì)象css布局靠右 border:0

10、; background:none; 不讓按鈕背景和邊框顯示text-indent:-999px; 躲藏按鈕文字（css躲藏上方文字 ）width:70px; height:29px; 設(shè)置寬度和高度（用法ps可以精確獵取） cursor:pointer 設(shè)置鼠標(biāo)經(jīng)過(guò)懸停按鈕時(shí)候鼠標(biāo)指針變幻為手指形。 2）、對(duì)應(yīng)html布局片段代碼： 終于效果圖：搜尋框表單實(shí)例終于完成效果截圖五、完整css+html實(shí)例代碼 - top1、css代碼：charset "utf-8" /* divcss5 請(qǐng)保留以便售后維護(hù)與服務(wù) */ body, div,form, input, butt

11、on, select, textarea margin:0; padding:0;font-style: normal;font:12px/22px "5b8b4f53",arial, helvetica, sans-serif; ol, ul ,lilist-style: none; img border: 0; vertical-align:middle; bodycolor:000000;background:fff; text-align:center; .clearclear:both;height:1px;width:100%; overflow:hidden;

12、 margin-top:-1px; acolor:000000;text-decoration:none; a:hovercolor:ba2636;text-decoration:underline; border:0 search-boxwidth:326px;height:29px;background:url(divcss5-so-bg.gif) no-repeat 0 0; margin:0 auto .input-box float:left; width:220px; height:29px; line-height:29px; padding-left:11px; border:0; background:none; text-align:left; font-size:14px .button float:right; border:0; background:none; text-indent:-999px; w