思考：
布局：
1，flex元素上下左右居中，内部元素横向排列；
div{ /* 100vh = viewport height*/ display: flex; justify-content: center; align-items: center; flex-direction: row; }
2，input输入框与input type=“button”按钮对齐，给属性值vertical-align:top;
3,input输入框去除默认样式 {border:none;outline:none;}
js原理解析，理解注释
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>模拟360搜索</title> 6 <style> 7 body{padding:0;margin:0;overflow:hidden;} 8 ul,li{margin:0;padding:0;} 9 ul{border:1px solid #ccc;border-top:0;width:522px;margin-left:-110px;} 10 li{list-style:none;padding:5px;text-align:left;text-indent:10px;cursor:pointer;} 11 .main{ 12 /* 100vh = viewport height*/ 13 display: flex; 14 justify-content: center; 15 align-items: center; 16 flex-direction: row; 17 } 18 .skin-search-input{ 19 width:500px; 20 background: #fff; 21 height: 34px; 22 padding: 4px 10px 4px 12px; 23 vertical-align: top; 24 border: 1px solid #ccc; 25 } 26 .keyword{ 27 background: #fff; 28 border: none; 29 color: #333; 30 font-size: 16px; 31 height: 30px; 32 line-height: 30px9; 33 margin-top: 3px; 34 outline: none; 35 width:100%; 36 } 37 input[type=button]{ 38 -webkit-appearance: none; 39 border: 0; 40 cursor: pointer; 41 font-size: 18px; 42 height: 44px; 43 outline: none; 44 vertical-align: top; 45 width: 110px; 46 background: #19b955; 47 color: #fff; 48 } 49 </style> 50 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 51 </head> 52 <body> 53 54 <div class="main"> 55 <div class="skin-search-input"> 56 <input type="text" class="keyword"> 57 </div> 58 <input type="button" value="搜一下"> 59 </div> 60 <div align="center" class="message" style="display:none;"> 61 <ul> 62 </ul> 63 </div> 64 65 <script> 66 //如果页面加载直接给li元素绑定事件，你是获取不到li元素的。 67 //解决方案，可以用jq给我们提供的事件委托 68 $(".message>ul").on("mouseover","li",function () { 69 this.style.background = "#efefef"; 70 }); 71 $(".message>ul").on("mouseout","li",function () { 72 this.style.background = "white"; 73 }); 74 75 function getInfo(data) {//回调函数 76 //解析数据，然后把message里面的ul里面的li元素的数据替换 77 var results = data.result; 78 var i; 79 document.querySelector(".message>ul").innerHTML = ""; 80 for(i=0;i<results.length;i++){ 81 var li = document.createElement("li"); 82 li.innerHTML = results[i].word; 83 console.log(li); 84 document.querySelector(".message>ul").appendChild(li); 85 } 86 } 87 88 //添加键盘事件 89 document.querySelector(".keyword").onkeyup = function () { 90 var keyword = this.value; 91 92 //如果在输入的时候有空格的话，这里需要做判断 93 if(keyword.length>0){ 94 //我根据这个关键字去获取数据，获取到数据之后 95 //加载到列表里 96 //显示 97 document.querySelector(".message").style.display = "block"; 98 //把关键字给360的这个搜索接口，让它来给我结果 99 100 //使用script标签去发送请求 101 var tag = document.createElement("script"); 102 tag.src = "https://sug.so.360.cn/suggest?callback=getInfo&encodein=utf-8&encodeout=utf-8&format=json&fields=word,obdata&word="+keyword; 103 document.body.appendChild(tag); 104 }else{ 105 document.querySelector(".message").style.display = "none"; 106 } 107 } 108 </script> 109 </body> 110 </html>