標籤：style blog http color os io ar for 2014
寫網頁效果，掌握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>
html css 模仿小米官網搜尋方塊
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
