console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
   
</script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    /* .logo .logo-a{
        float: left;
        width: 120px;
        heigth: 44px;
        background: url(https://img.mdcdn.cn/pc/img/mall/index_service_sprite_v3.png?t=20190311) no-repeat;
        backround-size: 200px 80px;
        background-position: -80px 0;
    } */
    header{
        width: 100%;
        height: 44px;
        text-align: center;
        line-height: 44px;
        background-color: #0092d8;
        padding: 0 10px
    }
    .clearFix:after{
        content: "";
        display: block;
        clear: both
    }
    .left{
        float: left
    }
    .left a{
        display: inline-block;
        padding: 0px 10px;
    }

    .right{
        float: right;
    }
    .right a{
        float: left;
        display: inline-block;
        height: 44px
    }
    .export{
        /* position: relative; */
        width: 45px;
        transition: width 1s esay-in;
        overflow: hidden
    }
    .export input{
        /* position: absolute; */
        width: 200px;
        height: 100%;
        outline: none;
        opacity: 0;
    }
    .export:hover{
        width: 300px;
    }
    .export input:hover{
        opacity: 1
    }
    

    .last{
        margin-top: 100px;
        width: 50px;
        height: 50px;
        background-color: blue;
        transition: all 1s esay-in;
        -webkit-transition: all 1s esay-in   
    }
    .last:hover{
        width: 300px;
    }
</style>
</head>
<body>
 <header class="clearFix">
     <div class="logo">
         <a class="logo-a"></a>
     </div>
     <div class="left">
         <a>主页</a>
         <a>企业采购</a>
         <a>智能家电</a>
         <a>会员福利</a>
         <a>美的美居</a>
     </div>
     <div class="right">
         <a class="export" id="rga">
             <label for="rga">搜索</label>
             <input placeholder="请输入内容"/>
         </a>
         <a>手机</a>
         <a>登陆</a>
     </div>     
 </header>
 <div class="last"></div>
</body>
</html>