<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="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="images/ad1.jpg" /></a></li> <li ><a href="#"><img src="images/ad2.jpg" /></a></li> <li ><a href="#"><img src="images/ad3.jpg" /></a></li> <li ><a href="#"><img src="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="images/ios_button.jpg" /></a> <a href="" ><img src="images/android_button.jpg" /></a> <a href="" ><img src="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="images/icon.jpg">霸主三国 <font color="#2af029">新</font></div> <div class="bzsg_middle_left_recommend_content"><img src="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="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="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="images/init1.jpg" /></a></li> <li ><a href="#"><img src="images/init2.jpg" /></a></li> <li ><a href="#"><img src="images/init3.jpg" /></a></li> <li ><a href="#"><img src="images/init4.jpg" /></a></li> </ul> </div> <a href="javascript:void(0);" class="bzsg_prv_pic"><img src="images/prv_left.png"></a> <a href="javascript:void(0);" class="bzsg_next_pic"><img src="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="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:0; margin:0; font-size:12px; font-family:Verdana, Geneva, sans-serif; color:#000;} h2{ font-family:"微软雅黑";} table{boder-collapse:collapse; border-spacing:0;} img{border:0;} 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;/*827*/ 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: 0; 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: 542; } .bzsg_prv_pic,.bzsg_next_pic{ position: absolute; top:128px; } .bzsg_prv_pic{ left: 5px; } .bzsg_next_pic{ left: 588px; }