首页 > 代码库 > html css 模仿小米官网搜索框
html css 模仿小米官网搜索框
写网页效果，掌握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="http://www.mamicode.com/搜索您需要的商品"></input> </form> <div id="nav"> <ul id="ul"> <a href="http://www.mamicode.com/#"><li>小米手机4</li></a> <a href="http://www.mamicode.com/#"><li>小米电视</li></a> <a href="http://www.mamicode.com/#"><li>小米手机3</li></a> </ul> </div> <div id="glass"> <a href="http://www.mamicode.com/#"></a> </div></div></body></html>
html css 模仿小米官网搜索框
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。