jQuery + html + css 實現王者榮耀官網首頁效果附範例程式碼

2022-02-21 13:05:34

reset.css

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-weight: normal;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{
  display: block;
}
ol, ul, li{
  list-style: none;
}
blockquote, q{
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after{
  content: '';
  content: none;
}
table{
  border-collapse: collapse;
  border-spacing: 0;
}
 
/* custom */
a{
  color: #7e8c8d;
  text-decoration: none;
  -webkit-backface-visibility: hidden;
}
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track-piece{
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical{
  height: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal{
  width: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}
html, body{
  width: 100%;
  font-family: "Arial", "Microsoft YaHei", "黑體", "宋體", "微軟雅黑", sans-serif;
}
body{
  line-height: 1;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html{
  overflow-y: scroll;
}

index.css

a {
  display: block;
  text-decoration: none;
}
.main_container {
  width: 1200px;
  margin: 0 auto;
}
#index {
  position: relative;
  min-width: max-content;
}
#index .ost_box {
  position: relative;
  height: 41px;
}
#index .ost_box .ost_box_container {
  padding: 0 5px;
  box-sizing: border-box;
  width: 980px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
#index .ost_box .ost_box_container .ost_left {
  width: 380px;
  height: 100%;
  display: flex;
}
#index .ost_box .ost_box_container .ost_left .l_item_1 {
  height: 41px;
  width: 150px;
  z-index: 999;
}
#index .ost_box .ost_box_container .ost_left .l_item_2 {
  height: 41px;
  width: 230px;
}
#index .ost_box .ost_box_container .ost_right {
  width: 300px;
  height: 41px;
  display: flex;
  justify-content: end;
}
#index .ost_box .ost_box_container .ost_right .r_item_1 {
  margin-right: 20px;
}
#index .ost_box .ost_box_container .ost_right .r_item_1 h3 {
  position: relative;
}
#index .ost_box .ost_box_container .ost_right .r_item_1 h3 a {
  width: 88px;
  height: 41px;
  font-size: 14px;
  line-height: 41px;
  color: #464646;
  padding-left: 30px;
}
#index .ost_box .ost_box_container .ost_right .r_item_1 h3 a:hover {
  color: red;
}
#index .ost_box .ost_box_container .ost_right .r_item_1 h3::before {
  content: "";
  background: url(../icon/title_sprite.png);
  background-position: -30px 0;
  width: 30px;
  height: 30px;
  top: 5px;
  left: 5px;
  position: absolute;
}
#index .ost_box .ost_box_container .ost_right .r_item_2 h3 {
  position: relative;
}
#index .ost_box .ost_box_container .ost_right .r_item_2 h3 a {
  width: 127px;
  height: 41px;
  padding-right: 25px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 41px;
  color: #464646;
}
#index .ost_box .ost_box_container .ost_right .r_item_2 h3::before {
  content: "";
  background: url(../icon/title_sprite.png);
  background-position: 0 0;
  width: 30px;
  height: 30px;
  top: 5px;
  right: 3px;
  position: absolute;
  opacity: 0.1;
  transform: rotate(90deg);
}
#index .ost_box .ost_box_container .ost_right .ost_pop {
  width: 700px;
  height: 360px;
  position: absolute;
  background-color: #fafafa;
  right: 280px;
  z-index: 99;
  top: 41px;
  display: none;
}
#index .ost_box .ost_d {
  width: 976px;
  height: 189px;
  position: absolute;
  z-index: 1;
  left: 282px;
  top: 0px;
  display: none;
}
#index .ost_box .ost_d a img {
  width: 970px;
  aspect-ratio: auto 970 / 185;
  height: 185px;
}
#index .banner {
  position: relative;
  width: 100%;
  min-width: 1300px;
  height: 1100px;
  background: url(../img/bg.png) no-repeat;
  background-position: center top;
}
#index .banner .header {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 84px;
  background-color: rgba(0, 0, 0, 0.8);
}
#index .banner .header .h_container {
  width: 1300px;
  height: 100%;
  margin: 0 auto;
  position: relative;
}
#index .banner .header .h_container .logo {
  position: absolute;
  top: 16px;
  left: 0px;
  width: 230px;
  height: 54px;
}
#index .banner .header .h_container .logo a img {
  width: 200px;
  height: 100%;
}
#index .banner .header .h_container .nav {
  width: 843px;
  height: 84px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
#index .banner .header .h_container .nav li {
  width: 115px;
  height: 84px;
  padding-top: 20px;
  box-sizing: border-box;
}
#index .banner .header .h_container .nav li a {
  width: 100%;
  font-size: 18px;
  line-height: 30px;
  color: #c9c9dd;
  text-align: center;
}
#index .banner .header .h_container .nav li a em {
  display: block;
  padding-top: 5px;
  transform: scale(0.95);
  font-size: 12px;
  line-height: 16px;
  color: #858792;
}
#index .banner .header .h_container .nav li:last-child {
  padding-top: 0px;
  width: 38px;
}
#index .banner .header .h_container .nav li:last-child a {
  width: 27px;
  height: 26px;
  background: url(../icon/nav_search.png);
  margin: 29px auto 0;
  padding: 0;
}
#index .banner .header .h_container .nav .h_active {
  background: url(../img/index.png) no-repeat;
  display: inline-block;
}
#index .banner .header .h_container .nav .h_active .f_active {
  color: #d9ad50;
}
#index .banner .header .h_container .search {
  position: absolute;
  top: 21px;
  right: 0;
  width: 182px;
  height: 44.8px;
}
#index .banner .header .h_container .search img {
  position: relative;
  border: 1px solid #d9ad50;
  border-radius: 42px;
}
#index .banner .header .h_container .search .unlogin_info {
  position: absolute;
  right: 0px;
  top: 6px;
  width: 130px;
  height: 44.8px;
  display: flex;
  flex-direction: column;
}
#index .banner .header .h_container .search .unlogin_info a:first-child {
  width: 130px;
  font-size: 16px;
  color: #fff;
  margin-bottom: 3px;
}
#index .banner .header .h_container .search .unlogin_info a:last-child {
  width: 130px;
  font-size: 14px;
  color: #858792;
  line-height: 21px;
}
#index .banner .J_subNav {
  position: absolute;
  top: 83px;
  width: 100%;
  height: 285px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  display: none;
}
#index .banner .J_subNav .sub_container {
  width: 890px;
  height: 240px;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 30px;
  padding-left: 50px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
