1、网页表单
2、网页输入
3.HTML下拉菜单美化 - 选择美化
4.HTML上传控制美化-文件美化
二、剪图
使用PS剪切出所需的表单搜索框图像材料。剪切图片要注意跟随经验，剪切图片要小而准确。
具体的PS切割方法步骤这里就不做介绍了。
示例 PSD 文件 + 剖面图像材料下载：此压缩包包括 psd 文件和 PS 剪切图像材料。
立即下载 （30.135KB）。
三、CSSDIV布局意图
1. 复制 DIV+CSS 初始化模板的副本
这个模板包括html文件+CSS文件，并初始化了常见的html标签样式（了解CSS初始化的必要性），HTML做HTML引入CSS文件链接。
将提取和复制的项目文件命名为“Espeed 云搜索”
项目文件命名和文件结构
没有可下载的初始化模板：
下载地址：CSS初始化模板
此模板包括两个编码版本搜索框css，GBK 和 UTF-8，您可以选择一个。
2.复制材料，例如项目图像文件夹
将“艺速云-SO-BG.gif”的镜像资源加载到项目的“图片”镜像文件夹中
图像加载的图像图像图像文件夹实例屏幕截图
3. 基本设置
使用DW软件打开项目“易速云搜索”文件夹中的“索引.html”
DW 打开 index.htmlhtml 文件
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 实例说明：
由于只有“搜索框”布局
在这里进行，我们设置了用于创建名为“#search-box”的新DIV包的CSS，用于搜索框模块布局的布局。将输入框命名为CSS“.input-box”，将搜索按钮命名为“.button”。
1. 布局搜索框
我们使用PS来获取要布置的整个搜索框的长度和高度（如何获取确切的值，我们在研讨会中有教程）。这是最简单的获取方法搜索框css，看看我们上面剪下的搜索框图片“Yisu Cloud-so-BG.gif”，就可以得到长度“326px”;高度为“29px”。
1）最里面的搜索框袋CSS代码：
#search-box{width:326px;height:29px;background:url(亿速云-so-bg.gif) no-repeat 0 0}
说明：此处设置长度高度，搜索框设置为剪切输出图像作为背景。
2）最里面的搜索框包html代码片段：
2. 布局输入框
从图中我们观察到输入框是
布局向左，输入框控件的默认背景是不透明的黑色，此时我们需要将输入框设置为不显示背景（背景：无）;默认情况下，输入框有边框，此时我们使用背景图片是否需要边框颜色，即需要获取边框（border：0）;最后，我们通过PS得到输入框的长度和高度，长度不宜太宽，以免用户填写过多文字，超出背景图片。
1）根据上述发现，相应的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}
解释：
浮点：左 将输入框布局设置为左侧
宽度：220px; 高度：29px; 行高：29px;设置输入框长度、高度和 CSS 列宽（使用 PS 时可以准确获得
）。
左填充：11px;这是为了使输入框中输入的文本与左侧保持一定距离（您可以使用PS准确获取它）。
边框：0; 背景：无;不显示设置边框和背景
文本对齐：左;字体大小：14px 将 CSS 文本设置为左侧，将 CSS 字体大小设置为 14px
2） 对应的 HTML 代码片段
由于输入框
位于“搜索框”框内，因此输入框
border被加载到“搜索框”框中，输入框标签中的“class=”input-box“用于引入此输入框的变体表集。
3. 布局搜索按钮
根据分析，按钮在右边，背景和边框我们不需要让它显示，
所以同样设置的按钮边框和背景样式是不显示的，按钮的高度和长度我们可以完全按照PS得到，“搜索”这个词本身的背景图片，这个时候按钮不需要显示文字，这个时候我们可以使用文本缩进隐藏文本（详细了解csstext缩进缩进样式）。
1）根据分析，得到对应的按钮样式布局CSS代码：
.button{ float:right; border:0; background:none; text-indent:-999px; width:70px; height:29px; cursor:pointer}
解释：
浮子：右;左侧的对象 CSS 布局
边框：0; 背景：无;不要让关键背景和边框出现
文本缩进：-999px;隐藏关键文本（CSS 隐藏图像上方的文本）。
宽度：70px; 高度：29px;设置长度和高度（您可以使用PS精确地获得）。
光标：指针将键盘设置为在键盘悬停按键时更改为“手指”形状。
2） 对应的 HTML 布局片段代码：
最终功效图：
搜索框表单实例最终完成功效截图
完整的 CSS + HTML 示例代码
1.CSS代码：
@charset "utf-8";
/* DIVCSS5 www.亿速云.com 请保留以便售后维护与服务 */
body, div,form, input, button, select, textarea {margin:0; padding:0;
font-style: normal;font:12px/22px "5B8B4F53",Arial, Helvetica, sans-serif;}ol, ul ,li{list-style: none;}
img {border: 0; vertical-align:middle;}
body{color:#000000;background:#FFF; text-align:center;}
.clear{clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px;}
a{color:#000000;text-decoration:none; }
a:hover{color:#BA2636;text-decoration:underline; border:0}
#search-box{width:326px;height:29px;
background:url(亿速云-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;
width:70px; height:29px; cursor:pointer}
/* css注释：为了便于文章中能网站显示所以将CSS进行换行排版，不会影响使用与样式效果 */
2.HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIVCSS5实例之搜索表单</title>
<meta name="keywords" content="关键词" />
<meta name="description" content="关键词描述" />
<link rel="stylesheet" href="images/style.css" />
</head>
<body>
<p></p>
<form action="" method="get">
<div id="search-box">
<input name="" type="text" class="input-box" />
<input name="" type="submit" value="搜索" class="button" />
</div>
</form>
</body>
</html>
感谢您的阅读，以上就是“DIV+CSS如何实现搜索框布局”的内容“，经过对
本文的学习，相信大家对 DIV+CSS 是如何实现搜索框布局有了更深的感受，具体用例需要通过你的实践来验证。这就是艺速云，小编会为你推送更多与知识点相关的文章，欢迎关注！
近日，该网站为了提高站内搜索率，减轻查询现场数据库带来的服务器压力，使用了百度的现场搜索API。
但是，使用百度网站搜索API（有效范围：*webkaka.com/*）后，我发现了一个问题，不同的渠道模板导致排版不当，比如搜索输入框的长度太长，高度太高等。比如技术频道和博客的模板不同，侧边栏的长度也不同，如果搜索输入框的宽度和高度是根据博客的模板设置的搜索框css，那么在技术频道页面上，搜索输入框超过了侧边栏的长度。但是，如果您根据技术频道侧边栏的长度设置搜索输入框长度，则在博客侧边栏中它将变得太短。为此，有必要为每个频道模板自定义百度网站上搜索输入框的样式。这是如何实现的？
百度网站搜索百度
也考虑到了这个问题，于是提供了一个CSS文件，我们可以在百度网站后台搜索下载文件搜索框css，下载位置在“搜索框管理”-“编辑样式”中，拖动滚动条到底部，你会听到“下载嵌入的CSS源文件”。
我们可以使用此CSS文件单独设置百度站点搜索输入框和任何页面的按钮的规范。
因为本文主要介绍如何自定义输入框的长度，所以删减多余的代码，我们只需要这几行代码就可以达到目的：/*
输入自定义变体*/.
bdcs-container.bdcs-search-form-input{
宽度：230px;/*
按钮样式定制*/.
bdcs-container.bdcs-search{
宽度：340px;
如何使用这些代码行就像将它们添加到网页的CSS文件中一样简单。这些代码行根据网页的布局更改数字 230 和 340，它们表示输入框和搜索容器的长度。百度网站搜索，只能搜索出已经收录在百度中的
页面，未收录在百度中的网页就无法搜索到，所以用这个来理解这一点。站长可以去百度站长管理平台
（）使用百度站长管理平台账号，立即获得API，没有任何附加条件。
发表评论