欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！
CSS手册 CSS3手册 CSS论坛 CSS培训 CSS任务 网闻
DIVCSS5培训 系统快速学会CSS布局技术！
DIVCSS5首页 > DIV+CSS实例 >

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

DIV+CSS搜索框布局实例案例讲解-搜索框表单布局教程篇

我们在网页中表单如搜索框均为美化过的，这个时候如何来布局搜索框呢？DIVCSS5为大家实际布局搜索框。

实例截图
搜索表单控件效果截图

搜索框布局目录
  1. 搜索框布局思想
  2. CSS切图
  3. CSS DIV布局准备
  4. 开始布局实例
  5. 完整代码

一、搜索框布局思想   -   TOP

1、实际搜索框表单布局效果图：

css搜索框布局实例截图
CSS布局实例截图

2、布局思想

CSS布局搜索表单与其它网页内容布局区别在于使用form表单控件标签。如上图的搜索表单布局，我们首先切出输入框和搜索按钮图片作为背景图片（这里可以整切出作为表单布局背景图片），再通过对input标签设置class样式，控制输入框的边框、css背景、宽度、高度、css字体大小等样式，再设置表单控件按钮的样式如css边框、背景、文字隐藏等css样式。

小结：将表单美工图切出素材作为背景，再分别对输入框和按钮表单设置不同的class样式进行分别控制样式达到与美工图相同效果样式同时具有表单功能。

扩展阅读：
1、html form
2、html input
3、html下拉菜单美化-SELECT美化
4、html上传控件美化- file美化

二、切图   -   TOP

使用PS将需要的表单搜索框图片素材切出。切图需要注意遵循经历切图图片要小、准确。

具体PS切图方法步骤这里就不再介绍。

实例PSD文件+切图图片素材下载：此压缩包包括了案例中psd文件、PS切出图片素材。

立即下载 （30.135KB）

三、CSS DIV布局准备   -   TOP

1、拷贝一份DIV+CSS初始化模板
此模板包括了html文件+CSS文件，同时进行了常用html标签样式初始化（了解CSS初始化必要性），并html做了html引入CSS文件link。

将解压拷贝后的项目文件命名为"divcss5-search"

项目文件命名以及文件结构
项目文件命名以及文件结构

没有初始化模板的可下载：

下载地址：CSS初始化模板

此模板包括了两个编码版本GBK和UTF-8，大家任选一款即可。

2、将切出素材拷贝如项目images文件夹
将“divcss5-so-bg.gif”图片素材放入项目“images”图片文件夹内

图片放入实例截图
图片放入images图片文件夹实例截图

3、基础设置

使用DW软件打开项目“divcss5-search”文件夹内的“index.html”

DW打开index.html html文件
DW打开index.html html文件

1）、本实例不使用JS，所以可以去掉html源代码中“<script src="JS文件路径地址" language="javascript" type="text/javascript"></script>”

2）、修改html标题，修改标题为DIVCSS5实例之搜索表单

基础修改好的HTML代码截图
html基础修改好截图

3)、去掉与本布局无关多余CSS代码

