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

article/2025/10/7 3:32:26

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


http://chatgpt.dhexx.cn/article/KQbgPcbx.shtml

相关文章

织梦手机站站内搜索

今天在做手机网站发现一个问题,当在手机是使用搜索功能时马上就跳转到电脑端网站去了,在手机上无法使用。在网上找半天没有找到解决的办法,后来自己想通了,下面告诉大家怎么样简单的实现这个功能!我的手机站是在m/这个…

基于 Elasticsearch 的站内搜索引擎实战

站内搜索,可以认为是针对一个网站特性内容的搜索功能。由于内容、格式可控,站内搜索比全网搜索的实现要简单很多。 简书这个网站本身自带一个搜索,但是缺乏针对个人文章的搜索,所以本文的实战内容是解决这个痛点。 代码在 https…

使用swiftype实现站内搜索

本人博客opiece.me,欢迎访问。 前言 首先,以下的内容是基于最新的swifytpe的教程,应该是2.0.0。 站内搜索顾名思义就是将范围限定在你的网站内,以此范围进行关键字搜索。 常见的站内搜索是google和baidu的,但是现在…

Compass实战 站内搜索

今天早上打算对这两天学习的Lucene以及Compass总结一下,想来想去,还是写个小项目来验证最好了。于是就有了今天的这篇文章。难易程度适合对于Compass或者Lucene刚入门的童鞋,大牛看到后望轻喷 :-) 项目预览项目需求项目目录核心处理 发帖部分查询部分总结项目预览 项目需求 …

html中的搜索

目录 hello😄 form表单🍉 form的语法🍊 from的属性🍊 提交?重置?🍊 表单按钮(html)🔍 JavaScript提交表单🔍 JavaScript重置表单&#x1f…

必应(Bing)的站内搜索 site:<域名> <搜索内容>

最近在备考OCP,发现有一个网站的题库很好,就是www.examtopics.com,有很多Oracle的考题,都是在这里面搜到的,而且每道题都有人讨论。 为了加快搜索速度,提高精度,可以用Bing在这个网站内搜索&am…

百度站内搜索使用教程

最近做了一个博客CMS网站,用到了百度站内搜索,做一些必要的笔记,一来是对自己学习的知识的巩固,二来对有同样问题的人有参考作用 文章目录 一 使自己的网站被百度收录二 获取百度站内搜索代码三 总结 声明一下,我本人很…

利用免费的必应 Bing 自定义搜索打造站内全文搜索

简介 百度的站内搜索不做了,唉,果然免费的不永久。我们看看 Bing 的,每个月有 1000 次免费的调用 bing search api 的次数。不同客户可以多申请几个就行了。 申请入口: https://www.customsearch.ai,官方简介页面官方…

html百度站内搜索代码,网站添加百度站内搜索的教程

zblog博客程序中可以在侧边栏中添加搜索功能,但是让人郁闷的是如果没针对搜索使用搜索插件,那情况简直让人抓狂,还好我们可以使用百度的站内搜索功能,一方面可以节省网站的资源,另一方面可以增加百度的收率几率。 关于…

站内搜索

使用“site:”或者“domain:”来实现站内搜索 如果你想在一个特定的网站上来进行搜索,在众多庞大的信息流中找到你想要的信息, 在上篇中(http://blog.csdn.net/liunian02050328/article/details/8220379)介绍在java编程的环境下实现站内搜索,…

计算机网络中的ping什么意思,PING命令是什么?PING使用方法和参数详解

PING命令是用来检查本机于网络上的电脑是否正常通信的一个命令,作为一个网站的管理员、单位的网管这也是一个必会的命令。 因为网络中所有的电脑都有一个单独不会重复的IP地址,我们使用PING命令给目标IP地址发送一个数据包,对方就要返回一个同…

常见的ping命令

1.ping 延时和丢包 开始--运行---输入cmd---输入ping IP(IP为所要ping的服务器的IP) 常与 -t 选项结合使用 ctrlc结束 延时主要看时间列 看时间得数值和波动 丢包 ---出现请求超时 2.追踪路由 tracert IP 注意: 追路由 --一般追3次 …

ping命令常见参数使用详解

winR 输入cmd 回车 进入命令窗口 输入ping baidu.com 回车可以查看网络连接。 ping [-t]参数是用来不断的ping对方主机,直到手动停止,使用ctrlc。Windows默认是四次停止。 [-l](-L)参数用来设定数据包的大小的,在默认的…

Linux 常用ping命令详解

一、用法 Usage: ping [-aAbBdDfhLnOqrRUvV] [-c count] [-i interval] [-I interface][-m mark] [-M pmtudisc_option] [-l preload] [-p pattern] [-Q tos][-s packetsize] [-S sndbuf] [-t ttl] [-T timestamp_option][-w deadline] [-W timeout] [hop1 ...] destination二…

CentOS7里ping命令详解

ping 功能简述:Linux系统的ping命令是常用的网络命令,它通常用来测试与目标主机的连通性,我们经常会说“ping一下某机器,看是不是开着”、不能打开网页时会说“你先ping网关地址192.168.1.1试试”。它通过发送ICMPECHO_REQUEST数…

ping命令

在网络中ping是一个十分强大的TCP/IP工具。它的作用主要为: (1)用来检测网络的连通情况和分析网络速度;(2)根据域名得到服务器IP;(3)根据ping返回的TTL值来判断对方所使…

Ping命令的用法

ping基本使用详解 在网络中ping是一个十分强大的TCP/IP工具。它的作用主要为: (1)用来检测网络的连通情况和分析网络速度; (2)根据域名得到服务器IP; (3)根据ping返回…

ping命令简单总结

ping测失败是最长出现的网络故障,面对ping不通的问题,需要有一个排查顺序,接下来就简单总结下: 1、ping命令简介 当192.168.1.1向192.168.1.2发出ping测,ping命令生成固定格式的ICMP数据请求包,ICMP协议将…

ping命令基本使用详解

ping命令原理 ping命令是用来探测本机与网络中另一主机之间是否可通的命令,如果两台主机之间ping不通,则表明这两台主机不能建立起连接。 ping命令位于7层协议的网络层。 ping 命令是基于 ICMP 协议来工作的,ICMP为 Internet 控制报文协议。…

Linux ping命令详解

ping命令用来测试主机之间网络的连通性。执行ping指令会使用ICMP传输协议,发出要求回应的信息,若远端主机的网络功能没有问题,就会回应该信息,因而得知该主机运作正常。 语法 ping(选项)(参数) 选项 -d:使用Socket的SO…