网页搜索框的制作

1. 做一个搜索框我们有很多种方式 ，其中最常见的方式
   1>.用div 我们先把已经做好的搜索框的图片切下来 给div作为背景图片 ，然后再在div里面加input标签

   2>用表格来做搜索框

    <table>
        <tbody>
            <tr>
                <td class="one">
                    <input type="text"/>
                    <span>搜索</span>
                </td>
            </tr>
        </tbody>
    </table>

当我们通过表格来做的时候我们需要注意的是：
1. input标签是自带各2px上下左右边距 和上下左右各1px边框的 ，所以当我们计算高度的时候需要先把input的
margin,padding 设置为0， border也设置为0 ，避免其影响我们的高度
2.第二点需要注意的是，td也是自带上下左右 1px的边距的 我们也先需要把其设置为margin:0 padding:0;
3.table 是自带border-spacing 的， 我们也需要把其设置为0；
4.第四点，span标签是行内标签 ，当我们想给它设置宽高的时候，必须先把它变成块级元素，方法可以设置float（设置float后 行内元素就变成了块级） 或者dispaly
5.如果我们给span设置成是dispaly 那么它与input会有一点上下错开 影响了我们的高度 所以最好的方法是给
span设置浮动而不是dispaly
6.我们需要加边框的话只需要给td 加border即可 这样 高度都在我们的计算范围之内啦！
CSS 代码如下：

    <style>
        td,input{margin:0;padding:0;}
        table{border-spacing:0;}
        td{border:1px solid #ccc;}
        input{ width:150px;height:30px; border:0;}
        span{height:30px;width:40px;float:right;}
    </style>