网页设计狂魔6
私信获取源码及源文件
部分代码展示
<!doctype html>
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
<!-- Place favicon.ico in the root directory -->
<!-- CSS here -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/flaticon.css">
<link rel="stylesheet" href="css/odometer.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<!-- preloader -->
<div id="preloader">
<div id="loading-center">
<div id="loading-center-absolute">
<img src="img/preloader.svg" alt="">
</div>
</div>
</div>
<!-- preloader-end -->
<!-- Scroll-top -->
<button class="scroll-top scroll-to-target" data-target="html">
<i class="fas fa-angle-up"></i>
</button>
<!-- Scroll-top-end-->
<!-- header-area -->
<header class="header-style-two">
<div class="header-top-wrap">
<div class="container custom-container">
<div class="row align-items-center">
<div class="col-md-6 d-none d-md-block">
<div class="header-top-subs">
<p>Movflx One Month Free <span>Subscription !</span></p>
</div>
</div>
<div class="col-md-6">
<div class="header-top-link">
<ul class="quick-link">
<li><a href="#">About Us</a></li>
<li><a href="#">FAQS</a></li>
</ul>
<ul class="header-social">
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-vimeo-v"></i></a></li>
<li><a href="#"><i class="fab fa-dribbble"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="sticky-header" class="menu-area">
<div class="container custom-container">
<div class="row">
<div class="col-12">
<div class="mobile-nav-toggler"><i class="fas fa-bars"></i></div>
<div class="menu-wrap">
<nav class="menu-nav show">
<div class="logo">
<a href="index.html">
<img src="img/logo/logo.png" alt="Logo">
</a>
</div>
<div class="navbar-wrap main-menu d-none d-lg-flex">
<ul class="navigation">
<li class="active menu-item-has-children"><a href="#">设定</a>
<ul class="submenu">
<li class="active"><a href="index.html">背景设定</a></li>
<li><a href="index-2.html">角色设定</a></li>
</ul>
</li>
<li class="menu-item-has-children"><a href="#"> 特色</a>
<ul class="submenu">
<li><a href="movie.html">物品道具</a></li>
<li><a href="movie-details.html">场景地图</a></li>
</ul>
</li>
<li><a href="tv-show.html">武器品质</a></li>
<li><a href="pricing.html">磨损程度</a></li>
<li class="menu-item-has-children"><a href="#">武器装备</a>
<ul class="submenu">
<li><a href="blog.html">主武器</a></li>
<li><a href="blog-details.html">特殊装备</a></li>
</ul>
</li>
</ul>
</div>
<div class="header-action d-none d-md-block">
<ul>
<li class="d-none d-xl-block">
<div class="footer-search">
<form action="#">
<input type="text" placeholder="查看更多游戏资讯">
<button><i class="fas fa-search"></i></button>
</form>
</div>
</li>
<li class="header-lang">
</li>
<li class="header-btn"><a href="#" class="btn">Sign In</a></li>
</ul>
</div>
</nav>
</div>
<!-- Mobile Menu -->
<div class="mobile-menu">
<div class="close-btn"><i class="fas fa-times"></i></div>
<nav class="menu-box">
<div class="nav-logo"><a href="index.html"><img src="img/logo/logo.png" alt="" title=""></a>
</div>
<div class="menu-outer">
<!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header-->
</div>
<div class="social-links">
<ul class="clearfix">
<li><a href="#"><span class="fab fa-twitter"></span></a></li>
<li><a href="#"><span class="fab fa-facebook-square"></span></a></li>
<li><a href="#"><span class="fab fa-pinterest-p"></span></a></li>
<li><a href="#"><span class="fab fa-instagram"></span></a></li>
<li><a href="#"><span class="fab fa-youtube"></span></a></li>
</ul>
</div>
</nav>
</div>
<div class="menu-backdrop"></div>
<!-- End Mobile Menu -->
</div>
</div>
</div>
</div>
</header>
<!-- header-area-end -->
<!-- main-area -->
<main>
<!-- slider-area -->
<section class="slider-area slider-bg" data-background="img/banner/s_slider_bg.jpg">
<div class="slider-active">
<div class="slider-item">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 order-0 order-lg-2">
<div class="slider-img text-center text-lg-right" data-animation="fadeInRight" data-delay="1s">
<img src="img/banner/slider_img01.jpg" alt="">
</div>
</div>
<div class="col-lg-6">
<div class="banner-content">
<h6 class="sub-title" data-animation="fadeInUp" data-delay=".2s">角色设定</h6>
<h2 class="title" data-animation="fadeInUp" data-delay=".4s">每局对战随机阵营,玩家可以选择己方阵营下的角色,部分角色需要通过解锁。</h2>
<div class="banner-meta" data-animation="fadeInUp" data-delay=".6s">
<ul>
</li>
</ul>
</div>
<a href="#" class="banner-btn btn popup-video" data-animation="fadeInUp" data-delay=".8s"><i class="fas fa-play"></i>反恐精英</a>
</div>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 order-0 order-lg-2">
<div class="slider-img text-center text-lg-right" data-animation="fadeInRight" data-delay="1s">
<img src="img/banner/slider_img02.jpg" alt="">
</div>
</div>
<div class="col-lg-6">
<div class="banner-content">
<h6 class="sub-title" data-animation="fadeInUp" data-delay=".2s">恐怖分子</h6>
<h2 class="title" data-animation="fadeInUp" data-delay=".4s">凤凰恐怖组织是东欧最为恶名昭彰的恐怖分子组织之一</h2>
<div class="banner-meta" data-animation="fadeInUp" data-delay=".6s">
<ul>
</li>
</ul>
</div>
<a href="#" class="banner-btn btn popup-video" data-animation="fadeInUp" data-delay=".8s"><i class="fas fa-play"></i>凤凰战士</a>
</div>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 order-0 order-lg-2">
<div class="slider-img text-center text-lg-right" data-animation="fadeInRight" data-delay="1s">
<img src="img/banner/slider_img03.jpg" alt="">
</div>
</div>
<div class="col-lg-6">
<div class="banner-content">
<h6 class="sub-title" data-animation="fadeInUp" data-delay=".2s">分离主义者</h6>
<h2 class="title" data-animation="fadeInUp" data-delay=".4s">这支在欧洲由少数派份子构成的组织为达成其民族展望而强烈争取自决权</h2>
<div class="banner-meta" data-animation="fadeInUp" data-delay=".6s">
<ul>
</li>
</ul>
</div>
<a href="#" class="banner-btn btn popup-video" data-animation="fadeInUp" data-delay=".8s"><i class="fas fa-play"></i>分离主义者</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- slider-area-end -->
<!-- up-coming-movie-area -->
<section class="ucm-area ucm-bg2" data-background="img/bg/ucm_bg02.jpg">
<div class="container">
<div class="row align-items-end mb-55">
<div class="col-lg-6">
<div class="section-title title-style-three text-center text-lg-left">
<span class="sub-title">海盗(PIRATE)</span>
<h2 class="title">非洲角的现代海盗宣称他们的行为代表着「行使领海自卫」</h2>
</div>
</div>
<div class="col-lg-6">
<div class="ucm-nav-wrap">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="tvShow-tab" data-toggle="tab" href="#tvShow" role="tab" aria-controls="tvShow" aria-selected="true">军规级(高级)</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="movies-tab" data-toggle="tab" href="#movies" role="tab" aria-controls="movies" aria-selected="false">受限级(卓越)</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="anime-tab" data-toggle="tab" href="#anime" role="tab" aria-controls="anime" aria-selected="false">保密级(奇异)</a>
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="tvShow" role="tabpanel" aria-labelledby="tvShow-tab">
<div class="ucm-active-two owl-carousel">
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster01.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">违禁级</a></h5>
<span class="rel">黄色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster02.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">极其稀有</a></h5>
<span class="rel">红色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster03.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">违禁级</a></h5>
<span class="rel">黄色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster04.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">极其稀有</a></h5>
<span class="rel">红色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster05.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">保密级(奇异)</a></h5>
<span class="rel">粉红色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster06.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">违禁级</a></h5>
<span class="rel">黄色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="movies" role="tabpanel" aria-labelledby="movies-tab">
<div class="ucm-active-two owl-carousel">
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster06.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">极其稀有</a></h5>
<span class="rel">红色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster07.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">保密级(奇异)</a></h5>
<span class="rel">粉红色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster08.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">违禁级</a></h5>
<span class="rel">黄色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster09.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">保密级(奇异)</a></h5>
<span class="rel">粉红色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster02.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">违禁级</a></h5>
<span class="rel">黄色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster01.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">极其稀有</a></h5>
<span class="rel">红色(所有匕首武器皮肤)</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="anime" role="tabpanel" aria-labelledby="anime-tab">
<div class="ucm-active-two owl-carousel">
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster01.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">隐秘级</a></h5>
<span class="rel">红色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster02.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">保密级(奇异)</a></h5>
<span class="rel">粉红色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster03.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">受限级(卓越)</a></h5>
<span class="rel">紫色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster04.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">军规级(高级)</a></h5>
<span class="rel">深蓝色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster05.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">工业级</a></h5>
<span class="rel">天蓝色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
<div class="movie-item movie-item-two mb-30">
<div class="movie-poster">
<a href="movie-details.html"><img src="img/poster/s_ucm_poster06.jpg" alt=""></a>
</div>
<div class="movie-content">
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h5 class="title"><a href="movie-details.html">消费级</a></h5>
<span class="rel">白色</span>
<div class="movie-content-bottom">
<ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- up-coming-movie-area-end -->
<!-- gallery-area -->
<div class="gallery-area position-relative">
<div class="gallery-bg"></div>
<div class="container-fluid p-0 fix">
<div class="row gallery-active">
<div class="col-12">
<div class="gallery-item">
<img src="img/images/gallery_01.jpg" alt="">
</div>
</div>
<div class="col-12">
<div class="gallery-item">
<img src="img/images/gallery_02.jpg" alt="">
</div>
</div>
<div class="col-12">
<div class="gallery-item">
<img src="img/images/gallery_03.jpg" alt="">
</div>
</div>
<div class="col-12">
<div class="gallery-item">
<img src="img/images/gallery_04.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="slider-nav"></div>
</div>
<!-- gallery-area-end -->
<!-- services-area -->
<section class="services-area services-bg-two" data-background="img/bg/services_bg02.jpg">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-lg-6 order-0 order-lg-2">
<div class="services-img-wrap">
<img src="img/images/services_img02.jpg" alt="">
</div>
</div>
<div class="col-xl-5 col-lg-6">
<div class="services-content-wrap">
<div class="section-title mb-40">
<span class="sub-title">高级、卓越、奇异均为武器标签的品质</span>
<h2 class="title">武器品质不会改变枪的外观和攻击力,只会改变武器的颜色,让枪支变得更加美观。</h2>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- services-area-end -->
<div class="copyright-wrap">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="copyright-text">
<p>Counter-Strike: Global Offensive<a target="_blank" href="https://www.csgo.com.cn/main.html">反恐精英全球攻势</a></p>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="payment-method-img text-center text-md-right">
<img src="img/images/card_img.png" alt="img">
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- footer-area-end -->
<!-- JS here -->
<script src="js/vendor/jquery-3.6.0.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.odometer.min.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/ajax-form.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>