html搜索栏代码
4个回答
展开全部
<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>
我用的,截取
展开全部
<style>
.button{border:2px solid #C5C5C5;background:#EEEEEE;margin:0 4px;}
.search{border:2px solid #C5c5c5;}
</style>
<div class="searchdiv">
<input type="text" class="search"/>
<input type="button" value="搜索" class="button" />
<input type="button" value="高级" class="button" />
</div>
我用纯html 做的 如果你用了图片按钮 可以试一试给.search和.button 加上vertical-align:middle;这个属性
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
<html>
<body>
<div>
<div style="float:left"><input style="height:30px"/></div>
<div style="float:left"><button style="height:30px">搜索</button></div>
<div><button style="height:30px">高级</button></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询