Question

Iam学习HTML，CSS，我在制作像google这样的搜索栏时遇到问题。你能给我任何建议吗，我做错了什么，尤其是大小？谢谢:)）

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

感谢您的任何建议：）

Answer 1

试试这个，这可能会对你有所帮助。

<强>更新

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>

Answer 2

我做了这个并且工作正常......

<!DOCTYPE html>
<html>
<head>
<style>
.searchbar{
    margin-top:25px;
   margin-left:283px;
   width:100%;
}
.bar{
    border-radius:0;
    -webkit-box-shadow: 2px 3px 0px -2px #ccc;
    padding:10px;
    border:0px;
    outline: none;
    border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #CCC;
}
.bar:hover{
    -webkit-box-shadow: 3px 6px 7px -3px #ccc;
}
</style>
</head>
<body>
                <div class="container">
        <div class="row">
            <div class="col-md-12 col-xs-12">
                <div class="searchbar">
                    <div class="form-group ">
                        <input type="text" class="bar" style="width:588px; height:44px; outline:none;" class="form-control" >
                         <a href="#"><i style="margin-left:559px; top:-30px; "class="glyphicon glyphicon-search"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

像HTML和CSS中的谷歌搜索栏

2 个答案: