接下来做第二部分:搜索框,即图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:
搜索框制作完毕,欢迎不吝赐教,谢谢!