制作京东快递查询 css制作三角形

 这是我学习前端道路上制作的一个小案例，想把这些记下来，记录我的学习经历和更加熟练的掌握代码.。这个案例是当我们在下面输入数字时上面的盒子会放大的显示出来，效仿的是京东快递查询单号。好了，废物不多说，上代码。

1.结构：

 2.css样式：

 

 

 这些样式没有什么亮眼的，无非就是一些定位什么的，唯一值得一提的就只有css制作三角形了。

css制作三角形：

(1).将宽度和高度都设置为0；

(2).设置边框线的宽度，边框线的样式(边框线越宽三角形越大，因为这个三角形就是边框线撑出来的)

(3).最后设置边框线的颜色就可以制作出来三角形了

3.js代码

 第一步：是获取元素对象，

第二步：是给那个输入的搜索框添加键盘监听，如果这个搜索框中的内容为0，那么这个放大的显示框就隐藏起来，否则就显示出来，并且将搜索框中的内容传入到放大的显示框中显示出来

第三步：如果这个搜索框没有获得焦点的情况下，这个放大的显示框还是隐藏的。在获得焦点的情况下这个放大的显示框就显示出来。

这个就是这个京东快递案例的做法，比较简单。