DIV+CSS怎么实现搜索框布局

这篇文章主要讲解了“DIV+CSS怎么实现搜索框布局”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“DIV+CSS怎么实现搜索框布局”吧！

创新互联公司2013年成立，是专业互联网技术服务公司，拥有项目成都网站建设、成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元北海做网站,已为上家服务,为北海各地企业和个人服务,联系电话:18982081108

搜索表单控件效果截图

一、搜索框布局思想

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

CSS布局实例截图

2、布局思想

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

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

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

二、切图  

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

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

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

立即下载 （30.135KB）

三、CSS DIV布局准备 

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

将解压拷贝后的项目文件命名为"创新互联-search"

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

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

下载地址：CSS初始化模板

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

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

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

3、基础设置

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

DW打开index.html html文件

1）、本实例不使用JS，所以可以去掉html源代码中“”

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

html基础修改好截图

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

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

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

四、开始布局实例  

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

1、布局搜索框

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

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

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

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

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