思考：
布局：
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: 30px\9;
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>
时间： 2024-10-13 22:19:24