#index .banner .J_subNav .sub_container .down-nav {
  width: 115px;
  height: 100%;
  padding: 0 2.5px;
  box-sizing: border-box;
  font-size: 0px;
}
#index .banner .J_subNav .sub_container .down-nav a {
  text-align: center;
  height: 30px;
  line-height: 30px;
  padding: 0;
  font-size: 14px;
  color: #c9c9dd;
}
#index .banner .J_subNav .sub_container .down-nav a i {
  overflow: hidden;
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  background: url(../img/index.png) no-repeat;
}
#index .banner .J_subNav .sub_container .down-nav a .icon-fans {
  background-position: -137px -68px;
}
#index .banner .J_subNav .sub_container .down-nav a .icon-guard {
  background-position: -136px -5px;
}
#index .banner .J_subNav .sub_container .down-nav a:hover {
  color: #d9ad50;
  text-decoration: underline;
}
#index .banner .J_subNav .sub_container .down-nav:nth-child(6) a i {
  width: 22px;
  height: 22px;
}
#index .banner .kv_link {
  width: 1200px;
  height: 440px;
  margin: 0 auto;
}
#index .r_nav {
  pointer-events: none;
  position: fixed;
  z-index: 3;
  top: 50%;
  right: 0;
  margin-top: -240px;
  width: 254px;
  height: 494px;
  background: url(../img/r_navBg.png) no-repeat top left;
}
#index .r_nav .r_dj {
  position: absolute;
  top: 15px;
  left: 24px;
  z-index: 2;
  width: 165px;
  height: 145px;
  background: url(../img/r_dj.png) no-repeat top center;
}
#index .r_nav .r_dj span {
  display: block;
  position: absolute;
  top: 37px;
  left: 12px;
  width: 88px;
  height: 36px;
  font-size: 14px;
  text-indent: 2px;
  font-weight: bold;
  line-height: 18px;
  color: #62401b;
  overflow: hidden;
}
#index .r_nav .r_con {
  pointer-events: auto;
  position: absolute;
  top: 160px;
  left: 85px;
}
#index .r_nav .r_con li:nth-child(n + 2) {
  width: 117px;
  height: 38px;
  margin-top: 1px;
  position: relative;
  background: url(../img/r_all.png) no-repeat;
}
#index .r_nav .r_con li:nth-child(n + 2) .r_child {
  padding-top: 7px;
  position: absolute;
  width: 115px;
  height: 151px;
  top: -66px;
  left: -116px;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
}
#index .r_nav .r_con li:nth-child(n + 2) .r_child img {
  width: 101px;
  height: 100px;
  display: block;
  margin: 0 auto;
  margin-bottom: 6px;
  border-radius: 2px 2px 2px 2px;
}
#index .r_nav .r_con li:nth-child(n + 2) .r_child p {
  height: 34px;
  line-height: 17px;
  color: #dcdcdc;
  font-size: 10px;
  text-align: center;
  overflow: hidden;
}
#index .r_nav .r_con li:nth-child(n + 2) .r_child p span {
  font-size: 12px;
  text-align: center;
  line-height: 17px;
  color: #cd974b;
}
#index .r_nav .r_con li:hover .r_child {
  display: block;
}
#index .r_nav .r_con .r_code {
  position: relative;
  width: 117px;
  height: 113px;
  background: url(../img/r_all.png) no-repeat 0 -3px;
  padding-top: 3px;
}
#index .r_nav .r_con .r_code img {
  display: block;
  margin: 0 auto;
  border-radius: 2px;
  width: 110px;
  height: 110px;
}
#index .r_nav .r_con .r_burst {
  background-position: -122px -120px !important;
}
#index .r_nav .r_con .r_burst:hover {
  background-position: -122px -240px !important;
}
#index .r_nav .r_con .wechat {
  background-position: -122px -160px !important;
}
#index .r_nav .r_con .wechat:hover {
  background-position: -122px -200px !important;
}
#index .r_nav .r_con .r_wc_sph {
  background-position: -122px 0 !important;
}
#index .r_nav .r_con .r_wc_sph:hover {
  background-position: -122px -42px !important;
}
#index .wrapper {
  position: absolute;
  left: 0;
  top: 584px;
  right: 0;
  bottom: 0;
  margin: auto;
}
#index .wrapper .main_top {
  height: 342px;
  margin: 0 auto;
}
#index .wrapper .main_top .main_container {
  display: flex;
  height: 100%;
}
#index .wrapper .main_top .main_container .rotate {
  width: 605px;
  height: 100%;
  overflow: hidden;
  position: relative;
}
#index .wrapper .main_top .main_container .rotate .swiper_container {
  width: 600%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  position: absolute;
}
#index .wrapper .main_top .main_container .rotate .swiper_container li {
  width: 605px;
  height: 100%;
}
#index .wrapper .main_top .main_container .rotate .swiper_container li a {
  height: 100%;
}
#index .wrapper .main_top .main_container .rotate .swiper_container li a img {
  height: 100%;
  width: 100%;
}
#index .wrapper .main_top .main_container .rotate .adBtn {
  position: absolute;
  width: 100%;
  height: 44px;
  display: flex;
  bottom: 0px;
  z-index: 90;
  background-color: #262626;
}
#index .wrapper .main_top .main_container .rotate .adBtn a {
  flex-grow: 1;
  height: 100%;
  line-height: 44px;
  color: #b1b2be;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}
#index .wrapper .main_top .main_container .rotate .adBtn .on {
  background-color: rgba(255, 255, 255, 0.15);
  color: #d9ad50;
}
#index .wrapper .main_top .main_container .news_center {
  position: relative;
  width: 359px;
  height: 100%;
  background-color: #252731;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
#index .wrapper .main_top .main_container .news_center .new_top {
  width: 260px;
  height: 49px;
  display: flex;
}
#index .wrapper .main_top .main_container .news_center .new_top li {
  width: 52px;
  height: 100%;
  color: #b8b9c5;
  font-size: 14px;
  line-height: 49px;
  text-align: center;
}
#index .wrapper .main_top .main_container .news_center .new_top .on {
  color: #f3c258;
  border-bottom: 3px solid #f3c258;
}
#index .wrapper .main_top .main_container .news_center a {
  width: 52px;
  height: 20px;
  margin-top: 10px;
}
#index .wrapper .main_top .main_container .news_center .new_center_container {
  width: 1795px;
  top: 49px;
  height: 293px;
  position: absolute;
  display: flex;
}
#index .wrapper .main_top .main_container .news_center .new_center_container .new_item {
  width: 359px;
  height: 100%;
  padding: 0 17px;
  box-sizing: border-box;
}
#index .wrapper .main_top .main_container .news_center .new_center_container .new_item .line-sp {
  margin-top: 18px;
  padding: 0 15px;
  box-sizing: border-box;
  height: 36px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  color: #f3c258;
  background-color: #414046;
  font-size: 18px;
  line-height: 36px;
}
#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li {
  width: 100%;
  margin-bottom: 11px;
}
#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li:nth-child(n + 2) {
  cursor: pointer;
  position: relative;
  height: 20.8px;
  color: #b8b9c5;
}
#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li:nth-child(n + 2) .news-type {
  color: #f3c258;
  border: 1px solid currentColor;
}
#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li:nth-child(n + 2) .hot-type {
  color: red;
  border: 1px solid currentColor;
}
#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li:nth-child(n + 2) .message-type {
  color: #1e96ab;
  border: 1px solid currentColor;
}
#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li:nth-child(n + 2) .type {
  margin-right: 5px;
  font-size: 12px;
  display: inline-block;
  line-height: 16px;
  vertical-align: top;
  margin-top: 2px;
  width: 32px;
  text-align: center;
  border-radius: 2px;
}
#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li:nth-child(n + 2) .news-title {
  width: 230px;
  height: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  color: #b8b9c5;
  font-size: 14px;
}
#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li:nth-child(n + 2) em {
  position: absolute;
  right: 0px;
  font-size: 12px;
  color: #999;
}
#index .wrapper .main_top .main_container .news_center .new_center_container .new_item li:last-child {
  margin-bottom: 0px;
}
#index .wrapper .main_top .main_container .download_pannel {
  width: 236px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#index .wrapper .main_top .main_container .download_pannel a {
  cursor: pointer;
  width: 236px;
  background: url("../img/index.png") no-repeat;
}
#index .wrapper .main_top .main_container .download_pannel .download_btn {
  height: 128px;
  background-position: 0 -219px;
}
#index .wrapper .main_top .main_container .download_pannel .guard_btn {
  height: 106px;
  background-position: 0 -350px;
}
#index .wrapper .main_top .main_container .download_pannel .tiyan_btn {
  height: 108px;
  background-position: 0 -461px;
}
#index .wrapper .quick_entrance {
  margin-top: 28px;
  margin-bottom: 34px;
}
#index .wrapper .quick_entrance .main_container {
  display: flex;
}
#index .wrapper .quick_entrance .main_container a {
  width: 291px;
  height: 134px;
  margin-right: 12px;
  overflow: hidden;
}
#index .wrapper .quick_entrance .main_container a img {
  width: 100%;
  height: 100%;
}
#index .wrapper .quick_entrance .main_container a img:hover {
  transform: scale(1.2);
  transition: transform 0.4s ease;
}
#index .wrapper .quick_entrance .main_container a:last-child {
  margin-right: 0;
}
#index .wrapper .main_item {
  margin-bottom: 28px;
}
#index .wrapper .main_item .main_container {
  display: flex;
  justify-content: space-between;
}
#index .wrapper .main_item .main_container .strategy_center {
  width: 872px;
  margin-right: 33px;
}
#index .wrapper .main_item .main_container .strategy_center .item_header {
  position: relative;
  margin-bottom: 16px;
}
#index .wrapper .main_item .main_container .strategy_center .item_header .item_title {
  font-size: 22px;
  line-height: 25px;
  text-indent: 33px;
  font-weight: 600;
  letter-spacing: 1px;
  display: inline-block;
  background: url(../img/index.png) no-repeat;
}
#index .wrapper .main_item .main_container .strategy_center .item_header .content {
  background-position: 0 -106px;
}
#index .wrapper .main_item .main_container .strategy_center .item_header .saishi {
  background-position: 0 -184px;
}
#index .wrapper .main_item .main_container .strategy_center .item_header .more_btn {
  width: 28px;
  line-height: 20.8px;
  background: url(../img/index.png) no-repeat -252px 4px;
  position: absolute;
  top: 0;
  right: 0;
  padding-left: 22px;
  color: #999;
  font-size: 14px;
}
#index .wrapper .main_item .main_container .strategy_center .item_subnav {
  height: 32px;
  background-color: #f5f5f5;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
}
#index .wrapper .main_item .main_container .strategy_center .item_subnav .split {
  width: 1px;
  height: 20px;
  overflow: hidden;
  float: left;
  background: #e1e1e1;
  margin: 5px 0 0px;
}
#index .wrapper .main_item .main_container .strategy_center .item_subnav a {
  flex-grow: 1;
  display: block;
  float: left;
  font-size: 14px;
  color: #999;
  text-align: center;
  border-bottom: 3px solid #f5f5f5;
  line-height: 29px;
}
#index .wrapper .main_item .main_container .strategy_center .item_subnav .on {
  border-bottom: 3px solid #f3c258;
  color: #333333;
}
#index .wrapper .main_item .main_container .strategy_center .title {
  height: 26px;
  padding-top: 8px;
  padding-bottom: 9px;
}
#index .wrapper .main_item .main_container .strategy_center .title a {
  height: 24px;
  line-height: 24px;
  padding: 0 13px 0 8px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background: #f5f5f5;
  font-size: 14px;
  color: #333;
  margin-right: 8px;
  display: block;
  float: left;
}
#index .wrapper .main_item .main_container .strategy_center .title .on {
  border-color: #f3c258;
  background: #f3c258;
  color: #fff;
}
#index .wrapper .main_item .main_container .strategy_center .match_news {
  margin-top: 14px;
  height: 260px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}
