以下是代码 ，仅供参考
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=gb2312" />
<title>demo</title>
<style type="text/css">
* {outline: none}
.search {position: relativedisplay: inline-block}
.txt {display: blockwidth: 364pxheight: 32pxline-height: 32pxtext-indent: 6pxborder: 3px solid #dd4250background: #fffmargin-bottom: 6pxcolor: #ccd1d9-webkit-border-radius: 6px-moz-border-radius: 6pxborder-radius: 6px}
.btn {position: absolutebackground: noneright: 2pxtop: 0pxz-index: 2display: blockwidth: 50pxheight: 40pxcursor: pointerborder: none}
.ico {width: 40pxheight: 34pxposition: absolutetop: 3px_top: 5pxz-index: 1display: blockcursor: pointerborder: noneright: 3px}
.ico em {background-image: url("http://p.www.xiaomi.com/zt/2013/icon-common-newyear.png")z-index: 1display: blockcursor: pointerborder: nonewidth: 17pxheight: 18pxbackground-position: -223px -51pxmargin: 8px 11px}
</style>
</head>
<body>
<div class="search">
<form id="user_search" action="/search" method='get' onsubmit="">
<input type="text" id="keyword" name="keyword" class="txt" autocomplete="off" value="搜索" />
<input type="submit" class="btn" value="" />
<span class="ico" id="scico"><em></em></span>
</form>
</div>
</body>
</html>
效果图如下：
1、首先#big左浮动和#right右浮动，right你没有右浮动，right右浮动后设备宽高。2、#heart不要设上边距，#small 设上填充，并更改相应数值。
3、CSS边框半径，很多浏览器不支持，改后在我电脑上只有360 6.3正常显示。
#big的圆角建议用背景图片做，这并没有改变纯CSS制做的原则。
以下为改动地方：
#heart {
width:33px
height: 77px
margin-left: 28px
margin-right: 28px
background-color:orange
display: block
}
#small {
width:89px
height: 77px
margin-left: 35px
margin-top: 35px
margin-right: 35px
background-color:white
border-radius: 0px 19px 0px 0px
padding-top: 28px
}
增加：
#right {
float: right
height: 140px
width: 33px
background-color: #FFA500
}
