百度搜索框怎么用HTML做,百度搜索框的基本实现

百度首页搜索框是这样的一个基本形式，我们搜索框里输入字符时就能显示出一些有关的联想词，如图2所示

图1.png

图2.png

那么今天我们来写一下这种效果，不算一模一样，大概相同吧，哈哈。

第一步：在html文档中搭建出类似的框架，给出类似的样式，基本页面布局实现大致一样，代码如下：

百度搜索

*{

margin: 0;

padding: 0;

}

.show{

margin: 10px auto;

width: 340px;

}

#text{

/*去掉默认样式*/

appearance:none;

width:250px;

height: 20px;

outline:0;

}

#go{

display: inline-block;

text-decoration: none;

text-align: center;

line-height: 25px;

border: 0;

width:70px;

height: 25px;