搜索欄像谷歌在HTML和CSS

Iam學習HTML,CSS和我有問題，使谷歌搜索欄。你能給我什麼建議，我做錯了什麼，特別是大小？謝謝:)搜索欄像谷歌在HTML和CSS

<!DOCTYPE html> 
 
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns:th="http://www.thymeleaf.org"> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
</link> 
 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 
</link> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<link rel="shortcut icon" type="image/x-icon" href="https://image.freepik.com/photos-libre/courbe-de-vapeur-de-la-fumee-d&-39;onde_19-123974.jpg" /> 
 
<style> 
 
    .container { 
 
    width: 1000px; 
 
    margin-top: 100px; 
 
    text-align: center; 
 
    } 
 
    h2 { 
 
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
 
    size: 150px; 
 
    fill: #294F6D; 
 
    } 
 
    div { 
 
    width: 500px; 
 
    height: 50px; 
 
    } 
 
    h1 { 
 
    text-align: center; 
 
    fill: 02111 D; 
 
    } 
 
    .search input[type="search"] { 
 
    width: 400px; 
 
    height: 50px; 
 
    } 
 
</style> 
 
<body> 
 
    <div class="container" 
 
    <form action="/worldoffragrance"> 
 
     <input name="search" /> 
 
     <input type="submit" value="GO" /> 
 
    </form> 
 
    </div> 
 
</body> 
 
</html>

感謝您的任何建議:)

來源

2016-08-22 kajasha

可以添加你的代碼，包括HTML？ – fernando

您需要爲每個元素添加樣式，以便像搜索inout和搜索按鈕一樣，如果您完全需要它，請使用google。 –

試試這個，這可以幫助你以某種方式。

更新

input{ 
 
    border: none; 
 
    padding: 10px; 
 
    margin: 10px; 
 
    height: 20px; 
 
    width: 500px; 
 
    border:1px solid #eaeaea; 
 
    outline:none; 
 
} 
 
input:hover{ 
 
    border-color: #a0a0a0 #b9b9b9 #b9b9b9 #b9b9b9; 
 
} 
 
input:focus{ 
 
    border-color:#4d90fe; 
 
} 
 

 
input[type="submit"] { 
 
    border-radius: 2px; 
 
    background: #f2f2f2; 
 
    border: 1px solid #f2f2f2; 
 
    color: #757575; 
 
    cursor: default; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    width: 100px; 
 
    padding: 0 16px; 
 
    height:36px; 
 
} 
 
input[type="submit"]:hover { 
 
    box-shadow: 0 1px 1px rgba(0,0,0,0.1); 
 
    background: #f8f8f8; 
 
    border: 1px solid #c6c6c6; 
 
    box-shadow: 0 1px 1px rgba(0,0,0,0.1); 
 
    color: #222; 
 
}

<div class="main"> 
 
<input type="text" /> 
 
<input type="submit" value="Go"> 
 
</div>

來源

2016-08-22 11:00:48

看起來好多了！謝謝：） – kajasha

搜索欄像谷歌在HTML和CSS

回答

相關問題