写网页效果，掌握html，css，唯一的捷径就是多模仿，多练习。小米官网的搜索框效果看似简单，实际写代码的时候才发现要掌握好多css知识才能完成效果。浮动、导航条、鼠标经过、定位、文字框效果实现、js效果实现等等。下面这段代码仅仅用html、css写出了基本的样子，js效果，鼠标经过、点击事件，光标定位效果都还没有实现。
效果原图见小米官网：http://www.mi.com
搜索效果切换图：
最终效果：
<!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>
<title></title>
<style type="text/css">
body
{
margin:0 auto;
padding:0;
}
#search
{
border:1px solid #dfdfdf;
height:38px;
width:384px;
font-size:11pt;
color:#a9a9a9;
-moz-user-select:none;
text-indent:14px;
}
.form
{
margin:0 auto;
width:300px;
position:absolute;
top:100px;
right:250px;
}
#glass a
{
position:absolute;
top:0px;
right:-126px;
border:1px solid #dfdfdf;
width:40px;
height:40px;
display:block;
background:url(glass_two.png);
}
#glass a:hover
{
background-position:0 -40px;
}
#ul
{
position:absolute;
top:-6px;
right:-150px;
width:280px;
display:block;
}
ul li
{
list-style-type:none;
float:left;
width:62px;
height:20px;
background-color:#f3f3f3;
margin-right:8px;
text-align:center;
font-size:9pt;
font-family:"微软雅黑";
color:#333333;
}
ul li:hover
{
background-color:#dfdfdf;
}
</style>
</head>
<body>
<div class="form">
<form>
<input type="text" name="input" id="search" value="搜索您需要的商品"></input>
</form>
<div id="nav">
<ul id="ul">
<a href="#"><li>小米手机4</li></a>
<a href="#"><li>小米电视</li></a>
<a href="#"><li>小米手机3</li></a>
</ul>
</div>
<div id="glass">
<a href="#"></a>
</div>
</div>
</body>
</html>
原文：http://www.cnblogs.com/xiaomanzi/p/3958361.html