【京东商城首页实战6】制作搜索框

接下来做第二部分：搜索框，即图1蓝色边框部分。

图1

HTML：

<div class="search">
     <input type="text" name="" id="" value="图书开抢"/>
     <button>搜索</button>
</div>

css代码：

.search {
    width: 538px;
    height: 35px;
    background: pink;
    /*最后要去掉背景颜色*/
    float: left;
    margin-top: 25px;
}  效果1
.search input{
    float: left;
    /*表单元素之间默认有几像素的间隔，可以通过浮动来清除*/
    width: 450px;
    height: 32px;
    /*搜索框空白之间的高度*/
    border: 2px solid #B61D1D;
    padding-left: 4px;
    /*文字离左边框有间距*/
    color: #666;
    font: 14px/32px "microsoft yahei";
}  效果2
.search button{
    float: left;
    width: 80px;
    height: 36px;
    background-color: #B61D1D;
    font: 16px/36px "microsoft yahei";
    color: #fff;
    cursor: pointer; /* 鼠标变成小手*/
}效果3

效果1：

粉色背景部分是文本框和按钮的父亲盒子。

效果2：

文本框有个2px的边框，所以如果从白色地方测量button的宽度，要减掉2px。

效果3：

搜索框制作完毕，欢迎不吝赐教，谢谢！