谁能帮我用DIV+CSS布局下小米官网的搜索框。。。谢谢了!
展开全部
以下是代码 ,仅供参考
<!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: relative;display: inline-block;}
.txt {display: block;width: 364px;height: 32px;line-height: 32px;text-indent: 6px;border: 3px solid #dd4250;background: #fff;margin-bottom: 6px;color: #ccd1d9;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}
.btn {position: absolute;background: none;right: 2px;top: 0px;z-index: 2;display: block;width: 50px;height: 40px;cursor: pointer;border: none;}
.ico {width: 40px;height: 34px;position: absolute;top: 3px;_top: 5px;z-index: 1;display: block;cursor: pointer;border: none;right: 3px;}
.ico em {background-image: url("http://p.www.xiaomi.com/zt/2013/icon-common-newyear.png");z-index: 1;display: block;cursor: pointer;border: none;width: 17px;height: 18px;background-position: -223px -51px;margin: 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>
效果图如下:
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询