1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 6 <title>搜索框</title> 7 <style type="text/css"> 8 *{ 9 margin: 0px; 10 padding: 0px; 11 } 12 .nav{ 13 width: 100%; 14 height: 100vh; 15 background: #008B8B;overflow: hidden; 16 } 17 .search{ 18 width: 90%; 19 height: 40px; 20 line-height: 40px; 21 margin: 10px auto; 22 background: #fff; 23 border-radius: 20px; 24 } 25 .search_icon{ 26 float: left; 27 width: 15%; 28 text-align: center; 29 } 30 .search_icon img{ 31 width: 30px; 32 height: 30px; 33 vertical-align: middle; 34 } 35 .search input[type="text"]{ 36 float: left; 37 width: 80%; 38 height: 30px; 39 line-height: 30px; 40 margin-top: 5px; 41 border: none; 42 outline: none; 43 box-sizing: border-box; 44 appearance: none; 45 -webkit-appearance: none; 46 } 47 </style> 48 </head> 49 <body> 50 <div class="nav"> 51 <div class="search"> 52 <div class="search_icon"><img src="img/search.png"/></div> 53 <input type="text" name="" id="" value="" placeholder="搜索" /> 54 </div> 55 </div> 56 </body> 57 </html>
img/search.png图片为：