html+jquery搜索热门关键词

准备好需要用到的图标。

新建html文档。

书写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>

书写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; }

代码整体结构。

查看效果。