对搜索框的制作
我们要实现下面的搜索框,我们首先去考虑怎么布局,以及代码的优化。制作这个搜索框方法很多,可以抹掉文字图片截取整个大框作为一个div的背景图,在写入内容即可;也可以直接用div来装内容,设置圆角即可。提供的两种方法都可以,也比较简单。
我的做法就是用一个大的div装住里面的三个部分,左边绿色框,中间红色的输入框,以及右边蓝色的搜索按钮。对大的div写入圆角属性就可以实现圆角了,考虑到左右两边的内容超出大的div范围,在加个overflow:hidden,隐藏掉超出部分就可以了。里面布局的话,左边的“全站”应该是一个下拉列表,可以采用ul和li来布局;中间输入框采用test表单,右边搜索按钮采用button表单。在对里面的内容调整位置就好了。