#index .wrapper .main_item .main_container .strategy_center .match_news .match_news_pic {
  width: 211px;
  height: 260px;
}
#index .wrapper .main_item .main_container .strategy_center .match_news .match_news_pic img {
  width: 100%;
  height: 100%;
}
#index .wrapper .main_item .main_container .strategy_center .match_news .news-list {
  width: 630px;
  height: 260px;
}
#index .wrapper .main_item .main_container .strategy_center .match_news .news-list .line-sp {
  background: none;
  width: 577px;
  margin: 0;
  padding: 0;
  height: 66px;
  line-height: 32px;
  text-align: center;
  font-size: 28px;
  color: #333333;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#index .wrapper .main_item .main_container .strategy_center .match_news .news-list li:nth-child(n + 2) {
  position: relative;
  width: 630px;
  height: 23px;
  margin-bottom: 9px;
}
#index .wrapper .main_item .main_container .strategy_center .match_news .news-list li:nth-child(n + 2) .fl {
  font-size: 12px;
  display: block;
  width: 48px;
  height: 19px;
  line-height: 19px;
  margin-right: 12px;
  background: #e3e3e3;
  border-radius: 10px;
  border: 2px solid #e3e3e3;
  text-align: center;
  color: #999999;
  text-indent: 2px;
  float: left;
}
#index .wrapper .main_item .main_container .strategy_center .match_news .news-list li:nth-child(n + 2) a {
  width: 470px;
  height: 20.8px;
  line-height: 20.8px;
  color: #333;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 14px;
  float: left;
}
#index .wrapper .main_item .main_container .strategy_center .match_news .news-list li:nth-child(n + 2) em {
  font-size: 12px;
  color: #b8b9c5;
  float: right;
}
#index .wrapper .main_item .main_container .strategy_center .match_news .news-list li:last-child {
  margin-bottom: 0px;
}
#index .wrapper .main_item .main_container .strategy_center .video_list {
  height: 410px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#index .wrapper .main_item .main_container .strategy_center .video_list li {
  width: 209px;
  height: 175px;
  margin-right: 12px;
  margin-bottom: 30px;
}
#index .wrapper .main_item .main_container .strategy_center .video_list li:nth-child(4n) {
  margin-right: 0px;
}
#index .wrapper .main_item .main_container .strategy_center .video_list li .video {
  width: 100%;
  height: 125px;
  position: relative;
}
#index .wrapper .main_item .main_container .strategy_center .video_list li .video img {
  width: 100%;
  height: 100%;
}
#index .wrapper .main_item .main_container .strategy_center .video_list li .video .play-bar {
  width: 100%;
  height: 22px;
  line-height: 22px;
  padding: 0px 10px;
  box-sizing: border-box;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 12px;
}
#index .wrapper .main_item .main_container .strategy_center .video_list li .video .play-bar .ico-play {
  padding-left: 15px;
  background: url(../img/index.png) no-repeat;
  background-position: -256px -59px;
  display: inline-block;
  height: 22px;
}
#index .wrapper .main_item .main_container .strategy_center .video_list li .video .play-bar .fr {
  height: 22px;
  float: right;
}
#index .wrapper .main_item .main_container .strategy_center .video_list li .video .mask {
  width: 209px;
  height: 125px;
  position: absolute;
  top: 0;
  left: 0;
}
#index .wrapper .main_item .main_container .strategy_center .video_list li .video .mask .mask-play-ico {
  background: url("../img/index.png") no-repeat;
  width: 40px;
  height: 40px;
  display: block;
  margin: 40px auto 0;
  background-position: -192px -64px;
  opacity: 0;
}
#index .wrapper .main_item .main_container .strategy_center .video_list li .video-tit {
  display: block;
  height: 40px;
  overflow: hidden;
  color: #333333;
  margin-top: 10px;
  font-size: 14px;
  line-height: 21px;
}
#index .wrapper .main_item .main_container .strategy_center .video_list li:hover .video .mask {
  background-color: rgba(0, 0, 0, 0.6);
}
#index .wrapper .main_item .main_container .strategy_center .video_list li:hover .video .mask .mask-play-ico {
  opacity: 1;
}
#index .wrapper .main_item .main_container .skin_center {
  width: 295px;
  height: 528px;
  overflow: hidden;
}
#index .wrapper .main_item .main_container .skin_center .item_header {
  position: relative;
  margin-bottom: 16px;
}
#index .wrapper .main_item .main_container .skin_center .item_header .item_title {
  font-size: 22px;
  line-height: 25px;
  text-indent: 33px;
  font-weight: 600;
  letter-spacing: 1px;
  display: inline-block;
  background: url(../img/index.png) no-repeat;
}
#index .wrapper .main_item .main_container .skin_center .item_header .yingxiong {
  background-position: 0 -144px;
}
#index .wrapper .main_item .main_container .skin_center .item_header .kpl {
  background-position: -157px -106px;
}
#index .wrapper .main_item .main_container .skin_center .item_header .more_btn {
  width: 28px;
  line-height: 20.8px;
  background: url(../img/index.png) no-repeat -252px 4px;
  position: absolute;
  top: 0;
  right: 0;
  padding-left: 22px;
  color: #999;
  font-size: 14px;
}
#index .wrapper .main_item .main_container .skin_center .item_subnav {
  width: 100%;
  height: 32px;
  display: flex;
  margin-bottom: 19px;
}
#index .wrapper .main_item .main_container .skin_center .item_subnav a {
  flex-grow: 1;
  height: 100%;
  background: #f5f5f5;
  line-height: 29px;
  font-size: 14px;
  color: #999;
  box-sizing: border-box;
  text-align: center;
  border-bottom: 3px solid #f5f5f5;
}
#index .wrapper .main_item .main_container .skin_center .item_subnav .on {
  border-bottom: 3px solid #f3c258;
  color: #333333;
}
#index .wrapper .main_item .main_container .skin_center .slide-list {
  width: 885px;
  height: 419px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content {
  width: 295px;
  height: 100%;
}
#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .new_hero {
  display: block;
  width: 294px;
  height: 224px;
  border-radius: 2px;
  margin-bottom: 10px;
}
#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .new_hero img {
  height: 156px;
  width: 100%;
}
#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .new_hero .new_hero_bottom {
  padding: 10px 15px;
  height: 47px;
  border: 1px solid #e5e5e5;
  border-top: none;
  border-radius: 0 0 2px 2px;
}
#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .new_hero .new_hero_bottom .new_hero_name {
  font-size: 18px;
  color: #333333;
  font-weight: bold;
  margin-bottom: 7px;
}
#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .new_hero .new_hero_bottom .time {
  color: #999999;
  font-size: 12px;
}
#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list li {
  position: relative;
  margin-right: 7px;
  height: 173px;
  width: 68px;
  margin-bottom: 12px;
}
#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list li:nth-child(4n) {
  margin-right: 0px;
}
#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list li img {
  width: 100%;
  height: 100%;
}
#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list li .hero_mask {
  position: absolute;
  width: 68px;
  height: 100%;
  background: rgba(0, 0, 0, 0.88);
  top: 0;
  left: 0;
  opacity: 0;
}
#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list li span {
  cursor: pointer;
  overflow: hidden;
  display: none;
  position: absolute;
  top: 0px;
  left: 26px;
  text-align: center;
  color: #f3c258;
  font-size: 14px;
  width: 34px;
  height: 100%;
  line-height: 16px;
  padding-left: 2px;
  -ms-writing-mode: tb-lr;
  -webkit-writing-mode: vertical-r;
  writing-mode: vertical-lr;
  letter-spacing: 0.3em;
  word-break: break-all;
}
#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list li:hover {
  background-color: red;
}
#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list li:hover .hero_mask {
  opacity: 1;
}
#index .wrapper .main_item .main_container .skin_center .slide-list .slide-content .hero_pic_list li:hover span {
  display: block;
}
#index .wrapper .main_item .main_container .skin_center .item_content {
  height: 204px;
  margin-bottom: 21px;
}
#index .wrapper .main_item .main_container .skin_center .item_content li {
  height: 68px;
  line-height: 67px;
  border-bottom: 1px solid #e5e5e5;
}
#index .wrapper .main_item .main_container .skin_center .item_content li span {
  display: inline-block;
}
#index .wrapper .main_item .main_container .skin_center .item_content li .match_time {
  width: 80px;
  color: #333333;
  font-size: 12px;
  text-align: center;
  vertical-align: top;
}
#index .wrapper .main_item .main_container .skin_center .item_content li .team_name {
  width: 79px;
  height: 67px;
  color: #333333;
  font-size: 14px;
  text-align: center;
  line-height: 67;
}
#index .wrapper .main_item .main_container .skin_center .item_content li .team_name .team_name_icon {
  overflow: hidden;
  display: block;
  width: 25px;
  height: 25px;
  margin: 10px auto 0 auto;
  border-radius: 50%;
}
#index .wrapper .main_item .main_container .skin_center .item_content li .team_name em {
  display: inline-block;
  font-size: 12px;
  line-height: 24px;
  vertical-align: top;
  text-align: center;
}
#index .wrapper .main_item .main_container .skin_center .item_content li .vs {
  font-size: 14px;
  width: 43px;
  color: #f3c258;
  text-align: center;
  vertical-align: top;
}
#index .wrapper .main_item .main_container .skin_center img {
  height: 159px;
  width: 100%;
}
#index .wrapper .foot {
  height: 362px;
  padding-top: 80px;
  box-sizing: border-box;
  background: url(../img/bg_footer.jpg) no-repeat center 0;
}
#index .wrapper .foot .main_container {
  height: 176px;
}
#index .wrapper .foot .main_container .foot_top {
  height: 66px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 2px solid #d4d4d4;
}
#index .wrapper .foot .main_container .foot_top a {
  display: inline-block;
}
#index .wrapper .foot .main_container .foot_top .foot_ieg_logo {
  width: 285px;
  height: 64px;
  margin: 0;
  background: url(../img/spr.png) no-repeat;
}
#index .wrapper .foot .main_container .foot_top .foot_ieg_logo1 {
  width: 70px;
  height: 64px;
  margin: 0;
  background: url(../img/spr.png) no-repeat -285px 0;
}
#index .wrapper .foot .main_container .foot_bottom {
  display: flex;
  justify-content: space-between;
}
#index .wrapper .foot .main_container .foot_bottom .b_left {
  width: 528px;
  height: 86px;
}
#index .wrapper .foot .main_container .foot_bottom .b_left p {
  width: 100%;
}
#index .wrapper .foot .main_container .foot_bottom .b_left p em {
  font-style: normal;
  margin-right: 12px;
  color: #6d6d6d;
  font-size: 12px;
  text-align: left;
  line-height: 20px;
}
#index .wrapper .foot .main_container .foot_bottom .b_left .intro {
  margin-top: 6px;
  font-size: 12px;
  color: #666;
  line-height: 20px;
}
#index .wrapper .foot .main_container .foot_bottom .b_right {
  width: 650px;
  height: 86px;
}
#index .wrapper .foot .main_container .foot_bottom .b_right .link_map {
  display: flex;
}
#index .wrapper .foot .main_container .foot_bottom .b_right .link_map a {
  color: #646467;
  text-decoration: none;
  font-size: 12px;
  line-height: 20px;
}
#index .wrapper .foot .main_container .foot_bottom .b_right .link_map span {
  line-height: 20px;
  margin: 0 2px;
}