因为本实例布局内容比较简单，一部分预设的CSS代码不使用，做个删除已简化代码，需要删除CSS代码如下：

  1. .red ,.red a{ color:#F00;} 
  2. .lan ,.lan a{ color:#1E51A2;} 
  3. .dis{display:block;} 
  4. .undis{display:none;} 
  5.  
  6. .lf{float:left;} 
  7. .rt{float:right;} 
  8.  
  9. .pt5{padding-top:5px;} 
  10. .box{margin:0 auto; width:100%; overflow:hidden} 

四、开始布局实例   -   TOP

DIVCSS5实例描述：
因为这里只进行“搜索框”的布局，所以我们设置新建一个DIV盒子的CSS命名为“#search-box”用于布局搜索框模块布局。对输入框CSS 命名为“.input-box”，搜索按钮CSS 命名为“.button”。

1、布局搜索框

我们使用PS获取整个需要布局搜索框的宽度、高度（如何获取准确的数值，我们在研教室有相关教程）。这里有个最简单获取方法，查看我们前面切出的搜索框图片“divcss5-so-bg.gif”，即可得到宽度为“326px”；高度为“29px”。

1）、最外层搜索框盒子CSS代码：

  1. #search-box{width:326px;height:29px;background:url(divcss5-so-bg.gif) no-repeat 0 0} 

解释：这里设置了宽度高度，并设置将搜索框切出输出图片作为背景。

2）、最外层搜索框盒子html代码片段：

  1. <div id="search-box"></div> 

2、布局输入框

从图我们观察到输入框是布局靠右，输入框控件默认背景是不透明白色，这个时候我们需要设置输入框不显示背景（background:none）；默认情况下输入框是有边框，这个时候我们使用是背景图片需不要边框颜色，即需要取得边框（border:0）；最后我们再通过PS获得输入框宽度、高度，宽度需要注意不能太宽以免用户填写文字过多而超出背景图片。

1）、根据以上发现对应CSS代码：

  1. .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设置输入框布局居左
width:220px; height:29px; line-height:29px; 设置输入框宽度、高度、css行高（使用PS可以准确获取）
padding-left:11px; 这个是为了让输入框输入的文字距离左边有一定距离（使用PS可以准确获取）
border:0; background:none; 设置边框和背景都不显示
text-align:left; font-size:14px设置css文字居左、css字体大小为14px

2）、对应HTML代码片段

  1. <div id="search-box"> 
  2.     <input name="" type="text" class="input-box" /> 
  3. </div> 

因为输入框是在“search-box”盒子内，所以将输入框边框放入到“search-box”盒子里，输入框标签内使用“class="input-box" ”引入对此输入框设置的样式表。

3、布局搜索按钮

根据分析，按钮就靠右，背景和边框我们都不需要让其显示，所以同样设置按钮边框和背景样式不显示，按钮高度和宽度我们可以根据PS来准确获得，“搜索”两个字本身背景图片带有，这个时候按钮就不需要再显示文字，这个时候我们可以使用text-indent隐藏文字（详细了解css text-indent缩进样式）。

1）、根据分析得到对应按钮样式布局CSS代码：

  1. .button{ float:right; border:0; background:none; text-indent:-999px; width:70px; height:29px; cursor:pointer} 

解释：
float:right; 对象CSS布局靠右
border:0; background:none; 不让按钮背景和边框显示
text-indent:-999px; 隐藏按钮文字（css隐藏图片上方文字 ）
width:70px; height:29px; 设置宽度和高度（使用PS可以准确获取）
cursor:pointer 设置鼠标经过悬停按钮时候鼠标指针变化为“手指”形。

2）、对应HTML布局片段代码：

  1. <div id="search-box"> 
  2.     <input name="" type="text" class="input-box" /> 
  3.     <input name="" type="submit" value="搜索" class="button" /> 
  4. </div> 

最终效果图：

CSS+DIV完整布局截图
搜索框表单实例最终完成效果截图

五、完整CSS+HTML实例代码   -   TOP

1、css代码：

  1. @charset "utf-8"; 
  2. /* DIVCSS5 www.divcss5.com 请保留以便售后维护与服务 */ 
  3. body, div,form, input, button, select, textarea {margin:0; padding:0;
    font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif;} 
  4. ol, ul ,li{list-style: none;} 
  5. img {border: 0; vertical-align:middle;} 
  6. body{color:#000000;background:#FFF; text-align:center;} 
  7. .clear{clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;} 
  8. a{color:#000000;text-decoration:none; }  
  9. a:hover{color:#BA2636;text-decoration:underline; border:0} 
  10.  
  11. #search-box{width:326px;height:29px;
    background:url(divcss5-so-bg.gif) no-repeat 0 0; margin:0 auto} 
  12. .input-box{ float:left; width:220px; height:29px;
     line-height:29px; padding-left:11px; border:0; background:none; 
    text-align:left; font-size:14px} 
  13. .button{ float:right; border:0; background:none; text-indent:-999px; 
    width:70px; height:29px; cursor:pointer} 

    /* css注释：为了便于文章中能网站显示所以将CSS进行换行排版，不会影响使用与样式效果 */

2、html代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"    >
  2. <!-- html注释：为了排版便于查看代码这里进行换行排版 -->
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  6. <title>DIVCSS5实例之搜索表单</title> 
  7. <meta name="keywords" content="关键词" /> 
  8. <meta name="description" content="关键词描述" /> 
  9. <link rel="stylesheet" href="images/style.css" /> 
  10. <!-- DIVCSS5 www.divcss5.com 请保留以便售后维护与服务 --> 
  11. </head> 
  12. <body> 
  13. <p></p> 
  14. <form action="" method="get"> 
  15. <div id="search-box"> 
  16. <input name="" type="text" class="input-box" /> 
  17. <input name="" type="submit" value="搜索" class="button" /> 
  18. </div> 
  19. </form> 
  20. </body> 
  21. </html> 

六、完整案例演示与下载   -   TOP

1、在线演示：点击查看

2、打包下载（包括了PSD图片、切出图片素材、完整实例文件）

立即下载 （34.615KB）

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/shili/s525.shtml

必备CSS教程Essential CSS Tutorials
必备HTML基础教程Essential HTML Tutorials
最新文章 NEWS
CSS 特效 CSS EFFECTS
相关文章 RELATED
热点文章 HOT