JavaScript和jQuery实现淘宝搜索栏的制作

最终效果图如下：

html和JavaScript代码如下：

宝贝
店铺
高级
搜索

* {padding: 0;margin: 0;
}body {background-color: #333;
}.bg-div{background-image: url('../images/river.jpg');width: 1228px;height: 690px;margin: 0 auto;position: relative;
}.logo {background-image: url('../images/logo.png');width: 107px;height: 53px;float: left;margin: -4px 18px 0 0;
}form {float: left;background-color: #fff;padding: 5px;
}.search-input-text {border: 0;float: left;height: 25px;line-height: 25px;outline: none;width: 350px;font-size: 16px;
}.search-input-button {border: 0;background-image: url('../images/search-button.png');width: 29px;height: 29px;float: left;
}.search-box {position: absolute;top: 200px;left: 300px;
}#search-suggest {width: 388px;background-color: #fff;border: 1px solid #999;display: none;
}.suggest ul {list-style: none;
}.suggest ul li {padding: 3px;font-size: 14px;line-height: 25px;cursor: pointer;/*手型*/
}.suggest ul li:hover {text-decoration: underline;background-color: #e5e5e5;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！