index.js

$(function () {
    var top = $(".banner")[0].offsetTop;
    var header_height = $(".header")[0].offsetHeight;
   
    var newcenter_width = $(".news_center")[0].offsetWidth;
    
   
    
    $(".header .nav").on("mouseenter", "li", function () {
        var len = $(".header .nav").children().length;
        var index = $(this).index()
        if (index < len - 1) {
            var $li = $(".header .nav").children().eq(index);
            $li.addClass("h_active").siblings().removeClass("h_active");
            $li.find("a em").addClass("f_active").siblings().removeClass("f_active")
        }

    })
    $(".header .nav").on("mouseleave", "li", function () {
        $(this).removeClass("h_active").find("a em").removeClass("f_active");
    })
    

    $(".header").on("mouseenter", function() {
        $(".J_subNav").slideDown(300);
    })
    $(".header").on("mouseleave", function(e) {
        if($(e)[0].pageY < top)  $(".J_subNav").slideUp(300);
    })

    $(".J_subNav").on("mouseleave", function(e) {
        if($(e)[0].pageY > top + header_height) $(".J_subNav").slideUp(300);
    })
  


    $(".ost_left .l_item-2").on("mouseenter", function () {
        $(".ost_d").css({ display: "block" });
    })
    $(".ost_d").on("mouseleave", function () {
        $(".ost_d").css({ display: "none" });
       
    })



    $(".ost_right .r_item_2").on("mouseenter", function () {
        $(".ost_pop").css({ display: "block" });
       
    })
    $(".ost_pop").on("mouseleave", function () {
        $(".ost_pop").css({ display: "none" });
    })

    
    $(".new_top").on("mouseenter", "li", function(e) {
        var index = $(this).index();
        $(this).addClass("on").siblings().removeClass("on");
        $(".new_center_container").stop(true,true).animate({left: -(index * newcenter_width)+ "px"});
    })


    $(".strategy_center .sub1").on("mouseenter", "a", function(e) {
        $(".strategy_center .sub1").children().eq($(this).index()).addClass("on").siblings().removeClass("on")
    })
    $(".strategy_center .sub2").on("mouseenter", "a", function(e) {
        $(".strategy_center .sub2").children().eq($(this).index()).addClass("on").siblings().removeClass("on")
    })
    

    $(".strategy_center .title").on("mouseenter", "a", function(e) {
        $(".strategy_center .title").children().eq($(this).index()).addClass("on").siblings().removeClass("on")
    })


    $(".skin_center .sub3").on("mouseenter", "a", function() {
        var index = $(this).index();
        var width = $(".skin_center")[0].offsetWidth;
        $(this).addClass("on").siblings().removeClass("on");
        $(".slide-list").stop(true,true).animate({left: -(index * width)+ "px"});
    })

})

swiper.js

