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

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

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

53167d4fc1b0d2ea8a3eb67011bd8cb0.png

百度站内搜索

百度也考虑到了这个问题,于是提供了一个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,无任何附加条件。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值