以下是 jquery蓝色下拉搜索框js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery蓝色下拉搜索框 </title>
<link href="css/zzsc.css" rel="stylesheet" media="screen" type="text/css" />
<script language="javascript" src="js/jquery-min.js"></script>
</head>
<body class="index">
<div class="header_top">
</div>
<div class="searchbox mt1">
<div class="search w960 center">
<form name="formsearch" action="#">
<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>
<script language="javascript" type="text/javascript" src="js/searchjs.js"></script>
</div>
</form>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
JS代码(searchjs.js):
// JavaScript Document//鎼滅储鍒嗙被浠g爜$('#searchvalue').toggle(function(){
$('#valuelist').show();
$('#boult').text('鈻?);
}
,function(){
$('#valuelist').hide();
$('#boult').text('鈻?);
}
);
$('#boult').toggle(function(){
$('#valuelist').show();
$('#boult').text('鈻?);
}
,function(){
$('#valuelist').hide();
$('#boult').text('鈻?);
}
);
$('#valuelist li').click(function(){
var v = $(this).attr('title');
var name = $(this).text();
$('#typeid').val(v);
$('#searchvalue').text(name);
$('#boult').text('鈻?);
$('#valuelist').hide();
}
)//鎼滅储鐑棬鍏抽敭瀛椾唬鐮?function fbbox(fbboxID,ObjID){
$(fbboxID).click(function(){
$(ObjID).show();
}
);
$(ObjID).hover('',function(){
$(ObjID).hide();
}
);
$(fbboxID).keydown(function(){
$(ObjID).hide();
}
);
$(ObjID).find('li').click(function(){
var text = $(this).find('h1').text();
$(fbboxID).val(text);
$(ObjID).hide();
}
);
}
fbbox('#search-keyword','#hotwords');
//鎼滅储妗嗘娴嬩唬鐮?function checkinput(){
var search = $('#search-keyword');
var isNull = /^[\s' ']*$/;
if(search.val() == '杈撳叆鍏抽敭璇嶏紝鍥炶溅鎼滅储鍏ㄥ浗璁捐绱犳潗璧勬簮' || search.val().length <= 0 || isNull.test(search.val())){
search.focus();
window.alert("璇疯緭鍏ュ叧閿瘝锛屾悳绱㈠叧閿瘝涓嶈兘涓虹┖");
return false;
}
}
//瀵艰埅浠g爜$('#navMenu dl dt').hover(function(){
$(this).find('.dropMenu').show();
if($(this).attr("class") != 'clear-btn'){
$(this).addClass('hover');
}
}
,function(){
$(this).find('.dropMenu').hide();
$(this).removeClass('hover');
}
)//鏃堕棿宸绠?function dayBetween(lasttime){
$('.daybetween').each(function(){
var timestamp = Date.parse(new Date())/1000;
timestamp = timestamp - $(this).text();
//timestamp = timestamp+'/'+$(this).text();
var daytime = timestamp/86400;
var htime = timestamp/3600;
var mtmie = timestamp/60;
var stime = timestamp/1;
if(daytime>=1){
daytime = Math.floor(daytime);
var t = daytime+'澶╁墠';
$(this).text(t);
}
else if(htime>=1){
daytime = Math.floor(htime);
var t = daytime+'灏忔椂鍓?;
$(this).text(t);
}
else if(mtmie>=1){
daytime = Math.floor(mtmie);
var t = daytime+'鍒嗛挓鍓?;
$(this).text(t);
}
else{
if(timestamp<=0){
daytime = 1;
}
else{
daytime = timestamp;
}
var t = daytime+'绉掑墠';
$(this).text(t);
}
}
)}
CSS代码(zzsc.css):
/*---------- base ---------*/
*{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;}
/*---------- stock ---------*/
.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;/*position:relative;*/
}
.pright .infos_userinfo{margin-bottom:0px;}
.mt1{/* ( margin-top * 1 ) */
margin-top:10px;}
.pright .mt1{}
.mt2{/* ( margin-top * 2 ) */
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;}
/*---------- frame ---------*/
/*---------- frame:header ---------*/
.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;}
/*----- 新版导航菜单位置的样式 -------*/
.header .nav{}
/*-------- 圆角模型 ---------*/
.module,.module .mid{overflow:hidden;}
.module .top .t_l,.module .bottom .b_l{float:left;overflow:hidden;}
.module .top .t_r,.module .bottom .b_r{float:right;overflow:hidden;}
.module .top em{float:left;font-size:13px;font-weight:bold;font-family:Arial,Helvetica,sans-serif;margin-left:5px;}
.module .top em a:link,.module .top em a:visited{font-size:13px;font-weight:bold;}
.module .top span{}
.module .top strong{cursor:pointer;float:right;font-weight:normal;margin-right:4px;}
.module .mid .m_l,.module .mid .m_r{overflow:hidden;}
.module .mid .content{overflow:hidden;height:100%;clear:both;margin-right:8px;margin-left:8px;padding-top:8px;/*padding-bottom:10px;*/
}
.module .top,.module .top .t_l,.module .top .t_r,.module .bottom,.module .bottom .b_l,.module .bottom .b_r{background-image:url("images/green_skin.png");}
/*------ 主色 -------*/
.blue .top{background-position:0 -72px;background-repeat:repeat-x;height:70px;}
.blue .top .t_l{background-position:0 0;background-repeat:no-repeat;height:70px;width:5px;}
.blue .top .t_r{background-position:-6px 0;background-repeat:no-repeat;height:70px;width:5px;}
/* --------- 导航 ----------------*/
.w963{width:960px;}
#weibo{float:right;margin-top:9px;overflow:hidden;}
#siterss{float:right;height:40px;line-height:40px;}
#siterss a{height:40px;line-height:40px;color:#666;}
#navMenu{margin:0 0 0 15px;}
#navMenu .sprite-btn{background:url(images/btn.png) no-repeat;_background:url(images/btn.gif) no-repeat;background-position:53px 0;padding-right:9px;}
#navMenu dl{}
#navMenu dl dt{float:left;height:40px;line-height:40px;width:70px;}
#navMenu dl dt a{font-size:14px;color:#d3d3d3;text-decoration:none;display:block;text-align:center;font-weight:bold;}
#navMenu dl dt a:hover{color:#fff;background-color:#288fd0;}
#navMenu dl dt.hover,#navMenu dl dt.hover a{color:#fff;background:url(images/btn.png) no-repeat;_background:url(images/btn.gif) no-repeat;background-color:#288fd0;background-position:53px -24px;}
.newimg{position:absolute;top:5px;right:-5px;}
/*-------- 下拉菜单 --------------*/
#navMenu .dropMenu{position:absolute;top:40px;width:240px;background:#288fd0;z-index:1000;padding:12px 0 12px 20px;}
#navMenu dl dt .dropMenu{box-shadow:1px 2px 2px #999;}
#navMenu dl dt .dropMenu li{width:80px;height:25px;float:left;}
#navMenu dl dt .dropMenu li a{color:#fff;font-size:12px;font-weight:normal;background:none;text-align:left;height:25px;line-height:25px;}
#navMenu dl dt .dropMenu li a:hover{text-decoration:underline;}
* html .dropMenu a{width:100%;}
/*------ //搜索框 ---------*/
.search-keyword{width:832px;height:34px;padding-top:2px;padding-left:96px;border:0px;color:#a3a3a3;line-height:36px;font-size:14px;background-image:url(images/bg.png);background-repeat:repeat-x;background-position:0 -40px;}
.search-submit{cursor:pointer;width:45px;height:36px;font-size:0px;color:#fafafa;border:0px;background:url(images/btn.png) no-repeat 0 -80px;}
.search-option{margin-left:3px;margin-right:3px;border:#badaa1 solid 1px;height:22px;}
.searchbox .search{}
.searchbox .form h4{display:none;}
.searchbox .form{background:url(images/bg.png) 0 -78px repeat-x;height:46px;line-height:46px;}
.searchbox .form div{background:url(images/bg.png);background-repeat:no-repeat;}
.searchbox .form .form_left{background-position:0 -124px;height:46px;padding-left:5px;position:relative;}
.searchbox .form .form_left #searchtype{position:absolute;width:90px;background-image:none;height:46px;line-height:46px;}
.searchbox .form .form_left #searchtype #boult{position:absolute;right:0;color:#A3A3A3;font-size:14px;width:20px;background-position:0 -668px;cursor:pointer;}
.searchbox .form .form_left #searchtype #searchvalue{background-image:none;text-indent:6px;color:#A3A3A3;font-size:14px;position:absolute;left:0;width:70px;cursor:pointer;}
.searchbox .form .form_left #searchtype #valuelist{border:#D9D9D9 1px solid;border-top:0;width:88px;background:#fff;overflow:scroll;height:95px;overflow-x:hidden;padding:5px 0;z-index:1000;position:absolute;top:46px;left:0;}
.searchbox .form .form_left #searchtype #valuelist li{height:20px;line-height:20px;padding:0 5px;cursor:pointer;}
.searchbox .form .form_left #searchtype #valuelist li:hover{background:#92d7ff;color:#fff;}
.searchbox .form .form_right{background-position:right -170px;height:46px;padding-right:5px;}
.searchbox .form .hotwords{position:absolute;top:49px;z-index:999;background:#fff;width:986px;border:#D9D9D9 1px solid;border-top:0;margin-top:49px;}
.searchbox .form .hotwords li{display:block;width:966px;height:35px;line-height:35px;}
.searchbox .form .hotwords li.hwtitle{margin:0 10px;color:#666;border-bottom:#EFEFEF 1px solid;}
.searchbox .form .hotwords li a{width:966px;height:35px;line-height:35px;display:block;padding:0 10px;color:#198DD0;}
.searchbox .form .hotwords a h1{font-size:13px;height:35px;line-height:35px;float:left;font-weight:normal;}
.searchbox .form .hotwords a span{display:block;height:35px;line-height:35px;float:right;}
.searchbox .form .hotwords li.hwtitle:hover{background:#fff;color:#666;}
.searchbox .form .hotwords li:hover,.searchbox .form .hotwords li:hover a,.searchbox .form .hotwords li a:hover{text-decoration:none;background:#92d7ff;color:#fff;}
.searchbox input,.searchbox button{margin-top:-2px;*margin-top:0px;_margin-top:4px;}
.searchbox .tags{width:500px;overflow:hidden;}
.searchbox .tags h4{float:left;margin-right:6px;height:26px;font-size:12px;color:#777;}
.searchbox .tags li{float:left;margin-right:6px;}
.header .nav .end{}
/*-- //End 导航菜单 --*/
/*---------- frame:channel-nav ---------*/
.channel-nav{margin-top:8px;padding-left:6px;height:24px;width:950px;overflow:hidden;}
.channel-nav .sonnav{width:830px;line-height:26px;float:left;color:#256DB1;}
.channel-nav .sonnav span{margin-right:10px;float:left;}
.channel-nav .sonnav span a{padding:0 4px;border:1px solid #BADAA1;height:22px;line-height:21px;background:url(images/channel_bg.png) repeat-x;display:inline-block;}
.channel-nav .sonnav span a.thisclass{border:1px solid #3aa21b;}
.channel-nav .sonnav a{color:#428C5B;text-decoration:none;}
.channel-nav .sonnav a:hover{color:#287212;}
.channel-nav .back{display:block;height:22px;line-height:21px;padding-top:6px;padding-right:10px;padding-left:20px;letter-spacing:2px;float:right;background:url(images/ico-home.gif) 4px 10px no-repeat;}
.channel-nav .back a{color:#397CBE;}
.channel-nav .back a:hover{text-decoration:none;color:#777;}
/*pic scroll----------------------------------*/
.infiniteCarousel{width:700px;position:relative;margin-left:auto;margin-right:auto;}
.infiniteCarousel .wrapper{width:640px;overflow:auto;height:170px;margin:0 30px;top:0;}
.infiniteCarousel ul a img{border:1px solid #E3E3E3;padding:2px;width:143px;height:106px;display:block;}
.infiniteCarousel .wrapper ul{width:625px;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;top:0;}
.infiniteCarousel ul li{display:block;color:#6C6D61;float:left;padding:10px 6px;height:147px;width:147px;text-align:center;}
.infiniteCarousel ul li a,.infiniteCarousel ul li a:visited{color:#6C6D61;}
.infiniteCarousel .wrapper ul li a:hover{text-decoration:underline;}
.infiniteCarousel ul li a:hover img{border-color:#aaa;}
.infiniteCarousel ul li a span{display:block;line-height:17px;padding-top:6px;}
.infiniteCarousel .arrow{display:block;height:26px;width:26px;text-indent:-999px;position:absolute;top:70px;cursor:pointer;outline:0;}
.infiniteCarousel .forward{background:url(images/green_skin.png) 0 -256px no-repeat;right:0;}
.infiniteCarousel .back{background:url(images/green_skin.png) 0 -222px no-repeat;left:0;}
/*----------dedeinfolink ---------*/
#dedeinfolink{margin-bottom:6px;}
#dedeinfolink tr td div{padding:0 5px;background:url(images/white_bg.gif) repeat-x;margin-right:8px;}
#dedeinfolink tr td{line-height:18px;}
#dedeinfolink tr td.spline{font-size:1px;height:1px;line-height:1px;border-bottom:1px dashed #dedede;}
#dedeinfolink tr td.iftitle{font-weight:bold;color:#428C5B;line-height:24px;border-bottom:1px dashed #dedede;}
/*---------- frame:footer ---------*/
.footer2{margin:auto;color:#999;text-align:center;padding-bottom:10px;padding-top:10px;height:60px;border-top:1px solid #D9D9D9;}
.footer{margin:auto;color:#999;text-align:center;padding-bottom:10px;padding-top:30px;background:url(images/bg.png) 0 -364px;height:60px;}
.footer .link{text-align:center;padding:5px 0px;}
.footer .link a{margin:0px 5px;color:#666666;}
.footer .powered{font-size:10px;line-height:25px;}
.footer .powered strong{color:#690;}
.footer .powered strong span{color:#F93;}
.footer .copyright,.footer .copyright a{color:#a0a0a0;line-height:24px;height:24px;}
.footer .copyright a{text-decoration:none;}
.footer_left,.footer_left a{color:#a0a0a0;font-size:13px;line-height:24px;height:24px;}
.footer_left a:hover{color:#198DD0;}
/*new search result page----------------------------------------*/
.search_header{overflow:hidden;zoom:1;}
.search_header h1{float:left;display:inline;margin:5px 20px 5px 10px;width:216px;}
.search_header .search_box{float:left;padding-top:25px;}
.search_header .search_box input{border-width:1px;border-style:solid;border-color:#707070 #CECECE #CECECE #707070;padding:2px 4px;height:18px;line-height:18px;width:200px;margin-right:5px;}
.search_header .search_box select{font-size:14px;height:22px;margin-right:5px;}
.search_header .search_box button{margin-right:3px;}
.resultbar{height:32px;line-height:32px;color:#666;border-bottom:1px solid #D9D9D9;font-size:14px;}
.result_content{overflow:hidden;zoom:1;}
.sidebar{float:right;width:250px;word-wrap:break-word;}
.likewords{font-size:14px;font-weight:bold;color:#ff0000;}
.likewords a{font-size:14px;font-weight:normal;text-decoration:underline;color:#666;line-height:20px;}
.resultlist{overflow:hidden;width:728px;}
.resultlist ul{padding:20px 0 0 20px;}
.resultlist ul li{padding-top:15px;}
.resultlist ul li h3{line-height:30px;font-size:16px;font-weight:normal;}
.resultlist ul li h3 a{text-decoration:underline;}
.resultlist ul li p{line-height:22px;color:#333;font-size:14px;width:650px;}
.resultlist ul li span small{line-height:22px;font-size:12px;margin-left:5px;color:#999;}
.resultlist ul li span a{color:#008400;}
/*素材列表样式*/
.sclist .hotsite a{text-indent:0;}
.sclist .hotsite b{font-weight:normal;cursor:pointer;}
.sclist dt{color:#4d4d4d;border-bottom:1px solid #d9d9d9;height:29px;font-size:13px;font-weight:bold;line-height:29px;padding-top:5px;background:url(images/bg.png) 0px -303px no-repeat;text-indent:15px;}
.sclist dt a{color:#4d4d4d;}
.sclist dd ul li{height:26px;line-height:26px;margin:3px 0;}
.sclist dd ul li a{color:#4d4d4d;font-size:13px;display:block;text-indent:5px;width:250px;height:26px;line-height:26px;}
.sclist dd ul li a b{float:left;}
.sclist dd ul li a span{font:Arial,Helvetica,sans-serif;font-size:10px;font-weight:normal;display:block;float:right;padding-right:5px;color:#4D4D4D;}
.sclist dd ul li a:hover,.sclist dd ul li:hover,.sclist dd ul li:hover a,.sclist dd ul li:hover a span,.sclist dd ul li a:hover span{background:url(images/bg.png) 0 -243px repeat-x;color:#fff;text-decoration:none;}
/*广告样式*/
.bannerbox{height:320px;}
.bannerbox .banner{width:550px;height:320px;float:left;overflow:hidden;position:relative;}
.w200_h200{height:200px;width:200px;}
.w250_h250{height:250px;width:250px;}
.w250_h90{height:90px;width:250px;}
}
.w728_h90{height:90px;width:728px;}
.w168_h100{height:100px;width:168px;}
.w468_h60{height:60px;width:468px;}
.w160_h600{height:600px;width:160px;}
.w336_h280{height:280px;width:336px;}
.marginauto{margin-left:auto;margin-right:auto;}
/*公告*/
.bannerbox .newlist{width:168px;height:320px;float:right;}
.bannerbox .newlist dt{background:url(images/bg.png) repeat-x 0 -269px;height:34px;line-height:34px;color:#666;font-size:13px;font-weight:bold;text-indent:10px;}
.bannerbox .newlist dt a{color:#666;}
.bannerbox .newlist dd ul{padding:10px 5px 0 5px;height:176px;overflow:hidden;}
.bannerbox .newlist dd ul li{margin-bottom:5px;border-bottom:#e4e4e4 1px dashed;padding-bottom:5px;}
.bannerbox .newlist dd ul li span{font-size:11px;font:Arial;color:#ababab;}
.bannerbox .newlist dd ul li a{color:#666;text-decoration:5px;}
/*列表样式*/
#imglist{position:relative;color:#666;}
.imgstyle{width:172px;margin-left:10px;margin-top:10px;font-size:12px;line-height:18px;overflow:hidden;}
.imgstyle a,.imgstyle span{color:#198dd0;padding-right:3px;text-decoration:none;}
.imgstyle span{padding-left:3px;}
.imgstyle h4{height:22px;line-height:22px;margin:0;padding:0}
.imgstyle h4 a{color:#f09122;font-size:12px;white-space:nowrap;}
.imgstyle p{margin:0;padding:0;text-align:right;padding-right:5px;height:20px;}
.imgstyle h5{font-size:12px;font-weight:normal;white-space:nowrap;text-overflow:clip;}
/*网址导航*/
.website{padding:10px;padding-bottom:10px;}
.website:after{}
.website .weblist{margin-bottom:10px;border-bottom:1px dashed #D9D9D9;padding-bottom:6px;}
.website h1{background:url(images/bg.png) no-repeat 0 -344px;width:68px;height:20px;line-height:20px;font-size:12px;font-weight:normal;text-align:center;color:#fff;padding-right:12px;float:left;}
.website p{white-space:nowrap;width:626px;float:left;clear:right;}
.website div.nobor{border:0;}
.website p a{color:#4D4D4D;width:79px;margin-bottom:4px;height:20px;text-align:left;line-height:20px;overflow:hidden;float:left;margin-right:10px;}
.website p a:hover{color:#198DD0;text-decoration:none;}
.clearfloat{clear:both;}
/*关键字排行榜*/
.hotword a h1{font-weight:normal;font-size:12px;float:left;cursor:pointer;}
/*列表页下级分类*/
.listtype{border-bottom:#D9D9D9 1px solid;padding-bottom:10px;}
.listtype a{color:#666;margin-right:10px;line-height:20px;}
.typeattr{height:27px;}
.typeattr a{height:27px;display:block;font-size:13px;font-weight:bold;color:#a0a0a0;float:left;clear:right;line-height:27px;margin-right:10px;padding-left:10px;}
.typeattr a span{display:block;padding-right:10px;height:27px;cursor:pointer;_width:65px;text-align:center;}
.typeattr a.hover span,.typeattr a:hover span{background:url(images/bg.png) right -491px no-repeat;}
.typeattr a.hover,.typeattr a:hover{background:url(images/bg.png) 0 -464px;color:#fff;}
.nobb{border-bottom:0;}
.nopb{padding-bottom:0;}
.bbline{border-bottom:1px solid #D9D9D9;}
.pbottom{padding-bottom:10px;}
/*提交收录按钮*/
.upsite,.bgtop,.bgbottom,.sub,.sp,.upcon,.bgbottom{background:url(images/bg.png) repeat-y;overflow:hidden;}
.upsite{background-position:0 -893px;}
.bgtop{background-position:0 -800px;height:11px;width:250px;}
.bgbottom{background-position:0 -789px;height:11px;width:250px;}
.sub{background-position:0 -811px;width:228px;height:66px;margin:0 auto}
.sub a{width:228px;height:66px;display:block;}
.upsite h1{color:#dff3ff;font-size:14px;width:228px;margin:10px auto;}
.sp{background-position:0 -877px;height:1px;width:250px;}
.upcon{background-position:0 -878px;color:#dff3ff;line-height:18px;width:228px;margin:10px auto;text-indent:18px;}
.upcon a{color:#dff3ff;text-decoration:underline;}
.rcopy{text-align:right;background:none;text-decoration:underline;cursor:pointer;margin-bottom:0;}
.sitetype{height:35px;line-height:35px;overflow:hidden;background-position:0 -1405px;background:url(images/bg.png);overflow:hidden;}
.sitetype a{color:#dff3ff;margin-left:5px;padding:0 10px;height:35px;display:block;float:left;}
.sitetype a:hover,.sitetype a.ontype{background:#8bd2ff;color:#dff3ff;}
.flink{line-height:18px;}
.flink strong{color:#666;}