如何自定义自己的搜索网页呢,教程~~~

先用vs code生成HTML模板,输入!按回车就出来啦,很方便喔~

可以编辑title元素里面的内容来自定义标题,其余的先不用看

然后在body里面编辑内容,先在里面写个文本框和a元素的链接,然后在里面加上js

<input type="text">
<a href="javascript:{}">按钮</a>

然后给文本框加个ID,确保js能够获取到那个元素

<input type="text" id="a">

之后用js的document.getElementById来获取文本框的值,js都是区分大小写的,该大写的要大写

document.getElementById("a").value

这样就能获取ID为a元素的value值,文本框的value就是它的内容,文本框的value默认是空的

如果想要在双引号里面加引号,那就得用单引号,现在大概就是这样了

<input type="text" id="a">
<a href="javascript:{document.getElementById('a').value}">按钮</a>

现在点击按钮还是没有用的,我们给它加个open函数,open能够打开指定链接,open("https://www.baidu.com/"),这样就打开了百度,我们让百度去搜索文本框的内容,https://www.baidu.com/s?wd=123,百度就搜索了123,同理我们可以写出以下代码

open("https://www.baidu.com/s?wd=" + document.getElementById("a").value)

这样就会让百度搜索搜索指定内容,结合起来就是下面这样

<input type="text" id="a">
<a href="javascript:{open('https://www.baidu.com/s?wd=' + document.getElementById('a').value)}">按钮</a>

输入qwq,点击按钮之后就跳转到了百度搜索qwq,但是这个搜索框还是有问题,比如你输入html的转义代码,你搜索就不起作用了,搜索html空格的转义 试试看

你点击按钮就直接跳转到百度去了,并没有搜索 ,解决办法还是有的,可以用encodeURIComponent函数,这个函数可以让内容变成URI编码,就不会出现各种问题了,用encodeURIComponent()把文本框的内容括起来

<input type="text" id="a">
<a href="javascript:{open('https://www.baidu.com/s?wd=' + encodeURIComponent(document.getElementById('a').value))}">按钮</a> 

整体大概就完成了,现在几乎可以搜索任何内容,不会出错,但是还是感觉很单调,可以加个css装饰装饰

我们给它居中,用center元素居中,代码在vs code里大概就是这样

这样就居中了,继续把按钮装饰一下,用 text-decoration: none来清空搜索按钮的css,下划线和颜色都会消失,在a元素里写上style="text-decoration: none;"

<a style="text-decoration: none;" href="javascript:{open('https://www.baidu.com/s?wd=' + encodeURIComponent(document.getElementById('a').value))}">按钮</a>

然后给加个颜色,在style里加上color,color:#f00代表红色,多个属性用分号分开;

style="text-decoration:none;color:#f00"

这样按钮就没有下划线了,而且颜色是红色的,再给按钮加个边框,用border属性可以加边框并且进行装饰

border-width:设置边框粗细
border-style:设置边框样式
border-color:设置外边框颜色
border-radius:给给边框加圆角
border-width:2px;border-style:solid;border-color:#ffc0cb;border-radius:10px
大概的意思就是,设置边框的粗细为1px,设置边框的样式是实心线条,设置边框的颜色是粉色,设置边框圆角10px

代码大概就是这样:

style="text-decoration:none;color:#f00;border-width:2px;borde-style:solid;border-color:#000;border-radius:10px"

实际上这个搜索框和按钮还特别小,给它加大点,font-size是加大文字,文字加大了,搜索框也跟着加大,搜索和按钮都加大一下,font-size:40px设置40像素文字

综合起来就是下面这样:

<center>
<input type="text" id="a" style="font-size: 40px;">
<a style="font-size: 40px;text-decoration:none;color:#f00;border-width:2px;border-style:solid;border-color:#FFC0CB;border-radius:10px" href="javascript:{open('https://www.baidu.com/s?wd=' + document.getElementById('a').value)}">按钮</a>
</center>

但是如果想要内容居中的话,那可以用div元素来让内容居中,div是定义一个区块,让内容在这个区域里,先用div把内容都包裹起来

然后给div定义一个宽度和高度,宽度至少要把搜索框和按钮包裹起来,然后高度就弄高一点,之后让内容居中在div的中间

<div style="height: 600px;width: 800px;line-height: 600px;">
</div>
<!--定义div的高为600px,宽为800px,然后用line-height居中,line-height是指内容单行所占的高度,如果该高度和div的高度一致,那么它就居中了-->

这样搜索框就居中啦~

未完待续...


愿天下所有人都变成少女~