html css 模仿小米官网搜索框

浏览数：58 / 时间：2015年06月11日

写网页效果，掌握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 模仿小米官网搜索框