多语言展示
当前在线:1965今日阅读:167今日分享:16

html+jquery搜索热门关键词

html+jquery搜索框显示热门关键词下拉显示固定下拉文字
工具/原料

adobe dreamweaver

方法/步骤
1

准备好需要用到的图标。

2

新建html文档。

3

书写hmtl代码。

4

书写css代码。* { padding: 0px; margin: 0px; }html { background: #FFF; }body { font: 12px Verdana, Arial, Tahoma; }img { border: none; }a { color: #198DD0; text-decoration: none; }a:hover { color: #ba2636; text-decoration: underline; }ul { list-style: none; }input, select, button { font: 12px Verdana, Arial, Tahoma; vertical-align: middle; }.indextext_1 { padding-left: 23px; background: url(../images/bg.png) no-repeat 0 -716px; height: 17px; }.pl1 { padding-left: 10px; }.center { margin: 0px auto; }.w960 { width: 988px; }.pright .infos_userinfo { margin-bottom: 0px; }.mt1 { margin-top: 10px; }.pright .mt1 { }.mt2 { margin-top: 16px; }.mb1 { margin-bottom: 10px; }.clear { overflow: hidden; }.fs-12 { font-size: 12px; }.fc-f60 { color: #F60; }.fc-f90 { color: #F90; }.clr { clear: both; }.ipt-txt { line-height: 15px; padding: 4px 5px; border-width: 1px; border-style: solid; border-color: #666 #BBB #BBB #666; font-size: 12px; margin-right: 2px; }.nb { line-height: 20x; padding: 1px 2px; border-width: 1px; border-style: solid; border-color: #666 #BBB #BBB #666; font-size: 12px; margin-right: 2px }.btn-1 { width: 56px; height: 24px; border: none; background: url(../images/comm-bt.gif) no-repeat; line-height: 25px; letter-spacing: 1px; cursor: pointer; overflow: hidden; color: #585858; }.btn-2 { width: 70px; height: 25px; border: none; background: url(../images/btn-bg2.gif) left top no-repeat; line-height: 25px; overflow: hidden; color: #444; margin-right: 2px; cursor: pointer; }.header { width: 100%; width: 960px; margin: auto; overflow: hidden; }.header_top { height: 40px; color: #676767; background: url('../images/bg.png') repeat-x scroll 0 0 transparent; }.header_top .title { float: left; width: 103px; height: 40px; }.header_top .title h1 { margin: 0; padding: 0; height: 40px; line-height: 40px; width: 103px; display: inline; }.header_top .time { float: left; padding-left: 10px; }.header_top a.rss { }.header_top .toplinks { float: right; text-align: right; }.header_top .toplinks a { margin: 0 5px; }.header_top .toplinks span { margin-left: 15px; }.header_top .toplinks span a { margin: 0 2px; }.header .search { overflow: hidden; }.header a { color: #777; }.header a:hover { color: #ff3333; text-decoration: none; }.header .top { clear: both; overflow: hidden; margin-top: 10px; }.header .title h1 a { width: 216px; height: 54px; display: block; overflow: hidden; }.header .banner { width: 500px; height: 60px; float: left; margin-left: 20px; overflow: hidden; }.header .banner img { width: 500px; height: 60px; display: block; }.header .banner2 { width: 200px; height: 60px; float: left; margin-left: 10px; overflow: hidden; }.header .banner2 img { width: 200px; height: 60px; display: block; }.welcome { text-align: right; margin-top: 10px; padding-right: 10px; color: #999; }.welcome a { margin: 0px 3px; }.pt1 { padding-top: 10px; }.bt1 { border-top: 1px solid #D9D9D9; }.module, .module .mid { overflow: hidden; }

5

代码整体结构。

6

查看效果。

推荐信息