代码如下：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>google</title>
<style media="screen">
.container{
width: 100%;
height: 100%;
}
.logo{
margin: 106px 0 0;
height: 200px;
background: url("../../static/image/google_logo.png")center no-repeat;
background-size: 270px 90px;
}
.searchTool input{
border: 1px solid #d3dcd8;
border-radius: 2px;
width: 666px;
outline: none;
height: 39px;
box-shadow: 0 2px 3px #bbbab6;
font-size: 17px;
text-indent: 14px;
}
.searchTool a{
position: relative;
left: 630px;
top:-43px;
display: inline-block;
width: 37px;
height: 43px;
background: url("../../static/image/mic.PNG") no-repeat;
background-size: 37px 44px;
}
.searchTool{
margin: -25px auto;
height:42px;
width: 664px;
}
</style>
</head>
<body>
<div class="container">
<div class="logo"></div>
<div class="searchTool">
<input>
<a></a>
</div>
<div class="lable_marker"></div>
</div>
<script src="bundle.js"></script>
</body>
</html>
图片：
没做之前觉得很简单，开始做才发现细节很多，主要细节基本上在.searchTool input{}=>
输入框光标移入：outline: none;
竖线离输入框左边的距离： text-indent: 14px;
字体，border-radius等等，很多东西。
输入框的box-shadow还是没能很好还原：
差别挺明显。
之前学css这么多样式记不住也不会用，现在觉得还是要边学边写点小demo效率才比较高。