jQuery + html + css 实现王者荣耀官网首页
Posted 岁月可贵
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery + html + css 实现王者荣耀官网首页相关的知识，希望对你有一定的参考价值。
访问地址
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;
以上是关于jQuery + html + css 实现王者荣耀官网首页的主要内容，如果未能解决你的问题，请参考以下文章