css-网页搜索框制作

666 阅读1分钟
  1. 利用form表单制作(完美方式),添加两个input元素,这样输入框和提交框之间不会存在有缝隙

    以小米商城搜索区为例:
    

image.png

html结构: image.png

css结构:

image.png

image.png

  1. 利用div,添加两个span标签,span元素中添加input和button按钮,利用inline-block属性,(但两者中间会存在一个空隙)

    以百度新闻搜索区为例:
    

image.png

html结构:

image.png

css结构:

image.png

  1. 利用form,input和button标签均为行内块元素(inline-block),且分别设置边框,存在空隙

    以百度页面搜索区为例:

image.png

html结构:

image.png

css结构:

image.png