html怎么调搜索框宽高,百度站内搜索css：输入框宽度及样式自定义

近日网站使用了百度站内搜索api，目的是为了提高站内搜索的速度，减轻查询站内数据库带来的服务器压力。

不过在使用百度站内搜索api(生效范围：*webkaka.com/*)后发现一个问题，不同的频道模版造成排版不合适的后果，如搜索输入框宽度过长、高度过高等情况。例如技术频道和博客的模版不同，侧栏宽度也不同，如果按照博客的模版来设置搜索输入框宽高，那么在技术频道页面，搜索输入框就超出了侧栏的宽度了。但如果按照技术频道的侧栏宽度来设置搜索输入框宽度，那么在博客侧栏里就显得过短了。因此，需要为各个频道模版自定义百度站内搜索输入框的样式。这个如何实现的？

百度站内搜索

百度也考虑到了这个问题，于是提供了一个css文件，我们在百度站内搜索后台可下载到该文件，下载位置在“搜索框管理”-“编辑样式”，滚动条拖到最下面，就看到“下载嵌入式CSS源文件”了。

我们可以使用这个css文件，来单独设置任何页面的百度站内搜索输入框和按钮的样式。

由于本文主要是介绍如何自定义输入框宽度，因此削掉多余的代码，我们只需这几行代码即可达到目的：

/*输入框自定义样式*/

.bdcs-container .bdcs-search-form-input {

width:230px;

}

/*按钮样式自定义*/

.bdcs-container .bdcs-search{

width:340px;

}

这几行代码怎样使用，很简单，把它们加入到网页的css文件里即可。这几行代码，根据网页布局，修改一下 230 和 340 这两个数字，它们代表的正是输入框和搜索容器的宽度。

百度站内搜索，只能搜索出已被百度收录的网页，不被百度收录的网页是搜不出来的，因此使用时要了解这点。

站长可以到百度站内搜索管理平台(http://zn.baidu.com/cse/home/index)上，使用百度站长管理平台帐号立即获得一个api，无任何附加条件。

html怎么调搜索框宽高,百度站内搜索css：输入框宽度及样式自定义相关推荐

html目录框中增加搜索引擎,网站如何添加搜索框？百度站内搜索安装技巧
站内搜索基本上是网站的一个标配了,几乎所有的大型网站都有一个站内搜索框供读者搜索使用,方便用户查找到自己需要的内容.(当然个别网站除外,如单页面网站)写这篇文章是碰到一位网友说他做的织梦站搜索框失效了 ...
百度站内搜索框自己定义样式、显示方式...（瓜头酱油的发现）供站内搜索入门者围观
这次需要做一个百度的站内搜索, 刚开始做这个东西什么都不知道,心里急了, 公司的人看我比较急也给我指定了一下,但是全公司就我一个PHP程序员, 还是我自己摸索吧, 哈哈哈哈刚好现在找到了资料... ...
百度站内搜索对网站的影响
最近百度已经全面开放站内搜索功能,凡是在百度站长平台验证过的网站均可添加这个功能.想必很多朋友都很关心百度站内搜索对网站有哪些影响,现发表下自己的一些看法. 在站内搜索工具内提交的数据,能够全部用于站 ...
discuz实现百度站内搜索论坛样式（辅助插件）
百度近期在大肆推广自己的新产品:百度站内搜索.记得几年前百度站长平台就已经有了这个功能,但是那个时候要想用这个功能,你得参加活动,限量名额.活动抽奖等等,总之就是机会难得. 但是,现在百度全面开放了, ...
修复百度站内搜索不能搜索问题
百度站内搜索不能使用最近发现百度站内搜索无法使用,搜索后提示页面不存在. 通过查询发现可以使用以前的搜索代码: <form target="_blank" action=& ...
html百度站内搜索代码,百度站内搜索如何安装百度站内搜索代码如何部署使用...
按照以下步骤,只需几分钟就可以完成站内搜索引擎的安装: 使用普通百度账号或百度联盟账号,均可开通站内搜索.点击此处去注册账号. 验证站点是为了证明您对该站点的所有权,您可以选择下载文件验证.html标 ...
百度站内搜索代码php,网页嵌入百度搜索条（含站内搜索功能）
网页嵌入百度搜索条(含站内搜索功能) 样式一: 代码: function g(formname) { var url = "http://www.baidu.com/baidu"; ...
html引用百度搜引擎代码,免费代码-免费百度搜索代码-免费搜狗搜索代码-免费网页代码-站内搜索...
覆盖了上千家网上商城,用户可以进行商品的搜索和价格比较,用户在查询某一商品的时候,可以从品牌,型号,商品名称任意词汇进行查询,系统都会智能提示相关的主题,引导用户快速找到所需的信息.( 更多>& ...
使用Google Custom Search打造站内搜索
链接: Google AJAX 搜索 API 参考: http://www.google.com/cse/docs/cref.html?hl=zh-CN http://www.google.com/c ...

html怎么调搜索框宽高,百度站内搜索css：输入框宽度及样式自定义

html怎么调搜索框宽高,百度站内搜索css：输入框宽度及样式自定义相关推荐

最新文章

热门文章