<html>
<head>
<meta charset="utf-8">
<title>官网</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
jQuery(function($){
var len = $(".bzsg_ad .num > li").length,
scrolllen = $(".bzsg_flash_ad_class .slider > li").length,
index = 0,
intindex = 0,
initadTimer,
adTimer;
$(".bzsg_ad .num li").mouseover(function(){
index = $(".bzsg_ad .num li").index(this);
scrollTopShowImg(index);
}).eq(0).mouseover();
//滑入 停止动画，滑出开始动画.
$('.bzsg_middle_top_right .bzsg_ad').hover(function(){
clearInterval(adTimer);
},function(){
adTimer = setInterval(function(){
scrollTopShowImg(index)
index++;
if(index==len){index=0;}
} , 2000);
}).trigger("mouseleave"); //上一页
$(".bzsg_prv_pic").click(function(){
scrollLeftShowimg(intindex);
intindex++;
if(intindex==scrolllen){intindex=0;}
clearInterval(initadTimer);
}).click();//下一页
$(".bzsg_next_pic").click(function(){
scrollLeftShowimg(intindex);
intindex--;
if(intindex<0){intindex=scrolllen-1;}
clearInterval(initadTimer);
});
$(".bzsg_prv_pic").hover(function(){},function(){$('.bzsg_flash_ad_class .slider').trigger("mouseleave");});
$(".bzsg_next_pic").hover(function(){},function(){$('.bzsg_flash_ad_class .slider').trigger("mouseleave");});
$('.bzsg_flash_ad_class .slider').hover(function(){
clearInterval(initadTimer);
},function(){
initadTimer = setInterval(function(){
scrollLeftShowimg(intindex)
intindex++;
if(intindex==len){intindex=0;}
} , 2000);
}).trigger("mouseleave");
});
function scrollTopShowImg(index){
var adHeight = jQuery(".bzsg_middle_top_right .bzsg_ad").height();
jQuery(".bzsg_ad .slider").stop(true,false).animate({bottom : -adHeight*index},1000);
jQuery(".bzsg_ad .num li").removeClass("on").eq(index).addClass("on");
}
function scrollLeftShowimg(index){
var adWidth = $(".bzsg_flash_ad .bzsg_flash_ad_class").width();
$(".bzsg_flash_ad_class .slider").stop(true,false).animate({left : -adWidth*index},1000);
}
</script>
</head>
<body>
<div class="bzsg_header">
<div class="bzsg_top_header bzsg_black">
<div class="nav">
<a href="">首 页</a>
<a href="">新闻活动</a>
<a href="">个人中心</a>
<a href="">客服帮助</a>
<a href="">论 坛</a>
</div>
<ul>
<li><a href="">公告</a><a href="">活动</a><a href="">新闻</a></li>
<li><a href="">登陆</a><a href="">注册</a></li>
<li><a href="">提交问题</a><a href="">联系我们</a></li>
</ul>
</div>
</div>
<!--幻灯-->
<div class="bzsg_middle_top bzsg_black">
<div class="bzsg_middle_top_left">
<a href=""><img src="data:images/qiu.png" /></a>
</div>
<div class="bzsg_middle_top_right">
<div class="bzsg_middle_nav">
<a href="">官网首页</a>
<a href="">新闻公告</a>
<a href="">游戏资料</a>
<a href="">官方论坛</a>
</div>
<div class="bzsg_ad" >
<ul class="slider" >
<li ><a href="#"><img src="data:images/ad1.jpg" /></a></li>
<li ><a href="#"><img src="data:images/ad2.jpg" /></a></li>
<li ><a href="#"><img src="data:images/ad3.jpg" /></a></li>
<li ><a href="#"><img src="data:images/ad4.jpg" /></a></li>
</ul>
<ul class="num" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
<!--幻灯-->
<!--content-->
<div class="bzsg_middle bzsg_black">
<div class="bzsg_middle_left">
<!--download start-->
<div class="bzsg_middle_left_download">
<a href="" ><img src="data:images/ios_button.jpg" /></a>
<a href="" ><img src="data:images/android_button.jpg" /></a>
<a href="" ><img src="data:images/91_button.jpg" /></a>
</div>
<!--download end-->
<div class="bzsg_middle_left_recommend">
<div class="bzsg_middle_left_recommend_title">推荐服务器</div>
<div class="bzsg_middle_left_recommend_content">霸主三国 <font color="#2af029">新</font></div>
<div class="bzsg_middle_left_recommend_footer"></div>
</div> <!--antietion end-->
<div class="bzsg_middle_left_recommend">
<div class="bzsg_middle_left_recommend_title">关注我们</div>
<div class="bzsg_middle_left_recommend_content"><img src="data:images/icon.jpg">霸主三国 <font color="#2af029">新</font></div>
<div class="bzsg_middle_left_recommend_content"><img src="data:images/icon.jpg">霸主三国 <font color="#2af029">新</font></div>
<div class="bzsg_middle_left_recommend_footer"></div>
</div>
<div class="bzsg_middle_left_button">
<img src="data:images/bzsg_mm.png">
<p>全球首款美式卡牌手游《霸主三国》，精美的画面，独特的玩法，让你在游戏中拥有无比的惊喜感，刺激感和快感！
《霸主三国》是赤月科技耗时一年，投资五百万，精心打造的一款卡牌手游大作；游戏引入了全新的神卡玩法和皇权争夺，并且用美式的卡牌画风为玩家呈现出一个全新的三国；玩家在游戏中通过收集武将和装备提升战斗力，并且可以对卡牌和装备进行深度培养；游戏中提供了丰富的PVP和PVE功能让玩家获得成长感，惊喜感和荣誉感！</p>
</div> </div>
<div class="bzsg_middle_right">
<div class="bzsg_middle_right_top">
<div class="bzsg_middle_right_top_title">
<a href="">全 部</a>
<a href="">公 告</a>
<a href="">新 闻</a>
<a href="">活 动</a>
<a href="" class="more">更多+</a>
</div>
<ul>
<li><span class="bzsg_notices">公告</span><span class="bzsg_title">西门子提供面向未来的,创新和高效的 能源解决方案,以满足未来的能源之需</span><span class="bzsg_date">2013-08-26</span></li>
<li><span class="bzsg_notices">公告</span><span class="bzsg_title">西门子提供面向未来的,创新和高效的 能源解决方案,以满足未来的能源之需</span><span class="bzsg_date">2013-08-26</span></li>
<li><span class="bzsg_notices">公告</span><span class="bzsg_title">西门子提供面向未来的,创新和高效的 能源解决方案,以满足未来的能源之需</span><span class="bzsg_date">2013-08-26</span></li>
<li><span class="bzsg_notices">公告</span><span class="bzsg_title">西门子提供面向未来的,创新和高效的 能源解决方案,以满足未来的能源之需</span><span class="bzsg_date">2013-08-26</span></li>
<li><span class="bzsg_notices">公告</span><span class="bzsg_title">西门子提供面向未来的,创新和高效的 能源解决方案,以满足未来的能源之需</span><span class="bzsg_date">2013-08-26</span></li>
<li><span class="bzsg_notices">公告</span><span class="bzsg_title">西门子提供面向未来的,创新和高效的 能源解决方案,以满足未来的能源之需</span><span class="bzsg_date">2013-08-26</span></li>
<li><span class="bzsg_notices">公告</span><span class="bzsg_title">西门子提供面向未来的,创新和高效的 能源解决方案,以满足未来的能源之需</span><span class="bzsg_date">2013-08-26</span></li> </ul>
<div class="bzsg_middle_right_top_title_right"><a href=""><img src="data:images/new_acitve_download.png" /></a></div>
</div>
<div class="bzsg_middle_right_slider">
<div class="bzsg_middle_right_slider_title"></div>
<div class="bzsg_flash" >
<div class="bzsg_flash_ad" >
<div class="bzsg_flash_ad_class" >
<ul class="slider" >
<li ><a href="#"><img src="data:images/init1.jpg" /></a></li>
<li ><a href="#"><img src="data:images/init2.jpg" /></a></li>
<li ><a href="#"><img src="data:images/init3.jpg" /></a></li>
<li ><a href="#"><img src="data:images/init4.jpg" /></a></li>
</ul>
</div>
<a href="javascript:void(0);" class="bzsg_prv_pic"><img src="data:images/prv_left.png"></a>
<a href="javascript:void(0);" class="bzsg_next_pic"><img src="data:images/next_right.png"></a>
</div> <div class="bzsg_flash_right">
<a href="">游戏原画</a>
<a href="">游戏截图</a>
<a href="">游戏视频</a>
</div> </div>
</div> <div class="bzsg_middle_right_gonglu">
<div class="bzsg_middle_right_top_title">
<a href="">攻 略</a>
<a href="" class="more">更多+</a>
</div>
<ul>
<li><span class="bzsg_gongnv_title">如果您的计算机或网络受到防火墙或者代理服务器的保护，请确认 Firefox 已被授权访问网络</span><span class="bzsg_date">2013-08-26</span></li>
<li><span class="bzsg_gongnv_title">如果您的计算机或网络受到防火墙或者代理服务器的保护，请确认 Firefox 已被授权访问网络</span><span class="bzsg_date">2013-08-26</span></li>
<li><span class="bzsg_gongnv_title">如果您的计算机或网络受到防火墙或者代理服务器的保护，请确认 Firefox 已被授权访问网络</span><span class="bzsg_date">2013-08-26</span></li>
<li><span class="bzsg_gongnv_title">如果您的计算机或网络受到防火墙或者代理服务器的保护，请确认 Firefox 已被授权访问网络</span><span class="bzsg_date">2013-08-26</span></li>
<li><span class="bzsg_gongnv_title">如果您的计算机或网络受到防火墙或者代理服务器的保护，请确认 Firefox 已被授权访问网络</span><span class="bzsg_date">2013-08-26</span></li>
</ul>
</div>
<div class="bzsg_middle_right_bbs">
<div class="bzsg_middle_right_top_title">
<a href="">论 坛</a>
<a href="" class="more">更多+</a>
</div>
<ul>
<li>
<div class="bzsg_middle_right_bbs_image_left"><img src="data:images/bbs_image.jpg" /> </div>
<div class="bzsg_middle_right_bbs_image_right">
<h1><a href="">谁是三国第一美女~~~，快来评选</a></h1><span>2013-8-26</span>
<p> 【活动内容】：玩家在活动期间关注并转发官方指定微博内容，转发同时注明自己的游戏角色名，并且@三位好友和霸主三国，如：霸主三国真的太好玩了@张三@李四@王五@霸主三国，我的角色名：高富帅；玩家的角色将获得2000元宝，一个角色只可获得一次。
【新浪官方微博】：http://weibo.com/u/3511750520
</p>
</div>
</li> </ul> <div class="bzsg_middle_right_bbs_buttton"></div>
</div> </div>
</div>
<div class="bzsg_footer_top bzsg_black"></div>
<!--content--> <div class="bzsg_footer"></div> </body>
</html>
@charset "utf-8";
/* CSS Document */
body,div,p,ul,ol,li,li,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,th,td{padding:; margin:; font-size:12px; font-family:Verdana, Geneva, sans-serif; color:#000;}
h2{ font-family:"微软雅黑";}
table{boder-collapse:collapse; border-spacing:;}
img{border:;}
ol,ul,dl{list-style:none;}
h1,h2,h3,h4,h5,h6{font-weight:normal; font-size:100%;}
input,select,label{vertical-align:middle;}
a{text-decoration:none; color:#666;}
.clear{clear:both;}
body{
background:url(../images/bg.jpg) no-repeat #000 center 87px;
width:1653px;
margin: 0 auto;
}
.bzsg_black{
margin: 0 auto;
width:1100px;
clear:both;
}
.bzsg_header{
background:url(../images/topbzsg.jpg) repeat-x center top;
height:435px;
}
.bzsg_top_header{
height:88px;
}
.nav{
height:88px;
width:700px;
margin-left:47px;
}
.bzsg_top_header .nav a{
font-size: 16px;
font-weight: bold;
display: block;
float:left;
color:#cd622e;
width:95px;
height:20px;
text-align: center;
padding: 6px 0px;
margin:25px 20px 0 14px;
}
.bzsg_top_header .nav a:hover {
color: #ffde7f;
border:solid 2px #b0471a;
} .bzsg_top_header ul{
margin: 0 0 0 172px;
}
.bzsg_top_header ul li{
width:128px;
float: left;
text-align: center;
}
.bzsg_top_header ul li a{
clear: both;
display: block;
margin: 10px 0;
color:#d7bb68;
font-size: 14px;
font-weight: bold;
}
.bzsg_top_header ul li a:hover{
color:#ffffba;
}
.bzsg_middle_top{
position: relative;
background: url(../images/middle_top.jpg) no-repeat center 50px;
height: 411px;
}
.bzsg_middle_top_left{
position: absolute;
top:171px;
left:18px;
}
.bzsg_middle_top_right{
position: absolute;
left:235px;
top:0px;
background: url(../images/sider_nav.png) no-repeat;
height: 411px;
/* margin-left: 235px; */
margin: 0 auto;
width: 932px;
}
.bzsg_middle_nav{
width:761px;
height: 41px;
padding: 60px 0 0 106px;
}
.bzsg_middle_nav a{
width:176px;
height:41px;
margin: 0 5px 0 0;
display: block;
line-height: 41px;
text-align: center;
float: left;
color: #fff;
font-size: 16px;
font-weight: bolder;
}
.bzsg_middle_nav a:hover{
background: url(../images/nav_bg.jpg) no-repeat;
} .bzsg_middle{
background:url(../images/middle_bg.jpg) repeat-y center top;
height: 1000px;
clear:both;
}
.bzsg_middle_left{
/*
background: #f00;
*/
width:230px;
height: 1000px;
float: left;
margin: 0 0 0 43px;
}
.bzsg_middle_right{
width:790px;/**/
height: 1000px;
margin: 0 0 0 37px;
float: right;
}
.bzsg_footer_top{
height: 233px;
background: url(../images/fttop.jpg) no-repeat center top;
}
.bzsg_footer{
height: 171px;
background: url(../images/ftbg.jpg) no-repeat center top;
}
.bzsg_middle_right_top{
width: 780px;
height:258px ;
clear: both;
margin: 3px 0 0 0 ;
background: url(../images/right_top_bg.png) repeat-y ;
}
.bzsg_middle_right_top_title{
height:35px;
width: 724px;
clear:both;
padding: 0 0 0 56px;
background: url(../images/right_top_title_bg.png) no-repeat center top;
}
.bzsg_middle_right_slider_title{
height: 37px;
width: 780px;
background: url(../images/slider_top_titile_bg.png) no-repeat center top;
}
.bzsg_middle_right_slider{
width: 780px;
height:354px ;
background: url(../images/right_top_bg.png) repeat-y ;
}
.bzsg_middle_right_gonglu{
height: 193px;
width: 780px;
background: url(../images/right_top_bg.png) repeat-y ;
}
.bzsg_middle_right_bbs{
/*
height: 402px;
*/
width: 780px;
background: url(../images/right_top_bg.png) repeat-y ;
}
.bzsg_middle_left_download{
margin:34px auto auto;
text-align: center;
padding: 40px 0 0 ;
width: 231px;
height: 241px;
background: url(../images/download_button_bg.jpg) no-repeat;
}
.bzsg_middle_left_recommend{ width: 215px;
margin: 10px auto;
background: url(../images/recommend_midle_bg.jpg) no-repeat;
}
.bzsg_middle_left_recommend_title{
height: 32px;
padding:6px 0 0 16px;
color:#fff;
font-size: 14px;
font-weight: bold;
background: url(../images/recommend_top_bg.jpg) no-repeat;
}
.bzsg_middle_left_recommend_content{
width: 215px;
height: 40px;
color:#fcf173;
padding: 0px 0 0 20px;
background: url(../images/recommend_midle_bg.jpg) repeat-y;
}
.bzsg_middle_left_recommend_footer{
width: 215px;
height: 36px;
background: url(../images/recommend_footer_bg.jpg) no-repeat;
}
.bzsg_middle_left_button{
text-align: center;
margin: 0 auto;
}
.bzsg_middle_left_download a{
display: block;
margin: 0 0 10px 0;
}
.bzsg_middle_right_top_title a{
float: left;
display: block;
width:132px ;
height: 29px;
color: #fff8c1;
font-weight: bolder;
font-size: 16px;
line-height: 29px;
margin: -3px 20px 0 0;
text-align: center;
background: url('../images/nav_button_bg2.png') no-repeat;
}
.bzsg_middle_right_top_title a:hover{
background: url('../images/nav_button_bg.png') no-repeat;
}
a.more{
float: right;
background: none;
color: red;
margin:;
padding-right: 30px;
line-height: 20px;
width: 50px;
font-size: 12px;
}
a:hover.more{
background: none;
}
.bzsg_middle_right_top ul{
width: 536px;
height: 223px;
float: left;
}
.bzsg_middle_right_top ul li{
height: 25px;
margin:5px 0 0 10px;
line-height: 25px;
}
.bzsg_middle_right_top ul li span{
display: block;
float: left;
height: 25px;
}
.bzsg_middle_right_gonglu ul{
width: 724px;
height: 158px;
float: left;
}
.bzsg_middle_right_gonglu ul li{
height: 25px;
margin:5px 0 0 10px;
line-height: 25px;
}
.bzsg_middle_right_gonglu ul li span{
display: block;
float: left;
height: 25px;
}
.bzsg_middle_right_gonglu ul li .bzsg_date{
width:80px;
text-align: right;
color:#dad488; }
.bzsg_middle_right_gonglu ul li .bzsg_gongnv_title{
width:634px;
color:#dad488;
} .bzsg_middle_right_top ul li .bzsg_notices{
width: 35px;
text-align: center;
background:#277ea9;
color: #62e1ea;
}
.bzsg_middle_right_top ul li .bzsg_title{
width:400px;
color:#dad488;
margin: 0 0 0 11px;
overflow: hidden; }
.bzsg_middle_right_top ul li .bzsg_date{
width:80px;
text-align: right;
color:#dad488; }
.bzsg_middle_right_top_title_right{
padding: 37px 0 0 0 ;
width:224px;
float: right;
line-height: 223px;
}
.bzsg_middle_right_bbs_buttton{
width:780px;
height: 29px;
background: url(../images/bzsg_middle_right_bbs_buttton_bg.png) no-repeat;
}
.bzsg_middle_right_bbs ul{
width:704px;
margin: 5px 0 0 10px;
}
.bzsg_middle_right_bbs ul li{
width: 760px;
height: 112px;
background: url(../images/bbs_font_bg2.jpg) repeat-x;
}
.bzsg_middle_right_bbs_image_left{
width:105px;
height: 112px;
float: left;
padding: 12px 0 0 10px;
background: url(../images/bbs_font_bg.jpg) no-repeat;
}
.bzsg_middle_right_bbs_image_right{
width:635px;
margin: 10px 0 0 10px;
float: right;
}
.bzsg_middle_right_bbs_image_right h1{
float: left;
}
.bzsg_middle_right_bbs_image_right h1 a{
color: #fff;
font-size: 18px;
font-weight: bolder; }
.bzsg_middle_right_bbs_image_right span{
width:190px;
float: right;
color: #03cc2e;
}
.bzsg_middle_right_bbs_image_right p{
clear: both;
line-height: 25px;
color:#4acbea;
}
.bzsg_ad{
width:667px;
height: 229px;
overflow: hidden;
position:relative;
left:75px;
}
.bzsg_ad .slider,.bzsg_ad .num{
position:absolute;
}
.bzsg_flash{
clear: both;
position: relative;
}
.bzsg_flash_ad{
height:257px;
width:625px;
float: left; background: url(../images/right-line.jpg) center right no-repeat;
}
.bzsg_flash_ad_class{
position: relative;
width:542px;
height: 288px;
border: 2px solid #a52d1c;
overflow: hidden;
left:37px;
}
.bzsg_flash_right{
width: 155px;
float: right;
margin: 30px auto; }
.bzsg_flash_right a{
margin: 0 auto;
text-align: center;
display: block;
width: 136px;
height: 57px;
line-height: 57px;
color: #66d7e9;
font-weight: bolder;
font-size: 16px;
background: url(../images/int_button_bg.jpg) no-repeat; }
.bzsg_flash_right a:hover{
background: url(../images/int_button_bg1.jpg) no-repeat;
}
.bzsg_flash_ad_class .slider{
width:2168px;
height:288px ;
position: relative;
}
.bzsg_flash_ad_class .slider li{
float: left;
width:;
}
.bzsg_prv_pic,.bzsg_next_pic{
position: absolute;
top:128px;
}
.bzsg_prv_pic{
left: 5px;
}
.bzsg_next_pic{
left: 588px;
}