Question

我是编程的新手。我想至少重新创建Google搜索框的形状，然后卡住了。这是我的html代码：

  <div id="fkbox-container">
    <div id="fakebox">
        <form action="https://google.com/search">
          <input id="fk"type="text" name="q">
          <input type="submit" value="Google Search">
    </div>

这是CSS：

#fxbox-container{
  height:60px;
  text-align: center;    
#fakebox{
   display: block;
    }
#fk{
   border-radius: 22px;
   display: block;
   margin:13px auto 10px;
   max-width: 550px;

我希望搜索框的代码类似于Google的：c。我很感谢任何建议

Answer 1

<html>  
<head>
    <title>Google Homepage</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <style>
/* BASIC STYLES */
body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}

li.nav-links a:hover {
  text-decoration: underline;
}

#sign_in:hover { 
  box-shadow: 1px 1px 5px #999;
}

#sign_in {
  color: #fff;
}

/* GOOGLE AREA */
.google #google_logo {
  text-align: center;
  display: block;
  margin: 0 auto;
  clear: both;
  padding-top: 112px;
  padding-bottom: 20px;
}

.form {
  text-align: center;
}

#form-search { 
  width: 450px;
  line-height: 32px;
  padding: 20px 10px;
}

.form #form-search {
  padding: 0 8px;
}

/*#form-search:hover {
  border-color: #e4e4e4;
  padding-top: 0;
}*/

.buttons {
  text-align: center;
  padding-top: 30px;
  margin-bottom: 300px;
}


/* MEDIA QUERIES */

@media screen and (max-width: 400px) {
 
 li.nav-links a {
    display: none;
  }
  
 #google_logo {
   padding: 0;
 }
  
 .buttons {
   display: none;
 }
  
 #form-search {
   width: 80%;

 }
}

@media screen and (max-width: 565px) {
 
  li.nav-links a {
    display: none;
  }
  
  
 #google_logo {
   padding: 0;
 }
  
 .buttons {
   display: none;
 }
  
 #form-search {
   width: 80%;

 }
  }
 
</style>
  </head>
  
  <body>
  
    
    <!-- GOOGLE IMG -->  
    <div class="google">
      <a href="#" id="google_logo"><img src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.pngwing.com%2Fen%2Ffree-png-zngkd&psig=AOvVaw2GQxFUtBCK9muJsVlut5yF&ust=1597127504618000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCICAi9qBkOsCFQAAAAAdAAAAABAI"/></a>
    </div>
    
    <!-- FORM SEARCH -->  
    <div class="form">  
      <form>
        <label for="form-search"></label>
        <input type="text" id="form-search" placeholder="Search Google or type URL">
      </form>
    </div>  
    
    <!-- BUTTONS -->
    <div class= "buttons">  
      <input type="submit" value="Google Search" id="google_search">
      <input type="submit" value="I'm Feeling Lucky" id="im_feeling_lucky">
     
    </div>
       
  </body>
  </html>

谷歌搜索框的CSS

1 个答案: