html+jquery搜索热门关键词
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。
<div class="header_top"> </div>
<div class="searchbox mt1">
<div class="search w960 center">
<form name="formsearch" >
<div class="form">
<div class="form_left">
<div class="form_right">
<div id="searchtype">
<div id="searchvalue">全部素材</div>
<div id="boult">▼</div>
<ul id="valuelist" style="display:none">
<li title="1">全部素材</li>
<li title="4">图片/壁纸</li>
<li title="2">矢量</li>
<li title="3">PSD</li>
<li title="7">字体</li>
<li title="5">网页模板</li>
<li title="6">图标/Icon</li>
<li title="10">PPT</li>
<li title="9">音效</li>
<li title="8">三维/3D</li>
<li title="11">Flash</li>
<li title="12">网页代码</li>
<li title="13">笔刷/其他</li>
</ul>
</div>
<h4>搜索</h4>
<input name="keyword" type="text" autocomplete="off" class="search-keyword" id="search-keyword" value="输入关键词，回车搜索" onfocus="if(this.value=='输入关键词，回车搜索'){this.value='';}" onblur="if(this.value==''){this.value='输入关键词，回车搜索';}" />
<button type="submit" class="search-submit" onclick="return checkinput()"> 搜索</button>
</div>
</div>
<ul id="hotwords" class="hotwords" style="display:none">
<li class="hwtitle"> 每日热词TOP10：</li>
<li><a href='#'>
<h1>背景</h1>
<span>13776次搜索</span></a></li>
<li><a href='#'>
<h1> 卡通</h1>
<span>7821次搜索</span></a></li>
<li><a href='#'>
<h1>画册</h1>
<span> 7783次搜索</span></a></li>
<li><a href='#'>
<h1>底纹</h1>
<span> 7669次搜索</span></a></li>
<li><a href='#'>
<h1>名片</h1>
<span> 7490次搜索</span></a></li>
<li><a href='#'>
<h1>人物</h1>
<span> 7106次搜索</span></a></li>
<li><a href='#'>
<h1>手绘</h1>
<span> 5659次搜索</span></a></li>
<li><a href='#'>
<h1>圣诞节</h1>
<span> 5532次搜索</span></a></li>
<li><a href='#'>
<h1>商务</h1>
<span> 4982次搜索</span></a></li>
<li><a href='#'>
<h1>云</h1>
<span> 4719次搜索</span></a></li>
</ul>
</div>
</form>
</div>
</div>
</div>
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、查看效果。
