css布局-搜索框制作

对搜索框的制作

    我们要实现下面的搜索框，我们首先去考虑怎么布局，以及代码的优化。制作这个搜索框方法很多，可以抹掉文字图片截取整个大框作为一个div的背景图，在写入内容即可；也可以直接用div来装内容，设置圆角即可。提供的两种方法都可以，也比较简单。

                        

        我的做法就是用一个大的div装住里面的三个部分，左边绿色框，中间红色的输入框，以及右边蓝色的搜索按钮。对大的div写入圆角属性就可以实现圆角了，考虑到左右两边的内容超出大的div范围，在加个overflow：hidden，隐藏掉超出部分就可以了。里面布局的话，左边的“全站”应该是一个下拉列表，可以采用ul和li来布局；中间输入框采用test表单，右边搜索按钮采用button表单。在对里面的内容调整位置就好了。