; (function () {
    var timerId;
    // 獲取容器的寬度
    var width = $('.rotate').innerWidth();

    // 當前輪播圖片下標
    var index = 0;
    var ab_index = 0;

    // 輪播圖
    var $ul = $('.rotate .swiper_container');
    var len = $ul.children().length;

    // 小塊
    var $point = $(".adBtn a");
    var adBtn = $point.length

    // 輪播
    var autoPlay = function () {
        index++;
        if (index > len - 1) {
            index = 1;
            $ul.css({ left: 0 })
        }
        $ul.stop(true, true).animate({ left: -(width * index) }, 500);

        ab_index++;
        ab_index = ab_index > adBtn - 1 ? 0 : ab_index;
        $point.eq(ab_index).addClass("on").siblings().removeClass("on");
    }

    // 定時輪播
    timerId = setInterval(function () {
        autoPlay();
    }, 4000);

    
    $('.rotate').on("mouseenter", function () {
        clearInterval(timerId)
    });
    $(".rotate").on("mouseleave", function () {
        timerId = setInterval(function () {
            autoPlay()
        }, 4000);
    })


    $(".adBtn").on("mouseenter", "a", function (e) {
        ab_index = $(this).index();
        index = $(this).index();
        $ul.stop(true, true).animate({ left: -(width * index) }, 500);
        $point.eq(ab_index).addClass("on").siblings().removeClass("on");
    })
})()

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>王者榮耀官方網站-騰訊遊戲</title>
    <link rel="stylesheet" href="./css/reset.css" rel="external nofollow"  />
    <link rel="stylesheet" href="./css/index.css" rel="external nofollow"  />
  </head>
  <body>
    <div id="index">
      <div class="ost_box">
        <ul class="ost_box_container">
          <li class="ost_left">
            <div class="l_item_1">
              <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
                <img src="./icon/logo1.png" alt="" />
              </a>
            </div>
            <div class="l_item-2">
              <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
                <img src="./icon/icon1.jpg" alt="" />
              </a>
            </div>
          </li>
          <li class="ost_right">
            <div class="r_item_1">
              <h3>
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >成長守護平臺</a>
              </h3>
            </div>
            <div class="r_item_2">
              <h3>
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >騰訊視訊排行榜</a>
              </h3>
            </div>
            <div class="ost_pop"></div>
          </li>
        </ul>
        <div class="ost_d">
          <a href="">
            <img src="./icon/big_icon1.jpg" alt="" />
          </a>
        </div>
      </div>

      <div class="banner">
        <!-- 頭部 -->
        <div class="header">
          <div class="h_container">
            <div class="logo">
              <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
                <img src="./icon/logo2.png" alt="" />
              </a>
            </div>
            <ul class="nav">
              <li class="">
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="">
                  遊戲資料
                  <em>DATA</em>
                </a>
              </li>
              <li>
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
                  內容中心
                  <em>CONTENTS</em>
                </a>
              </li>
              <li>
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
                  賽事中心
                  <em>MATCH</em>
                </a>
              </li>
              <li>
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
                  百態王者
                  <em>CULIURE</em>
                </a>
              </li>
              <li>
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
                  社群互動
                  <em>COMMUNITY</em>
                </a>
              </li>
              <li>
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
                  玩家支援
                  <em>PLAYER</em>
                </a>
              </li>
              <li>
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
                  IP新遊
                  <em>NUW GAMES</em>
                </a>
              </li>
              <li>
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></a>
              </li>
            </ul>
            <div class="search">
              <img
                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAMAAADyHTlpAAAABGdBTUEAALGPC/xhBQAAARpQTFRF88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JY88JYAAAA88JYAMCn0QAAAF10Uk5TZBSP1dYNDujnLPuA3/zQAos0UjmnB8KcgZrNkfGwCdhthtnjysFgCFAZSuQWKYNXh9IbREw+9iRhdyPlZRNdvRwnMRrvNf3F3isBtz+eRfPha+v3O+718Gm0eB4AqcfmkwAAAUBJREFUOMvt1FWTg0AMAOCeu7u71t3dFS+FJv//b9wCnbu5YwI83VPzsBvYb2aRbHzgOXxzartTLbGhVPVAN9Z0NurrXVdaE9GkKNZcaFPBVBJ6kEyh0nSksoqYAVgEyCCqsgMdcIjIpxOYSPMs4wYkHY3RiPwSLufNbDyiqIp/Q6Iob6MqRZ9t9ImiNzZ6R9ELG72k6Dl22q1v1mp38JSiE9SgLpR3mNssC3XQ2DVBD62lBR2zRSPR8JiiR9jIrgDEwhiOAazqDTyjaI7trMQhwqYIxBU2XVH01nibCYTYGGIPzuKBLJdrkwb86A9YVCfpI1uNBkHmZAhGDSqQ9MUspwLkwGcV2StJh9bHn8J09hs+Sfo2/EXFd6ezVZB+aP/D+cQebM+odN9z6wPFvkl3ux66y95WBSr7J/NW/F/0C0EhZNPgBN3FAAAAAElFTkSuQmCC"
                width="42"
                height="42"
              />
              <div class="unlogin_info">
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >歡迎登入</a>
                <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >登陸後檢視遊戲戰績</a>
              </div>
            </div>
          </div>
        </div>
        <!-- 二級選單 -->
        <div class="J_subNav">
          <div class="sub_container">
            <li class="down-nav">
              <a href="">版本介紹</a>
              <a href="">遊戲介紹</a>
              <a href="">英雄資料</a>
              <a href="">
                <i class="icon-fans"></i>
                爆料站
              </a>
              <a href="">
                <i class="icon-fans"></i>
                故事站
              </a>
              <a href="">遊戲桌布</a>
            </li>
            <li class="down-nav">
              <a href="">攻略中心</a>
              <a href="">英雄攻略</a>
              <a href="">視訊中心</a>
              <a href="">
                <i class="icon-fans"></i>
                開放素材庫
              </a>
              <a href="">王者視角</a>
              <a href="">作者入駐</a>
              <a href="">媒體入駐</a>
              <a href=""></a>
            </li>
            <li class="down-nav">
              <a href="">
                <i class="icon-fans"></i>
                世界冠軍盃</a
              >
              <a href="">
                <i class="icon-fans"></i>
                KPL
              </a>
              <a href="">
                <i class="icon-fans"></i>
                全國大賽
              </a>
              <a href="">女子公開賽</a>
              <a href="">
                <i class="icon-fans"></i>
                K甲聯賽
              </a>
              <a href=""> 高校賽 </a>
              <a href="">全民賽</a>
              <a href="">
                <i class="icon-fans"></i>
                賽事資料
              </a>
            </li>
            <li class="down-nav">
              <a href="">榮耀·傳承</a>
              <a href="">王者文化站</a>
              <a href="">萬千世界</a>
              <a href="">星光殿堂</a>
              <a href="">商戶特權</a>
              <a href="">
                <i class="icon-fans"></i>
                IP共創計劃</a
              >
            </li>
            <li class="down-nav">
              <a href="">
                <i class="icon-fans"></i>
                創意互動營
              </a>
              <a href="">
                <i class="icon-fans"></i>
                王者營地
              </a>
              <a href="">手Q部落</a>
              <a href="">微信圈子</a>
              <a href="">官方微博</a>
              <a href="">微信公眾號</a>
              <a href="">手Q訂閱號</a>
            </li>
            <li class="down-nav">
              <a href="">騰訊遊戲防沉迷</a>
              <a href="">
                <i class="icon-guard"></i>
                成長守護平臺
              </a>
              <a href="">
                <i class="icon-fans"></i>
                對局環境情報站
              </a>
              <a href="">客服專區</a>
              <a href="">禮包兌換</a>
              <a href="">自助服務</a>
            </li>
            <li class="down-nav">
              <a href="">
                <i class="icon-fans"></i>
                代號:破曉
              </a>
              <a href="">
                <i class="icon-fans"></i>
                代號:啟程
              </a>
            </li>
          </div>
        </div>
        <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  class="kv_link"></a>
      </div>

      <div class="wrapper">
        <div class="main_top">
          <div class="main_container">
            <div class="rotate">
              <ul class="swiper_container">
                <li>
                  <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="./img/swiper1.jpeg" alt="" /></a>
                </li>
                <li>
                  <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="./img/swiper2.jpeg" alt="" /></a>
                </li>
                <li>
                  <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="./img/swiper3.jpeg" alt="" /></a>
                </li>
                <li>
                  <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="./img/swiper4.jpeg" alt="" /></a>
                </li>
                <li>
                  <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="./img/swiper5.jpeg" alt="" /></a>
                </li>
                <li>
                  <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ><img src="./img/swiper1.jpeg" alt="" /></a>
                </li>
              </ul>
              <div class="adBtn">
                <a title="古力弈星對弈" class="on">古力弈星對弈</a>
                <a title="鬥破蒼穹手遊">鬥破蒼穹手遊</a>
                <a title="遊戲賽道開啟">遊戲賽道開啟</a>
                <a title="聯名新品上線">聯名新品上線</a>
                <a title="全新賽事戰令">全新賽事戰令</a>
              </div>
            </div>
            <div class="news_center">
              <ul class="new_top">
                <li class="on">熱門</li>
                <li>新聞</li>
                <li>公告</li>
                <li>活動</li>
                <li>賽事</li>
              </ul>
              <a href="">...</a>
              <div class="new_center_container">
                <ul class="new_item">
                  <li class="line-sp">第二十七期大神問答精彩回顧</li>
                  <li>
                    <span class="hot-type type">熱門</span>
                    <span class="news-title"
                      >週年慶主題頭像框方案票選結果公佈</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="hot-type type">熱門</span>
                    <span class="news-title"
                      >狄某有話說 |假期臨近，9月峽谷資料新鮮奉上！</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="news-type type">公告</span>
                    <span class="news-title"
                      >狄某有話說 |假期臨近，9月峽谷資料新鮮奉上！</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="hot-type type">熱門</span>
                    <span class="news-title"
                      >公孫離-祈雪靈祝 海報優化過程稿【老亞瑟的答疑時間】</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="hot-type type">熱門</span>
                    <span class="news-title"
                      >週年慶主題頭像框票選活動開啟！</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="hot-type type">熱門</span>
                    <span class="news-title">大神帶你棋局對弈，探祕峽谷~</span>
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="hot-type type">熱門</span>
                    <span class="news-title"
                      >狄某有話說丨 鬼谷子：比比誰能更快終結對局？</span
                    >
                    <em>09-29</em>
                  </li>
                </ul>
                <ul class="new_item">
                  <li class="line-sp">第二十七期大神問答精彩回顧</li>
                  <li>
                    <span class="message-type type">新聞</span>
                    <span class="news-title"
                      >王者榮耀攜手多名藝術家講述敦煌故事</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="message-type type">新聞</span>
                    <span class="news-title"
                      >就是辣麼燃!《魂鬥羅：歸來》新川渝版本瞭解一下？</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="message-type type">新聞</span>
                    <span class="news-title"
                      >週年慶主題頭像框方案票選結果公佈</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="message-type type">新聞</span>
                    <span class="news-title"
                      >狄某有話說 |假期臨近，9月峽谷資料新鮮奉上！</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="message-type type">新聞</span>
                    <span class="news-title"
                      >遇見胡旋今日上線！快樂胡旋一起轉圈活動開啟</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="message-type type">新聞</span>
                    <span class="news-title"
                      >國服貂蟬線上solo！誰是鬥魚最強貂蟬~</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="message-type type">新聞</span>
                    <span class="news-title"
                      >QQ名人賽王牌賽總決賽震撼來襲！喜劇大咖沈騰遇上國風新星INTO1－劉宇！</span
                    >
                    <em>09-29</em>
                  </li>
                </ul>
                <ul class="new_item">
                  <li class="line-sp">9月29日全服不停機更新公告</li>
                  <li>
                    <span class="news-type type">公告</span>
                    <span class="news-title">9月29日外掛專項打擊公告</span>
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="news-type type">公告</span>
                    <span class="news-title"
                      >9月29日淨化遊戲環境宣告及處罰公告</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="news-type type">公告</span>
                    <span class="news-title">9月29日「演員」懲罰名單</span>
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="news-type type">公告</span>
                    <span class="news-title"
                      >9月29日遊戲內違規簽名、攻略資訊處罰公告</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="news-type type">公告</span>
                    <span class="news-title"
                      >9月29日掛車行為專項違規處罰公告</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="news-type type">公告</span>
                    <span class="news-title">9月29日更新後異常說明</span>
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="news-type type">公告</span>
                    <span class="news-title">9月29日全服不停機更新公告</span>
                    <em>09-29</em>
                  </li>
                </ul>
                <ul class="new_item">
                  <li class="line-sp">週年慶主題頭像框方案票選結果公佈</li>
                  <li>
                    <span class="news-type type">活動</span>
                    <span class="news-title"
                      >【一轉千年】集腰鼓兌好禮活動開啟公告</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="news-type type">活動</span>
                    <span class="news-title"
                      >金秋十月驚喜不斷，峽谷福利搶先看</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="news-type type">活動</span>
                    <span class="news-title">「一元福利周」活動公告</span>
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="news-type type">活動</span>
                    <span class="news-title"
                      >週年慶主題頭像框票選活動開啟！</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="news-type type">活動</span>
                    <span class="news-title">S25新賽季來襲，弈星重塑登場</span>
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="news-type type">活動</span>
                    <span class="news-title"
                      >【微信使用者專屬】微信小程式「遊戲禮品站」購買「沈夢溪-月團寄思」面板抽免單活動</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="news-type type">活動</span>
                    <span class="news-title"
                      >【微信使用者專屬】微信小程式「遊戲禮品站」預定「沈夢溪-月團寄思」面板抽免單活動</span
                    >
                    <em>09-29</em>
                  </li>
                </ul>
                <ul class="new_item">
                  <li class="line-sp">
                    KPL預報丨小義、喬兮發育路對決，誰的馬可波羅更帥氣？
                  </li>
                  <li>
                    <span class="message-type type">賽事</span>
                    <span class="news-title"
                      >我的電競假期狂歡倒計時！全國大賽小長假線上、線下打卡指南</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="message-type type">賽事</span>
                    <span class="news-title"
                      >秋季賽快訊：XYG三連勝衝擊A組，九月瀾打出致命節奏</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="message-type type">賽事</span>
                    <span class="news-title"
                      >秋季賽快訊：西安WE二連勝，初心馬超斬獲本賽季首個五殺</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="message-type type">賽事</span>
                    <span class="news-title"
                      >電競假期即將開啟，人氣主播、coser帶你玩轉全國大賽！</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="message-type type">賽事</span>
                    <span class="news-title"
                      >KPL預報丨XYG迎戰北京WB衝擊三連勝！</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="message-type type">賽事</span>
                    <span class="news-title"
                      >王者榮耀全國大賽|官方賽事人才培養計劃~</span
                    >
                    <em>09-29</em>
                  </li>
                  <li>
                    <span class="message-type type">賽事</span>
                    <span class="news-title"
                      >21秋第一週最佳陣容：武漢eStar四人上榜，花海斬獲周最佳</span
                    >
                    <em>09-29</em>
                  </li>
                </ul>
              </div>
            </div>
            <div class="download_pannel">
              <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" download_btn"></a>
              <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" guard_btn"></a>
              <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" tiyan_btn"></a>
            </div>
          </div>
        </div>
        <div class="quick_entrance">
          <div class="main_container">
            <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
              <img src="./img/quick1.jpg" alt="" />
            </a>
            <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
              <img src="./img/quick2.png" alt="" />
            </a>
            <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
              <img src="./img/quick3.png" alt="" />
            </a>
            <a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
              <img src="./img/quick4.jpg" alt="" />
            </a>
          </div>
        </div>
        <div class="main_item">
          <div class="main_container">
            <div class="strategy_center">
              <div class="item_header">
                <h3 class="item_title content">內容中心</h3>
                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" more_btn">更多</a>
              </div>
              <div class="item_subnav sub1">
                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" on">精品欄目</a>
                <span class="split"></span>
                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ">賽事精品</a>
                <span class="split"></span>
                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ">英雄攻略</a>
              </div>
              <div class="title">
                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" on">最新</a>
                <a href="">馬菠蘿奇聞錄</a>
                <a href="">王者剋制論</a>
                <a href="">王者視角</a>
                <a href="">策見打</a>
                <a href="">峽谷460</a>
                <a href="">百星王者帶你飛</a>
                <a href="">狄仁傑封神榜</a>
              </div>
              <ul class="video_list">
                <li>
                  <div class="video">
                    <img src="./img/1.png" alt="" />
                    <div class="play-bar">
                      <em class="ico-play">1.1萬</em>
                      <em class="fr">2021-09-30</em>
                    </div>
                    <div class="mask">
                      <span class="mask-play-ico"></span>
                    </div>
                  </div>
                  <div class="video-tit">
                    【王者剋制論】中單法師怎麼樣？李九教你法王制霸峽谷諸葛亮
                  </div>
                </li>
                <li>
                  <div class="video">
                    <img src="./img/2.jpg" alt="" />
                    <div class="play-bar">
                      <em class="ico-play">1.5萬</em>
                      <em class="fr">2021-09-30</em>
                    </div>
                    <div class="mask">
                      <span class="mask-play-ico"></span>
                    </div>
                  </div>
                  <div class="video-tit">
                    刷野最快又如何？李九教你全面剋制阿古朵
                  </div>
                </li>
                <li>
                  <div class="video">
                    <img src="./img/3.png" alt="" />
                    <div class="play-bar">
                      <em class="ico-play">2.5萬</em>
                      <em class="fr">2021-09-30</em>
                    </div>
                    <div class="mask">
                      <span class="mask-play-ico"></span>
                    </div>
                  </div>
                  <div class="video-tit">
                    【王者剋制論】絕命毒師橫行峽谷？李九教你全面剋制扁鵲
                  </div>
                </li>
                <li>
                  <div class="video">
                    <img src="./img/4.png" alt="" />
                    <div class="play-bar">
                      <em class="ico-play">8.5萬</em>
                      <em class="fr">2021-09-30</em>
                    </div>
                    <div class="mask">
                      <span class="mask-play-ico"></span>
                    </div>
                  </div>
                  <div class="video-tit">
                    【王者剋制論】絕命毒師橫行峽谷？李九教你全面剋制扁鵲
                  </div>
                </li>
                <li>
                  <div class="video">
                    <img src="./img/5.jpg" alt="" />
                    <div class="play-bar">
                      <em class="ico-play">2.5萬</em>
                      <em class="fr">2021-09-30</em>
                    </div>
                    <div class="mask">
                      <span class="mask-play-ico"></span>
                    </div>
                  </div>
                  <div class="video-tit">
                    【王者剋制論】絕命毒師橫行峽谷？李九教你全面剋制扁鵲
                  </div>
                </li>
                <li>
                  <div class="video">
                    <img src="./img/6.jpg" alt="" />
                    <div class="play-bar">
                      <em class="ico-play">2.5萬</em>
                      <em class="fr">2021-09-30</em>
                    </div>
                    <div class="mask">
                      <span class="mask-play-ico"></span>
                    </div>
                  </div>
                  <div class="video-tit">
                    【王者剋制論】絕命毒師橫行峽谷？李九教你全面剋制扁鵲
                  </div>
                </li>
                <li>
                  <div class="video">
                    <img src="./img/7.png" alt="" />
                    <div class="play-bar">
                      <em class="ico-play">2.5萬</em>
                      <em class="fr">2021-09-30</em>
                    </div>
                    <div class="mask">
                      <span class="mask-play-ico"></span>
                    </div>
                  </div>
                  <div class="video-tit">
                    【王者剋制論】絕命毒師橫行峽谷？李九教你全面剋制扁鵲
                  </div>
                </li>
                <li>
                  <div class="video">
                    <img src="./img/8.jpg" alt="" />
                    <div class="play-bar">
                      <em class="ico-play">2.5萬</em>
                      <em class="fr">2021-09-30</em>
                    </div>
                    <div class="mask">
                      <span class="mask-play-ico"></span>
                    </div>
                  </div>
                  <div class="video-tit">
                    【王者剋制論】絕命毒師橫行峽谷？李九教你全面剋制扁鵲
                  </div>
                </li>
              </ul>
            </div>
            <div class="skin_center">
              <div class="item_header">
                <h3 class="item_title yingxiong">英雄/面板</h3>
                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" more_btn">更多</a>
              </div>
              <div class="item_subnav sub3">
                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" on">最新英雄</a>
                <a href="">最新面板</a>
                <a href="">周免英雄</a>
              </div>
              <div class="slide-list">
                <div class="slide-content">
                  <div class="new_hero">
                    <img src="./img/h1.jpg" alt="" />
                    <div class="new_hero_bottom">
                      <p class="new_hero_name">新英雄：雲纓</p>
                      <p class="time">上線時間：2021.06.23</p>
                    </div>
                  </div>
                  <ul class="hero_pic_list">
                    <li>
                      <img src="./img/h2.jpg" alt="" />
                      <div class="hero_mask"></div>
                      <span>艾琳</span>
                    </li>
                    <li>
                      <img src="./img/h3.jpg" alt="" />
                      <div class="hero_mask"></div>
                      <span>司空震</span>
                    </li>
                    <li>
                      <img src="./img/h4.jpg" alt="" />
                      <div class="hero_mask"></div>
                      <span>瀾</span>
                    </li>
                    <li>
                      <img src="./img/h5.jpg" alt="" />
                      <div class="hero_mask"></div>
                      <span>夏洛特</span>
                    </li>
                  </ul>
                </div>
                <div class="slide-content">
                  <div class="new_hero">
                    <img src="./img/p1.jpg" alt="" />
                    <div class="new_hero_bottom">
                      <p class="new_hero_name">新面板：樂園奇幻夜-鍾馗</p>
                      <p class="time">上線時間：2021.06.23</p>
                    </div>
                  </div>
                  <ul class="hero_pic_list">
                    <li>
                      <img src="./img/p2.jpg" alt="" />
                      <div class="hero_mask"></div>
                      <span>遇見胡旋-貂蟬</span>
                    </li>
                    <li>
                      <img src="./img/p3.jpg" alt="" />
                      <div class="hero_mask"></div>
                      <span>月團寄思-沈夢溪</span>
                    </li>
                    <li>
                      <img src="./img/p4.jpg" alt="" />
                      <div class="hero_mask"></div>
                      <span>鐵甲之心-典韋</span>
                    </li>
                    <li>
                      <img src="./img/p5.jpg" alt="" />
                      <div class="hero_mask"></div>
                      <span>時之奇旅-安琪拉</span>
                    </li>
                  </ul>
                </div>
                <div class="slide-content">
                  <ul class="hero_pic_list">
                    <li>
                      <img src="./img/f1.jpg" alt="" />
                      <div class="hero_mask"></div>
                      <span>李白</span>
                    </li>
                    <li>
                      <img src="./img/f2.jpg" alt="" />
                      <div class="hero_mask"></div>
                      <span>鏡</span>
                    </li>
                    <li>
                      <img src="./img/f3.jpg" alt="" />
                      <div class="hero_mask"></div>
                      <span>弈星</span>
                    </li>
                    <li>
                      <img src="./img/f4.jpg" alt="" />
                      <div class="hero_mask"></div>
                      <span>瑤</span>
                    </li>
                    <li>
                      <img src="./img/f5.jpg" alt="" />
                      <div class="hero_mask"></div>
                      <span>公孫離</span>
                    </li>
                    <li>
                      <img src="./img/f6.jpg" alt="" />
                      <div class="hero_mask"></div>
                      <span>廉頗</span>
                    </li>
                    <li>
                      <img src="./img/f7.jpg" alt="" />
                      <div class="hero_mask"></div>
                      <span>花木蘭</span>
                    </li>
                    <li>
                      <img src="./img/f8.jpg" alt="" />
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="main_item">
          <div class="main_container">
            <div class="strategy_center">
              <div class="item_header">
                <h3 class="item_title saishi">賽事中心</h3>
                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" more_btn">更多</a>
              </div>
              <div class="item_subnav sub2">
                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" on">KPL</a>
                <span class="split"></span>
                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ">世冠</a>
                <span class="split"></span>
                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ">K甲聯賽</a>
                <span class="split"></span>
                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ">城市賽</a>
                <span class="split"></span>
                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ">高校聯賽</a>
                <span class="split"></span>
                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ">TGA</a>
                <span class="split"></span>
                <a href="">微信遊戲邀請賽</a>
                <span class="split"></span>
                <a href="">模擬戰大師賽</a>
              </div>
              <div class="match_news">
                <div class="match_news_pic">
                  <img src="./img/n1.jpg" alt="" />
                </div>
                <ul class="news-list">
                  <li class="line-sp">
                    24日戰報：四場零封彰顯風範，虎牙XYG、成都TG等4支戰隊強勢挺進8強
                  </li>
                  <li>
                    <span class="fl">KPL</span>
                    <a href=""
                      >秋季賽快訊：上海EDG.M拿下首勝，yuan趙雲破陣切C</a
                    >
                    <em class="">09-30</em>
                  </li>
                  <li>
                    <span class="fl">KPL</span>
                    <a href=""
                      >秋季賽快訊：濟南RW俠讓二追三拿首勝，小夜趙雲逆轉局勢</a
                    >
                    <em class="">09-30</em>
                  </li>
                  <li>
                    <span class="fl">KPL</span>
                    <a href=""
                      >秋季賽快訊：深圳DYG拿下首勝，小義公孫離靈活走位輸出拉滿</a
                    >
                    <em class="">09-30</em>
                  </li>
                  <li>
                    <span class="fl">KPL</span>
                    <a href=""
                      >KPL預報丨小義、喬兮發育路對決，誰的馬可波羅更帥氣？</a
                    >
                    <em class="">09-30</em>
                  </li>
                  <li>
                    <span class="fl">KPL</span>
                    <a href=""
                      >秋季賽快訊：XYG三連勝衝擊A組，九月瀾打出致命節奏</a
                    >
                    <em class="">09-30</em>
                  </li>
                  <li>
                    <span class="fl">KPL</span>
                    <a href=""
                      >秋季賽快訊：西安WE二連勝，初心馬超斬獲本賽季首個五殺</a
                    >
                    <em class="">09-30</em>
                  </li>
                </ul>
              </div>
              <ul class="video_list">
                <li>
                  <div class="video">
                    <img src="./img/9.jpg" alt="" />
                    <div class="play-bar">
                      <em class="ico-play">1.1萬</em>
                      <em class="fr">2021-09-30</em>
                    </div>
                    <div class="mask">
                      <span class="mask-play-ico"></span>
                    </div>
                  </div>
                  <div class="video-tit">
                    《穩住姐來C》TGA冠軍中單李九嫣「奪命」西施操作秀
                  </div>
                </li>
                <li>
                  <div class="video">
                    <img src="./img/10.jpg" alt="" />
                    <div class="play-bar">
                      <em class="ico-play">1.5萬</em>
                      <em class="fr">2021-09-30</em>
                    </div>
                    <div class="mask">
                      <span class="mask-play-ico"></span>
                    </div>
                  </div>
                  <div class="video-tit">
                    【穩住姐來C】第一集：TGA女子賽冠軍「駕臨」，實力能否服眾？
                  </div>
                </li>
                <li>
                  <div class="video">
                    <img src="./img/11.png" alt="" />
                    <div class="play-bar">
                      <em class="ico-play">2.5萬</em>
                      <em class="fr">2021-09-30</em>
                    </div>
                    <div class="mask">
                      <span class="mask-play-ico"></span>
                    </div>
                  </div>
                  <div class="video-tit">
                    2020首屆TGA王者榮耀女子賽冠軍爭奪戰精彩錦集
                  </div>
                </li>
                <li>
                  <div class="video">
                    <img src="./img/12.jpg" alt="" />
                    <div class="play-bar">
                      <em class="ico-play">8.5萬</em>
                      <em class="fr">2021-09-30</em>
                    </div>
                    <div class="mask">
                      <span class="mask-play-ico"></span>
                    </div>
                  </div>
                  <div class="video-tit">2018 TGA VTG VS ADC set 1</div>
                </li>
                <li>
                  <div class="video">
                    <img src="./img/13.jpg" alt="" />
                    <div class="play-bar">
                      <em class="ico-play">2.5萬</em>
                      <em class="fr">2021-09-30</em>
                    </div>
                    <div class="mask">
                      <span class="mask-play-ico"></span>
                    </div>
                  </div>
                  <div class="video-tit">2018 TGA VTG VS ADC set 2</div>
                </li>
                <li>
                  <div class="video">
                    <img src="./img/14.jpg" alt="" />
                    <div class="play-bar">
                      <em class="ico-play">2.5萬</em>
                      <em class="fr">2021-09-30</em>
                    </div>
                    <div class="mask">
                      <span class="mask-play-ico"></span>
                    </div>
                  </div>
                  <div class="video-tit">2018 TGA LYG VS sViper set 1</div>
                </li>
                <li>
                  <div class="video">
                    <img src="./img/15.jpg" alt="" />
                    <div class="play-bar">
                      <em class="ico-play">2.5萬</em>
                      <em class="fr">2021-09-30</em>
                    </div>
                    <div class="mask">
                      <span class="mask-play-ico"></span>
                    </div>
                  </div>
                  <div class="video-tit">2018 TGA VTG VS ADC set 3</div>
                </li>
                <li>
                  <div class="video">
                    <img src="./img/16.jpg" alt="" />
                    <div class="play-bar">
                      <em class="ico-play">2.5萬</em>
                      <em class="fr">2021-09-30</em>
                    </div>
                    <div class="mask">
                      <span class="mask-play-ico"></span>
                    </div>
                  </div>
                  <div class="video-tit">2018 TGA LYG VS sViper set 3</div>
                </li>
              </ul>
            </div>
            <div class="skin_center">
              <div class="item_header">
                <h3 class="item_title kpl">KPL賽事</h3>
                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" more_btn">更多</a>
              </div>
              <div class="item_subnav sub4">
                <a href="">時間</a>
                <a href="">戰隊</a>
                <a href="">戰隊</a>
              </div>
              <ul class="item_content">
                <li>
                  <span class="match_time">10-1 15:00</span>
                  <span class="team_name"
                    ><img src="./img/s2.png" class="team_name_icon" />
                    <em>南京Hero久競</em>
                  </span>
                  <span class="vs">VS</span>
                  <span class="team_name"
                    ><img src="./img/s3.png" class="team_name_icon" />
                    <em>長沙TES.A</em>
                  </span>
                </li>
                <li>
                  <span class="match_time">10-1 15:00</span>
                  <span class="team_name"
                    ><img src="./img/s2.png" class="team_name_icon" />
                    <em>南京Hero久競</em>
                  </span>
                  <span class="vs">VS</span>
                  <span class="team_name"
                    ><img src="./img/s3.png" class="team_name_icon" />
                    <em>長沙TES.A</em>
                  </span>
                </li>
                <li>
                  <span class="match_time">10-1 15:00</span>
                  <span class="team_name"
                    ><img src="./img/s2.png" class="team_name_icon" />
                    <em>南京Hero久競</em>
                  </span>
                  <span class="vs">VS</span>
                  <span class="team_name"
                    ><img src="./img/s3.png" class="team_name_icon" />
                    <em>長沙TES.A</em>
                  </span>
                </li>
              </ul>
              <img src="./img/s1.jpg" alt="" />
            </div>
          </div>
        </div>
        <div class="foot">
          <div class="main_container">
            <div class="foot_top">
              <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" foot_ieg_logo"></a>
              <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" foot_ieg_logo1"></a>
            </div>
            <div class="foot_bottom">
              <div class="b_left">
                <p>
                  <em>抵制不良遊戲</em>
                  <em>拒絕盜版遊戲</em>
                  <em>注意自我保護</em>
                  <em>謹防受騙上當</em>
                  <em>適度遊戲益腦</em>
                  <em>沉迷遊戲傷身</em>
                  <em>合理安排時間</em>
                  <em>享受健康生活</em>
                </p>
                <p class="intro">
                  《王者榮耀》全部背景故事發生於架空世界「王者大陸」中。相關人物、地理、事件均為藝術創作，並非正史。若因觀看王者故事對相關歷史人物產生興趣，建議查閱正史記載。
                </p>
              </div>
              <div class="b_right">
                <li class="link_map">
                  <a>騰訊互動娛樂</a>
                  <span class="f_line">|</span>
                  <a>服務條款</a>
                  <span class="f_line">|</span>
                  <a>隱私保護指引</a>
                  <span class="f_line">|</span>
                  <a>兒童隱私保護指引</a>
                  <span class="f_line">|</span>
                  <a>騰訊遊戲招聘</a>
                  <span class="f_line">|</span>
                  <a>騰訊遊戲客服</a>
                  <span class="f_line">|</span>
                  <a>遊戲列表</a>
                  <span class="f_line">|</span>
                  <a>廣告服務及商務合作</a>
                </li>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 側欄 固定 -->
      <div class="r_nav">
        <div class="r_dj">
          <span>下載王者營地每天領福利~</span>
        </div>
        <ul class="r_con">
          <li class="r_code">
            <img src="./img/r_code.jpg" alt="" />
          </li>
          <li class="r_burst">
            <div class="r_child">
              <img src="./img/weibo.jpg" alt="" />
              <p>
                掃碼
                <span>關注官方微博</span>
                <br />
                獲取
                <span>一手爆料及福利</span>
              </p>
            </div>
          </li>
          <li class="wechat">
            <div class="r_child">
              <img src="./img/weibo.jpg" alt="" />
              <p>
                掃碼
                <span>關注官方公眾號</span>
                <br />
                獲取
                <span>最新資訊及好禮</span>
              </p>
            </div>
          </li>
          <li class="r_wc_sph">
            <div class="r_child">
              <img src="./img/weibo.jpg" alt="" />
              <p>
                掃碼<span>關注官方視訊號</span><br />獲取<span
                  >精彩視訊及福利</span
                >
              </p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/swiper.js"></script>
    <script src="./js/index.js"></script>
  </body>
</html>

到此這篇關於jQuery + html + css 實現王者榮耀官網首頁的文章就介紹到這了,更多相關jquery王者榮耀官網首頁內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

jQuery + html + css 實現王者榮耀官網首頁效果 附範例程式碼

熱門文章

jQuery + html + css 實現王者榮耀官網首頁效果附範例程式碼