制作简单的网页搜索框

 时间:2024-11-16 13:57:15

1、首先,我们打开自己建了一半的网页或者是新建一个页面,个人建议用HTML5。

制作简单的网页搜索框

2、然后,我们开始编写代码。搜索框要有输入框和搜索按钮两部分组成,我用的都是input

制作简单的网页搜索框

3、我们会在input框的外面再套一个标签,我是仿照百度搜索的样子,在input的外面套了一个span标签,在最外层套了一个form表单

制作简单的网页搜索框

4、我们的第一个input框是用来输入文字的,其type类型应该是text,第二个是搜索的,我用的type类型是submit(提交),

制作简单的网页搜索框

5、这样一个简单的搜索框就算是做出来了,我们可以在浏览器中查看一下。可以看到两个框之间是有一定的距离的,这个就需要我们重新定位提交按钮的位置

制作简单的网页搜索框

6、我采用的是relative定位方法,将第二个input框的位置定位为left-:10px。这样刚好和前面的输入框的边重合

制作简单的网页搜索框

7、这样一个基本的搜索框就做好了,我们可以再调整一下框的高度和宽度,以及整体的位置,使得这个搜索框更加美观大方。

制作简单的网页搜索框制作简单的网页搜索框
  • Dreamweaver如何去除掉链接文字下面的下划线
  • html怎么让三张图片并列显示
  • dw制作网页完整步骤
  • html轮播图怎么制作
  • 怎样在网页中制作搜索栏
  • 热门搜索
    崩溃是什么意思 1999年属什么 欣然是什么意思 增值税是什么意思 排骨炖什么好吃又有营养 掉头发是什么原因 10月12日是什么星座 622848开头是什么银行 1992年属什么生肖 脉压差小是什么原因