码迷,mamicode.com
首页 > 移动开发 > 详细

html css 模仿小米官网搜索框

时间:2014-09-05 18:02:01      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   io   ar   for   2014   

写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习。小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果。浮动、导航条、鼠标经过、定位、文字框效果实现、js效果实现等等。下面这段代码仅仅用html、css写出了基本的样子,js效果,鼠标经过、点击事件,光标定位效果都还没有实现。

效果原图见小米官网:http://www.mi.com

bubuko.com,布布扣

 

 搜索效果切换图:

bubuko.com,布布扣

 

 最终效果:

bubuko.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 模仿小米官网搜索框

标签:style   blog   http   color   os   io   ar   for   2014   

原文地址:http://www.cnblogs.com/xiaomanzi/p/3958361.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!