मैं प्रोग्रामिंग के लिए बिल्कुल नया हूँ। मैं Google खोज बॉक्स को कम से कम उसके आकार को फिर से बनाना चाहता हूं और मैं फंस गया। यह मेरा एचटीएमएल कोड है:

  <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>

और यह सीएसएस है:

#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। मैं किसी भी सुझाव की सराहना करता हूं

0
becker_03 10 अगस्त 2020, 09:02

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>
0
Bijin Abraham 10 अगस्त 2020, 11:11