DIV+CSS搜索框布局實例教程

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

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

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

4、images文件夾實例截圖3、基礎(chǔ)設(shè)置用法dw軟件打開項目divcss5-search文件夾內(nèi)的index.htmldw打開index.html html文件1）、本實例不用法js，所以可以去掉html源代碼中2）、修改html標(biāo)題，修改標(biāo)題為divcss5實例之搜尋表單html基礎(chǔ)修改好截圖3)、去掉與本布局無關(guān)多余css代碼由于本實例布局內(nèi)容比較容易，一部分預(yù)設(shè)的css代碼不用法，做個刪除已簡化代碼，需要刪除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四、開頭布局實例 - topdivcss5實例描述：由于這里只舉行搜尋框的布局，所以我們設(shè)置新建一個div盒子的css命名為search-box用于布局搜尋框模塊布局。對輸入框css 命名為.input-box，搜尋按鈕css 命名為.button。1、布局搜尋框我們用法ps獵取囫圇需要布局搜尋框的寬度、高度（如何獵取精確的數(shù)值，我們在研教室有相關(guān)教程）。這里有個最容易獵取辦法，查看我們前

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

7、，即需要取得邊框（border:0）；最后我們再通過ps獲得輸入框?qū)挾?、高度，寬度需要注重不能太寬以免用戶填寫文字過多而超出背景。1）、按照以上發(fā)覺對應(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說明： float:left設(shè)置輸入框布局居左 width:220px; height:29px; line-height:29px; 設(shè)置輸入框?qū)?/p>

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

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

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