【制作网页时搜索框怎么做】网页制作如何做搜索框
发布时间:2018-07-15 05:09:09 影响了: 人
们在制作大型网站时,经常会遇到制作一个漂亮的搜索框的问题,看似简洁的搜索框,制作起来也是需要我们细细规划一下,今天小编为大家推荐制作网页时搜索框的方法。
制作网页时搜索框的方法
首先,我们打开自己建了一半的网页或者是新建一个页面,个人建议用HTML5。
然后,我们开始编写代码。搜索框要有输入框和搜索按钮两部分组成,我用的都是input
我们会在input框的外面再套一个标签,我是仿照百度搜索的样子,在input的外面套了一个span标签,在最外层套了一个form表单
我们的第一个input框是用来输入文字的,其type类型应该是text,第二个是搜索的,我用的type类型是submit(提交),
这样一个简单的搜索框就算是做出来了,我们可以在浏览器中查看一下。可以看到两个框之间是有一定的距离的,这个就需要我们重新定位提交按钮的位置
我采用的是relative定位方法,将第二个input框的位置定位为left-:10px。这样刚好和前面的输入框的边重合
这样一个基本的搜索框就做好了,我们可以再调整一下框的高度和宽度,以及整体的位置,使得这个搜索框更加美观大方。