卡卡网

近日网站使用了百度站内搜索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，无任何附加条件。

标签: 百度站内搜索