jquery百度新首页网址导航js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery百度新首页网址导航js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>jquery百度新首页网址导航</title>
	<link rel="stylesheet" href="css/common.css"/>
	<script src="js/jquery.min.js"></script>
</head>
<body>
	<div id="wrapper">
		<div class="skinBg" style="background-image: url('images/65.jpg');"></div>
		<header id="header">
			<div class="weather fl">
				<span class="cityW">
					<span>苏州：</span>
					<span>
						<span class="weatherIcon wI1"></span>
						<span>35 ~ 24℃</span>
					</span>
				</span>
				<span class="sp">|</span>
				<span class="pollution">
					<span>空气质量：83</span>
					<span class="polutionLevel">良</span>
				</span>
				<div class="cityWeather">
					
				</div>
			</div>
			<nav class="headNavs fr tr">
				<a href="#"><span class="s-icon s-icon-treasure"></span><span>宝箱</span></a>
				<a href="#"><span class="s-icon s-icon-skin"></span><span>换肤</span></a>
				<a href="#"><span class="s-icon s-icon-msg"></span><span>消息</span></a>
				<a><span class="s-icon s-icon-line"></span></a>
				<a href="#"><span>设为首页</span></a>
				<a href="javascript:;" class="uname"><span>审美网</span><span class="user-arrow"></span></a>
				<div class="topMenus dn">
					<span class="arrowTop"></span>
					<a href="#">个人中心</a>
					<a href="#">帐号设置</a>
					<a href="#">搜索设置</a>
					<a href="#">意见反馈</a>
					<a href="#">首页教程</a>
					<a href="#">安全退出</a>
				</div>
			</nav>
		</header>
		<div class="content tc">
			<p class="logo"><img width="270" height="129" src="images/logo_white.png" alt="logo" /></p>
			<nav class="mainNavs">
				<a href="#">新闻</a>
				<a href="#">网页</a>
				<a href="#">贴吧</a>
				<a href="#">知道</a>
				<a href="#">音乐</a>
				<a href="#">图片</a>
				<a href="#">视频</a>
				<a href="#">地图</a>
				<a href="#">百科</a>
				<a href="#">文库</a>
				<a href="#">更多&gt;&gt;</a>
			</nav>
			<div class="searchBox">
				<form action="">
					<input type="text" class="searchIpt f14" name="wd" maxlength="100" autocomplete="off"/>
					<input type="submit" class="btn cp" value="百度一下" />
				</form>
			</div>
			<div class="mainContents oh">
				<div class="menusWrapper fl">
					<a class="active" href="javascript:;">导航</a>
					<a href="javascript:;">新闻</a>
					<a href="javascript:;">世界杯</a>
					<a href="javascript:;">音乐</a>
					<a href="javascript:;">团购</a>
				</div>
				<div class="ctnerWrapper">
					<div class="ctnerBox">
						<div id="cbox-1" class="cbox tl dn">
							<div class="ctnerTab pr tc">
								<a href="#">我的导航</a> <a href="#" class="on">推荐导航</a>
							</div>
							<div class="myNavs rtNavs dn pt15">
								<div class="navTitle fl">我的导航</div>
								<div class="navArea oh">
									<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/101.png" alt="" /></a>
								</div>
							</div>
							<div class="hotNavs rtNavs dn oh pt15">
								<div class="navTitle fl">热门网址</div>
								<div class="navArea oh">
									<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/101.png" alt="" /></a>
									<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/102.png" alt="" /></a>
									<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/103.png" alt="" /></a>
									<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/104.png" alt="" /></a>
									<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/20.png" alt="" /></a>
									<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/106.png" alt="" /></a>
									<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/107.png" alt="" /></a>
									<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/108.png" alt="" /></a>
									<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/109.png" alt="" /></a>
									<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/110.png" alt="" /></a>
									<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/111.png" alt="" /></a>
									<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/112.png" alt="" /></a>
									<a href="#" target="_blank" title="淘宝网"><img width="115" height="70" src="images/113.png" alt="" /></a>
									<a href="#" target="_blank" title="京东商城"><img width="115" height="70" src="images/114.png" alt="" /></a>
									<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/115.png" alt="" /></a>
									<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/116.png" alt="" /></a>
									<a href="#" target="_blank" title="铁路客户服务中心"><img width="115" height="70" src="images/12.png" alt="" /></a>
									<a href="#" target="_blank" title="4399小游戏"><img width="115" height="70" src="images/117.png" alt="" /></a>
								</div>
							</div>
						</div>
						<div id="cbox-2" class="cbox tl dn">
							<div class="newsBox oh">
								<div class="sliderBox fl">
									<div class="slider">
										<a href="#" target="_blank" class="picLink active">
											<img width="425" height="260" src="images/news1.jpg" alt="" />
											<span href="#" target="_blank" class="picTitle">哈尔滨江边出现涉黄服务"老头乐"</span>
										</a>
										<a href="#" target="_blank" class="picLink">
											<img width="425" height="260" src="images/news2.jpg" alt="" />
											<span href="#" target="_blank" class="picTitle">新闻标题2</span>
										</a>
										<a href="#" target="_blank" class="picLink">
											<img width="425" height="260" src="images/news3.jpg" alt="" />
											<span href="#" target="_blank" class="picTitle">新闻标题3</span>
										</a>
										<a href="#" target="_blank" class="picLink">
											<img width="425" height="260" src="images/news4.jpg" alt="" />
											<span href="#" target="_blank" class="picTitle">新闻标题4</span>
										</a>
										<a href="#" target="_blank" class="picLink">
											<img width="425" height="260" src="images/news5.jpg" alt="" />
											<span href="#" target="_blank" class="picTitle">新闻标题5</span>
										</a>
									</div>
									<div class="smallPics">
										<a class="active"><img width="68" height="40" src="images/news1.jpg" alt="" /></a>
										<a><img width="68" height="40" src="images/news2.jpg" alt="" /></a>
										<a><img width="68" height="40" src="images/news3.jpg" alt="" /></a>
										<a><img width="68" height="40" src="images/news4.jpg" alt="" /></a>
										<a><img width="68" height="40" src="images/news5.jpg" alt="" /></a>
									</div>
								</div>
								<div class="topic">
									<div class="topicTop">
										<span class="titleWords titleT on"><a href="javascript:;">搜索风云榜</a></span>
										<span class="titleTopic titleT"><a href="javascript:;">热门话题</a></span>
										<a class="changeWords" href="javascript:;">换一换</a>
									</div>
									<div class="topicList">
										<div class="wBox topicB dn">
											<ul>
												<li><a target="_blank" href="#">男子入教当卧底救妻</a></li>
												<li><a target="_blank" href="#">广西无人海岛售14...</a></li>
												<li><a target="_blank" href="#">北京大雨</a></li>
												<li><a target="_blank" href="#">世界杯星太太团</a></li>
												<li><a target="_blank" href="#">13岁印度女孩登顶珠...</a></li>
												<li><a target="_blank" href="#">dnf职业联赛半决赛</a></li>
												<li><a target="_blank" href="#">疑似mh370坠毁噪音</a></li>
												<li><a target="_blank" href="#">李保田儿子</a></li>
												<li><a target="_blank" href="#">6城试点共有产权房</a></li>
												<li><a target="_blank" href="#">陕西推土机毁燕子窝</a></li>
												<li><a target="_blank" href="#">老师住深山出高考题</a></li>
												<li><a target="_blank" href="#">越方冲撞中方船只1200次</a></li>
												<li><a target="_blank" href="#">星空日记</a></li>
												<li><a target="_blank" href="#">肉饼店老板因相貌引围观...</a></li>
												<li><a target="_blank" href="#">高圆圆结婚</a></li>
												<li><a target="_blank" href="#">诺曼底登陆</a></li>
											</ul>
										</div>
										<div class="tBox topicB dn">
											<ul>
												<li><a target="_blank" href="#">话题11111</a></li>
												<li><a target="_blank" href="#">话题22222</a></li>
												<li><a target="_blank" href="#">话题33333</a></li>
												<li><a target="_blank" href="#">话题44444</a></li>
												<li><a target="_blank" href="#">话题55555</a></li>
												<li><a target="_blank" href="#">话题66666</a></li>
												<li><a target="_blank" href="#">话题77777</a></li>
												<li><a target="_blank" href="#">话题88888</a></li>
												<li><a target="_blank" href="#">话题99999</a></li>
												<li><a target="_blank" href="#">话题11111</a></li>
												<li><a target="_blank" href="#">话题22222</a></li>
												<li><a target="_blank" href="#">话题33333</a></li>
												<li><a target="_blank" href="#">话题44444</a></li>
												<li><a target="_blank" href="#">话题55555</a></li>
												<li><a target="_blank" href="#">话题66666</a></li>
												<li><a target="_blank" href="#">话题77777</a></li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div id="cbox-3" class="cbox tl dn">
							<p class="pt15 tc f14">4，其他这几个 这里就忽略掉了！意思意思算了...</p>
						</div>
						<div id="cbox-4" class="cbox tl dn">
							<p class="pt15 tc f14">5，其他这几个这里就忽略掉了！意思意思算了...</p>
						</div>
						<div id="cbox-5" class="cbox tl dn">
							<p class="pt15 tc f14">6，其他这几个这里就忽略掉了！意思意思算了...</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<footer id="footer" class="tc">©2014 Baidu 使用百度前必读 京ICP证030173号</footer>
	</div>
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.autocomplete.min.js"></script>
	<script>
		$('.uname,.topMenus').hover(function(){
			$('.topMenus').stop(true,true).fadeIn(200);
		},function(){
			$('.topMenus').stop(true,true).delay(500).fadeOut(200);
		});
		
		//搜索框自动补全; 
		$('.searchIpt').AutoComplete({
            'data': ['About Me', '审美网', 'abcdefg', 'One', 'Two', 'Three', 'Four', 'Five', 'Six','smwell.com', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve'],
            'itemHeight': 24,
            'width': 529
        }).AutoComplete('show');
            
		$('.ctnerTab a').click(function(){
			if(!$(this).hasClass('on')){
				$('.ctnerTab a').removeClass('on').eq($(this).index()).addClass('on');
				$('.rtNavs').stop(true,true).hide(200).eq($(this).index()).show(300);
			}
		});
		
		$('.menusWrapper a').click(function(){
			if(!$(this).hasClass('active')){
				$('.menusWrapper a').removeClass('active').eq($(this).index()).addClass('active');
				$('.cbox').stop(true,true).animate({top:318},100).hide().eq($(this).index()).animate({top:0},400).show();
			}
		});
		
		$('.smallPics a').click(function(){
			if(!$(this).hasClass('active')){
				$('.smallPics a').removeClass('active').eq($(this).index()).addClass('active');
				$('.picLink').stop(true,true).removeClass('active').eq($(this).index()).addClass('active');
			}
		});
				
		$('.titleT').hover(function(){
			if(!$(this).hasClass('on')){
				$('.titleT').removeClass('on').eq($(this).index()).addClass('on');
				$('.topicB').stop(true,true).hide().eq($(this).index()).show();
			}
		});
	</script>
</body>
</html>

JS代码(jquery.autocomplete.min.js):

/** jQuery.autocomplete.js (v1.1.2)* authored by nswish (nswish@gmail.com)* jQuery 1.7.1+ support* compatible:ie/chrome/firefox/opera/safari** Licensed under the Apache License,Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing,software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/
(function(g){
	g.fn.extend({
	"AutoComplete":function(q){
	return this.each(function(){
	if(!(this&&this.tagName==="INPUT"&&this.type==="text")){
	return}
if(this.controller){
	this.controller.setOption(q)}
else{
	if(g.isPlainObject(q)){
	this.controller=new f(this,q)}
}
}
)}
}
);
	var f=function(q,r){
	this.option=g.extend(false,{
	"width":320,"maxHeight":null,"itemHeight":null,"listStyle":"normal","listDirection":"down","data":[],"ajaxDataType":"json","ajaxParams":{
}
,"ajaxTimeout":3000,"ajaxType":"GET","maxItems":20,"matchHandler":n,"emphasisHandler":m,"createItemHandler":null,"beforeLoadDataHandler":null,"afterSelectedHandler":null,"async":false,"emphasis":true,"onerror":null}
,r);
	b.apply(this,[q]);
	j.apply(this)}
;
	var b=function(q){
	var r=this;
	this.inputView=g(q);
	this.inputView.attr("autocomplete","off").keyup(this._keyup=function(s){
	switch(s.keyCode){
	case 13:case 16:case 17:case 37:case 38:case 39:case 40:break;
	case 27:e.apply(r);
	break;
	default:if(r.option.async){
	setTimeout(function(){
	h.apply(r)}
,0)}
else{
	h.apply(r)}
}
}
).keydown(this._keydown=function(t){
	switch(t.keyCode){
	case 38:p.apply(r,["up"]);
	break;
	case 40:p.apply(r,["down"]);
	break;
	case 13:var s=r.searchView.is(":visible");
	c.apply(r);
	if(s){
	return false}
break}
}
).blur(this._blur=function(){
	g(document).one("click",function(){
	e.apply(r)}
)}
)}
;
	var j=function(){
	var q=this;
	this.searchView=g("<div class='ac'><ul></ul></div>").appendTo(document.body).on("mouseenter","li",function(){
	q.searchView.find("li.selected").removeClass("selected");
	g(this).addClass("selected")}
).on("mouseleave","li",function(){
	g(this).removeClass("selected")}
).on("click","li",function(){
	c.apply(q);
	e.apply(q)}
).css("font-size",this.inputView.css("font-size"));
	g(window).resize(function(){
	k.apply(q)}
)}
;
	var i=function(q){
	var s=this,r=this.searchView.find("ul").empty();
	if(g.inArray(this.option.listStyle,["normal","iconList","custom"])==-1){
	throw ["遇到未知的listStyle参数！"]}
g.each(q,function(u,w){
	var v=g("<li><div></div></li>").appendTo(r).addClass(s.option.listStyle).data("data",w).find("div");
	switch(s.option.listStyle){
	case"normal":v.append("<span>"+w.label+"</span>");
	break;
	case"iconList":var t=g("<img></img>").attr("src",w.image);
	v.append(g("<div></div>").append(t)).append("<span>"+w.label+"</span>");
	break;
	case"custom":v.append(s.option.createItemHandler.apply(s,[u,w]));
	case"default":break}
if(s.option.itemHeight>0){
	v.height(s.option.itemHeight).css("max-height",s.option.itemHeight)}
}
)}
;
	var k=function(){
	if(this.option.listDirection==="down"){
	var r=this.inputView.offset().top+this.inputView.outerHeight()}
else{
	if(this.option.listDirection==="up"){
	var r=this.inputView.offset().top-this.searchView.outerHeight()}
else{
	throw"遇到未知的listDirection参数！"}
}
var q=this.inputView.offset().left;
	this.searchView.css("top",r+"px").css("left",q+"px")}
;
	var d=function(){
	if(typeof(this.option.width)==="string"&&this.option.width.toLowerCase()==="auto"){
	return this.inputView.outerWidth()-2}
else{
	if(typeof(this.option.width)==="number"){
	return this.option.width}
else{
	throw"遇到未知的width参数！"}
}
}
;
	var l=function(q){
	var s=this;
	if(this.option.listDirection==="up"){
	q=q.reverse()}
try{
	i.apply(s,[q]);
	if(this.option.maxHeight>0){
	this.searchView.css("max-height",this.option.maxHeight+"px");
	if(g.browser.msie){
	this.searchView.css("height",this.searchView.height()>this.option.maxHeight?this.option.maxHeight+"px":"auto")}
}
k.apply(this);
	this.searchView.css("width",d.apply(this)+"px")}
catch(r){
	o.apply(this,[r+""]);
	return}
this.searchView.show();
	p.apply(this,[this.option.listDirection])}
;
	var e=function(){
	this.searchView.find("ul").empty();
	this.searchView.hide()}
;
	var p=function(s){
	var t=this.searchView.find("li.selected");
	if(t.size()){
	var q=s==="up"?t.prev():t.next()}
else{
	var q=s==="up"?this.searchView.find("li").last():this.searchView.find("li").first()}
if(q.size()){
	this.searchView.find("li").removeClass("selected");
	q.addClass("selected");
	var u=q.outerHeight();
	var r=q.position().top;
	if(u+r>this.searchView.height()){
	this.searchView.scrollTop(this.searchView.scrollTop()+r+u-this.searchView.height())}
else{
	if(r<0){
	this.searchView.scrollTop(this.searchView.scrollTop()+r)}
}
}
}
;
	var c=function(){
	var r=this,q=this.searchView.find("li.selected");
	if(q.size()){
	var s=q.data("data");
	this.inputView.val(s.value);
	if(g.isFunction(this.option.afterSelectedHandler)){
	try{
	this.option.afterSelectedHandler.apply(r,[s])}
catch(t){
	o.apply(this,["调用afterSelectedHandler错误:"+t]);
	return}
}
e.apply(this)}
}
;
	var a=function(q){
	jQuery.support.cors=true;
	var s=this,t=[],r={
	"async":false,"dataType":s.option.ajaxDataType,"type":s.option.ajaxType,"timeout":this.option.ajaxTimeout,"success":function(u,w,v){
	if(s.option.ajaxDataType==="xml"){
	g(u).find("item").each(function(){
	var z={
	"value":g(this).text(),"label":g(this).text()}
;
	for(var y=0;
	y<this.attributes.length;
	y++){
	var x=this.attributes[y].nodeName,A=this.attributes[y].nodeValue;
	z[x]=A}
t.push(z)}
)}
else{
	if(s.option.ajaxDataType==="json"){
	t=u}
else{
	throw"遇到未知的ajaxDataType参数！"}
}
}
,"error":function(u,w,v){
	throw v}
}
;
	if(g.isPlainObject(this.option.ajaxParams)){
	r["data"]=g.extend(false,{
	"keyword":q}
,this.option.ajaxParams)}
else{
	if(g.isFunction(this.option.ajaxParams)){
	r["data"]=g.extend(false,{
	"keyword":q}
,this.option.ajaxParams.apply(this,[q]))}
else{
	if(typeof(this.option.ajaxParams)==="string"){
	r["data"]="keyword="+q+"&"+this.option.ajaxParams}
else{
	throw"遇到未知的ajaxParams参数！"}
}
}
g.ajax(this.option.data,r);
	return t}
;
	var h=function(){
	var t=this,s=this.inputView.val(),u=[],r=true,q=[];
	if(g.trim(s).length==0){
	e.apply(t);
	return}
if(g.isFunction(this.option.beforeLoadDataHandler)){
	try{
	r=this.option.beforeLoadDataHandler.apply(this,[s])}
catch(v){
	o.apply(this,["调用beforeLoadDataHandler错误:"+v]);
	return}
}
if(r){
	if(g.isArray(this.option.data)){
	u=this.option.data}
else{
	if(g.isFunction(this.option.data)){
	try{
	u=this.option.data.apply(this,[s])}
catch(v){
	o.apply(this,["调用data错误:"+v]);
	return}
}
else{
	if(typeof(this.option.data)==="string"){
	try{
	u=a.apply(this,[s])}
catch(v){
	o.apply(this,["Ajax错误:"+v]);
	return}
}
else{
	o.apply(this,["遇到未知的data参数！"]);
	return}
}
}
}
g.each(u,function(w,y){
	if(t.option.maxItems>0&&q.length>=t.option.maxItems){
	return false}
if(g.isPlainObject(y)){
	var x=g.extend(false,{
}
,y)}
else{
	if(typeof(y)==="string"){
	var x={
	"label":y,"value":y,"image":y}
}
else{
	o.apply(t,["数据源Item类型错误！"]);
	return false}
}
if(t.option.matchHandler.apply(t,[s,x])){
	q.push(x)}
}
);
	if(s==this.inputView.val()){
	if(q.length>0){
	l.apply(this,[q])}
else{
	e.apply(this)}
}
}
;
	var o=function(q){
	if(g.isFunction(this.option.onerror)){
	this.option.onerror.apply(this,[q])}
}
;
	f.prototype.setOption=function(q){
	if(g.isPlainObject(q)){
	this.option=g.extend(false,this.option,q)}
else{
	if(typeof(q)==="string"){
	switch(q){
	case"destroy":this.destroy();
	break;
	case"show":this.show();
	break;
	default:o.apply(this,["未知的AutoComplete参数！"]);
	return}
}
else{
	o.apply(this,["未知的AutoComplete参数类型！"]);
	return}
}
}
;
	f.prototype.destroy=function(){
	this.searchView.remove();
	this.inputView.unbind("keyup",this._keyup).unbind("keydown",this._keydown).unbind("blur",this._blur);
	delete this.inputView.get(0).controller}
;
	f.prototype.show=function(){
	if(this.option.async){
	setTimeout(function(){
	h.apply(this)}
,0)}
else{
	h.apply(this)}
}
;
	var n=function(q,s){
	var r=RegExp(q.replace(/([.?*+^$[\]\\(){
}
|-])/g,"\\$1"),"i");
	if(this.option.emphasis&&g.isFunction(this.option.emphasisHandler)){
	this.option.emphasisHandler.apply(this,[q,s])}
return r.test(s.value)}
;
	var m=function(q,s){
	var r=RegExp("("+q.replace(/([.?*+^$[\]\\(){
}
|-])/g,"\\$1")+")","ig");
	s.label=s.label.replace(r,"<em>$1</em>")}
}
)(jQuery);

CSS代码(common.css):

@CHARSET "UTF-8";/* * @Description:common css * @author:haibao * @Update:2014-6-6 */
body{font:12px/140% "Microsoft Yahei","微软雅黑",'Arial','san-serif';background-color:#666666;color:#666;margin:0;padding:0;}
img{max-width:100%;height:auto;width:auto9;-ms-interpolation-mode:bicubic;vertical-align:middle;-moz-animation:fadein 350ms ease-out;-webkit-animation:fadein 350ms ease-out;-o-animation:fadein 350ms ease-out;animation:fadein 350ms ease-out;}
a,span,footer{color:#fff;}
p{margin:0;}
ul{margin:0;padding:0;}
li{list-style:none;}
a:focus{outline:none;}
/* animation */
@-webkit-keyframes fadein{from{opacity:0;}
to{opacity:1;}
}
@-moz-keyframes fadein{from{opacity:0;}
to{opacity:1;}
}
@-o-keyframes fadein{from{opacity:0;}
to{opacity:1;}
}
@keyframes fadein{from{opacity:0;}
to{opacity:1;}
}
/* ----------------------------------------------- */
/* 自定义样式 */
.fl{float:left;}
.fr{float:right;}
.oh{overflow:hidden;}
.tc{text-align:center;}
.tr{text-align:right;}
.tl{text-align:left;}
.dn{display:none;}
.db{display:block;}
.dib{display:inline-block;}
.cp{cursor:pointer;}
.f14{font-size:14px;}
.pt15{padding-top:15px;}
/* ----------------------------------------------- */
.skinBg{width:100%;height:100%;position:absolute;left:0;top:0;z-index:-10;background-position:center 0;background-size:cover;background-attachment:fixed;background-repeat:no-repeat;}
#header{padding:14px 14px 0;overflow:hidden;}
#header span{color:#fff;text-shadow:0 0 3px #333;float:left;line-height:20px;}
.weatherIcon{width:18px;height:18px;display:inline-block;vertical-align:middle;margin-right:5px;}
.wI1{background:url('../images/a1.png');}
#header span.polutionLevel{color:#4CC74C;font-weight:700;margin-left:2px;}
.sp{padding:0 5px;}
.headNavs{width:800px;}
.headNavs a{padding-right:5px;text-decoration:none;display:inline-block;}
.headNavs a:hover span{text-decoration:underline;}
.topMenus{padding-top:6px;position:absolute;right:20px;top:33px;width:90px;z-index:999;}
.topMenus a{background-color:#FFFFFF;color:#0079F5;display:block;height:25px;line-height:25px;padding-left:6px;text-align:center;text-decoration:none;}
.topMenus a:hover{background-color:#f1f8ff;}
.arrowTop{position:absolute;top:-5px;right:20px;width:0;height:0;border-width:6px;border-style:dashed dashed solid dashed;border-color:transparent transparent #ffffff transparent;}
.s-icon{background:url('../images/spis4.png') no-repeat;cursor:pointer;width:20px;height:20px;display:inline-block;margin-right:3px;}
.s-icon-treasure{background-position:-12px -577px;}
.s-icon-skin{background-position:-42px -577px;}
.s-icon-msg{background-position:-228px -574px;}
.s-icon-line{background-position:-104px -577px;width:4px;}
.user-arrow{background:url('../images/spis4.png') no-repeat -707px -588px;width:10px;height:10px;margin:7px 0 0 4px;display:inline-block;}
.content{padding:0 0 30px;width:910px;margin:-10px auto auto;}
.mainNavs{margin:5px auto;width:620px;text-align:left;}
.mainNavs a{font-size:14px;margin-left:12px;}
.logo img{margin:0 0 -15px;}
.searchIpt{width:515px;font-family:"微软雅黑";border:0 none;box-shadow:1px 1px 3px rgba(0,0,0,0.25);-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.25);height:20px;line-height:20px;padding:10px 9px 10px 7px;margin-right:3px;}
.btn{background:#DDDDDD;background:-moz-linear-gradient(top,#ffffff,#dddddd);background:-webkit-linear-gradient(top,#ffffff,#dddddd);background:linear-gradient:(top,#ffffff,#dddddd);border:0 none;font-size:16px;font-family:"微软雅黑";height:40px;line-height:40px;padding:0;width:105px;box-shadow:1px 1px 3px rgba(0,0,0,0.35);-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.35);}
.mainContents{width:910px;margin:80px auto auto;}
.menusWrapper{width:80px;height:318px;position:relative;background-color:rgba(0,0,0,0.2);}
.menusWrapper a{width:80px;height:35px;line-height:35px;display:block;text-shadow:0 0 5px #000000;text-decoration:none;font-size:14px;}
.menusWrapper a.active{background:url(../images/menuBg.png) no-repeat;}
.menusWrapper a:hover{background-color:#000000;opacity:0.8;filter:alpha(opacity=80);}
.ctnerWrapper{margin-left:100px;min-height:318px;height:auto!important;height:318px;background:linear-gradient(rgba(255,255,255,0.7) 0px,rgba(255,255,255,0.7) 100%) repeat;background:-moz-linear-gradient(rgba(255,255,255,0.7) 0px,rgba(255,255,255,0.7) 100%) repeat;background:-webkit-linear-gradient(rgba(255,255,255,0.7) 0px,rgba(255,255,255,0.7) 100%) repeat;background:-o-linear-gradient(rgba(255,255,255,0.7) 0px,rgba(255,255,255,0.7) 100%) repeat;}
.ctnerTab{border-bottom:1px solid #E8E8E8;height:44px;line-height:44px;}
.ctnerTab a{text-decoration:none;font-size:14px;color:#222;width:86px;height:44px;line-height:44px;display:inline-block;}
.ctnerTab a.on{border-bottom:2px solid #42A0FE;font-weight:700;}
.ctnerBox{height:258px;}
.cbox{position:relative;top:0;width:811px;}
#cbox-1{display:block;}
.hotNavs{width:100%;display:block;}
.navTitle{color:#999999;height:81px;line-height:16px;padding:4px 7px 0 20px;text-align:left;width:20px;}
.navArea{margin-left:50px;}
.navArea a{width:114px;height:69px;float:left;display:inline-block;border:2px solid rgba(248,248,248,0.7);margin:0 8px 12px 0;background:#f8f8f8;background:linear-gradient(rgba(248,248,248,0.7) 0px,rgba(248,248,248,0.7) 100%) repeat;background:-moz-linear-gradient(rgba(248,248,248,0.7) 0px,rgba(248,248,248,0.7) 100%) repeat;background:-webkit-linear-gradient(rgba(248,248,248,0.7) 0px,rgba(248,248,248,0.7) 100%) repeat;background:-o-linear-gradient(rgba(248,248,248,0.7) 0px,rgba(248,248,248,0.7) 100%) repeat;}
.navArea a:hover{border:2px solid #42A0FE;}
.sliderBox{width:425px;}
.picLink{display:none;width:425px;height:260px;position:relative;}
.picLink.active{display:block;}
.picTitle{width:100%;padding:4px 0;height:18px;line-height:18px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:14px;text-indent:14px;position:absolute;bottom:0;left:0;background-color:#000000;opacity:0.4;filter:alpha(opacity=40);}
.smallPics{background-color:#191919;padding:8px 0 0 15px;height:50px;overflow:hidden;position:relative;white-space:nowrap;}
.smallPics a{width:78px;cursor:pointer;transition:opacity 500ms ease 0s;-webkit-transition:opacity 500ms ease 0s;-moz-transition:opacity 500ms ease 0s;opacity:0.5;filter:alpha(opacity=50);text-align:left;position:relative;display:inline-block;}
.smallPics a:hover,.smallPics a.active{opacity:1;filter:alpha(opacity=100);}
.smallPics a.active img{border:1px solid #389CFF;}
.topic{margin-left:445px;padding-top:20px;}
.topicTop{border-bottom:1px solid #389CFF;height:28px;line-height:28px;position:relative;}
.titleT{background-color:rgba(0,0,0,0);color:#222;width:100px;text-align:center;height:28px;cursor:pointer;font-size:14px;display:inline-block;}
.titleT a{color:#222;}
.titleT.on{background-color:#389CFF;}
.titleT.on a{color:#fff;}
.titleWords a,.titleTopic a{text-decoration:none;}
.changeWords{color:#222;position:absolute;right:22px;text-decoration:none;}
.topicList{height:240px;padding-top:10px;width:349px;}
.topicList li{list-style:square inside;font-size:6px;float:left;height:30px;line-height:30px;margin-right:4px;text-overflow:ellipsis;white-space:nowrap;width:170px;}
.topicList li a{font-size:14px;color:#222;text-decoration:none;}
.topicList li a:hover{color:#389CFF;text-decoration:underline;}
.wBox{display:block;}
/* autocomplete */
div.ac{border:1px solid #ccc;position:absolute;display:none;overflow:auto;background-color:#ffffff;}
div.ac > ul > li{word-break:break-all;}
div.ac > ul > li > div{display:table-row;width:100%;}
div.ac > ul > li > div em{color:#333;font-style:normal;}
div.ac > ul > li.normal{padding:2px 0px 2px 5px;}
div.ac > ul > li.normal > div > span,div.ac > ul > li.iconList > div > span{display:table-cell;vertical-align:middle;color:#333;}
div.ac > ul > li.iconList{padding:0px 0px 0px 2px;}
div.ac > ul > li.iconList > div > div{display:table-cell;vertical-align:middle;padding-right:5px;}
div.ac > ul > li.iconList > div > div > img{display:table;display:table-cell\9;}
div.ac > ul > li.selected{background-color:#eeeeee;}

附件:下载该文件资源,减少时间成本(增值服务)