首页 新闻 搜索 专区 学院

css实现百度搜索框样式

0
悬赏园豆:20 [已解决问题] 解决于 2014-09-10 16:12

我想实现一个百度搜索框的样式,就是输入框和搜索按钮连接在一起。请问用css如何实现?如下图。

我自己弄的效果如下,感觉不够简洁。

翰墨小生的主页 翰墨小生 | 初学一级 | 园豆:51
提问于:2014-09-10 15:38
< >
分享
最佳答案
0

对于WEB前端来说,只要你能看到的效果,你一定可以把这个效果自己实现出来的,所有的代码都是可以看到的。

你把其他无关的去掉,剩下的就是实现这个效果的CSS和HTML代码了。

 

<form name="f" id="form" action="http://www.baidu.com/s" class="fm" onsubmit="javascript:F.call('ps/sug','pssubmit');"><span id="s_kw_wrap" class="bg s_ipt_wr iptfocus"><input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off" style="font-family: 'Microsoft Yahei', STHeiti;"></span><input type="hidden" name="rsv_spt" value="1"><input type="hidden" name="issp" value="1"><input type="hidden" name="rsv_bp" value="0"><input type="hidden" name="ie" value="utf-8"><input type="hidden" name="tn" value="baiduhome_pg"><span class="btn_wr s_btn_wr bg" id="s_btn_wr"><input type="submit" value="百度一下" id="su" class="btn self-btn bg s_btn"></span><span class="tools"><span id="mHolder"><div id="mCon"><span>输入法</span></div><ul id="mMenu"><li><a href="javascript:;" name="ime_hw">手写</a></li><li><a href="javascript:;" name="ime_py">拼音</a></li><li class="ln"></li><li><a href="javascript:;" name="ime_cl">关闭</a></li></ul></span></span><input type="hidden" name="inputT" value="6900"></form>
收获园豆:15
爱编程的大叔 | 高人七级 |园豆:30753 | 2014-09-10 15:45

求方法啊,我用chrome - 右键 - Inspect element咋没有看到呢?

翰墨小生 | 园豆:51 (初学一级) | 2014-09-10 15:57

@zdd: Chrome可以按下F12,下方出现开发人员窗,最左上方有一个放大镜图标,点一下,然后,把鼠标移动到你想看的Element上方,就可以看到整个HTML代码了。然后CSS你要自己去分析啦。

爱编程的大叔 | 园豆:30753 (高人七级) | 2014-09-10 16:02
其他回答(2)
1

文本框的border-right:0px

收获园豆:5
Alex_QY1987 | 园豆:1888 (小虾三级) | 2014-09-10 15:47
0

web开发谷歌浏览器不会用?

吴瑞祥 | 园豆:28856 (高人七级) | 2014-09-10 16:05

不好意思,我是业余的。

支持(0) 反对(0) 翰墨小生 | 园豆:51 (初学一级) | 2014-09-10 16:12
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册