搜索栏的代码（搜索栏代码怎么打）

今天给各位分享搜索栏的代码的知识，其中也会对搜索栏代码怎么打进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、html制作一个搜索框，代码是什么？
• 2、html搜索栏代码
• 3、搜索框的代码怎么写

html制作一个搜索框，代码是什么？

1、打开Hbuilder编辑器，创建一个input框和button按钮，将它们横排摆放在一起：

2、首先给input框添加“#7FCC0B”颜色的边框，设置宽度和高度即可，给button按钮设置白色的字体和“#7FCC0B”的背景颜色即可完成：

3、按crtl+s，在软件的右侧即可看到最终的效果。以上就是用html制作搜索框的演示：

html搜索栏代码

style

*{outline:none;}

.b2{margin:60px 0 5px 0;position:relative;border:0px solid red; }

.b2 .b2_s{margin-left: 10px;outline: 0;border:1px solid #f60;padding:6px;padding-left:15px;color:#999;max-width:70%;min-width:50%;border-radius:20px;}

.b2 .b2_s:onfocus{border:1px solid #f60;outline: 0; }

.b2 .btn{color: #fff;background-color: #428bca;border-color: #357ebd;display: inline-block;padding: 6px 12px;margin-bottom: 0;font-size: 14px;font-weight: normal;text-align: center;white-space: nowrap;vertical-align: middle;cursor: pointer;border: 1px solid transparent;border-radius: 4px;}

.b2 .btn_1{margin-top:-2px;border-bottom-right-radius: 0;border-top-right-radius: 0;margin-right: -6px;height:31px;}

.b2 .btn_2{border-bottom-left-radius: 0;border-top-left-radius: 0;margin-left: -1px;padding:6px 6px;border-bottom-right-radius: 4px;border-top-right-radius: 4px;}

.b2 .b2_b2_u{position: absolute;top:23px;overflow:hidden;display:none;z-index:10;background:#fff;border: 1px solid #ccc;border: 1px solid rgba(0,0,0,0.15);box-shadow: 0 6px 12px rgba(0,0,0,0.175); -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);padding:5px 10px;border-radius: 3px;}

/style

div class="b2" id="b2"

input class="b2_s" type="text" id="h_search" placeholder="请输入书名等信息.."

button id="b2_btn1" class="btn btn_1"搜索/button

button id="b2_btn2" class="btn btn_1 btn_2"span class="icon-cog2"/span/button

/div

我用的，截取

搜索框的代码怎么写

首先把搜索宽切片下来再CSS样式里面用为背景

body

form action="" method="get"

div class="kuan"input name="" type="text" //div!--搜索框--

div class="an"input name="" type="button" //div!--搜索按钮--

/form

/body

CSS样式根据实际自己调整

style type="text/css"

.kuan input{ width:330px; height:60px; background:background:url(../img/kuan_01.jpg) no-repeat; border:none; float:left}

.an input{ width:120px; height:60px; background:background:url(../img/an_02.jpg) no-repeat;border:none; float:left}

/style

关于搜索栏的代码和搜索栏代码怎么打的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。