CRIME

导航

HTML练习 | 百度搜索框 

<!DOCTYPE html>
<head>
  <title>百度首页</title>
  
  <style>
  .logo{
    background:url('https://www.baidu.com/img/bd_logo1.png?where=super') 50px 30px no-repeat;
    background-size: 70%;
    height: 200px;
    width: 400px;
    margin: 200px auto 0 auto;
  }

  .search{
    width: 640px;
    height: 40px;
    margin: auto;
    font-size:0;   /*两个Input框紧邻方法：父级标签及以上加font—size：0 */
  }
  .search01{
    border:1px solid #b3b3b3;
    width: 538px;
    height: 38px;
    padding: 0px;
    vertical-align: top;  /*两个Input框上不齐时方法一：上居中；方法二：folat*/
  }
  .search02{
    border: 0;
    padding: 0;
    color: #FFFFFF;
    font-size:15px; 
    background: #3388FF;
    width: 100px;
    height: 40px;
  }


  </style>
  
  <body>

    <div class="logo">  
    </div >

    <div class="search">
      <form action="https://www.baidu.com/s" method="get">
        <input type="text" class="search01">
        <input type="submit" value="百度一下" class="search02">
      </form>
    </div>     

  </body>

posted on 2019-04-29 15:42  CRIME  阅读(741)  评论(0)    收藏  举报