寫網頁效果，掌握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>