模板描述：蓝色大气风格 VR科技创新 企业网站，蓝色大气风格的VR科技创新企业网站源码下载html模板下载
代码结构
1. 引入CSS
<link rel="stylesheet" href="hui/css/hui.min.css"> <link rel="stylesheet" href="hui/fonts/iconfont.min.css"> <link rel="stylesheet" href="css/iconfont.css"> <link rel="stylesheet" href="hui/css/animate.min.css"> <link rel="stylesheet" href="hui/css/swiper.min.css"> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/index.css">
2. 引入JS
<script type="text/javascript" src="hui/js/html5shiv.js"></script> <script type="text/javascript" src="hui/js/respond.min.js"></script> <script src="hui/js/jquery-1.11.3.min.js"></script> <script src="hui/js/swiper.min.js"></script> <script src="hui/js/wow.min.js"></script> <script src="js/slide.js"></script> <script src="js/main.js"></script>
3. HTML代码
<header class="navbar-wrapper cl">
<div class="navbar">
<div class="container cl">
<a class="logo navbar-logo f-l mr-10" href="index.html">
<img src="img/logo.png" alt="">
</a>
<a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:;"></a>
<nav class="nav navbar-nav nav-collapse f-r" role="navigation" id="Hui-navbar">
<ul class="cl">
<li class="current">
<a href="index.html">首页</a>
</li>
<li>
<a href="sevice.html">产品服务</a>
</li>
<li>
<a href="solution.html">解决方案</a>
</li>
<li>
<a href="case.html">成功案例</a>
</li>
<li>
<a href="news.html">新闻中心</a>
</li>
<li>
<a href="about.html">关于我们</a>
</li>
</ul>
</nav>
<nav class="navbar-userbar hidden-xs">
</nav>
</div>
</div>
</header>
<section>
<div class="swiper-container vr_banner">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="">
<img src="img/banner.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="">
<img src="img/banner.jpg" alt="">
</a>
</div>
</div>
<div class="swiper-pagination vr_banner_pages"></div>
</div>
</section>
<section class="container vr_demo">
<div class="vr_title wow bounceInDown">
<h2>免费开发DEMO</h2>
<p>只需5000元押金即可体验崭新世界</p>
</div>
<div class="row vr_demo_row cl wow bounceInUp">
<div class="col-2 col-xs-12">
<div class="vr_demo_item">
<div class="vr_item_tip">1</div>
<div class="vr_item_label">
<i class="vr_icon vr_icon_1"></i>
<h3>建立联系</h3>
<p>加我们微信</p>
<p>150-0015-9790</p>
</div>
</div>
</div>
<div class="col-2 col-xs-12">
<div class="vr_demo_item">
<div class="vr_item_tip">2</div>
<div class="vr_item_label">
<i class="vr_icon vr_icon_2"></i>
<h3>索取案例</h3>
<p>我们会提供给您超过</p>
<p>30个HoloLens产品</p>
</div>
</div>
</div>
<div class="col-2 col-xs-12">
<div class="vr_demo_item">
<div class="vr_item_tip">3</div>
<div class="vr_item_label">
<i class="vr_icon vr_icon_3"></i>
<h3>定制DEMO</h3>
<p>选择类似案例</p>
<p>提交5000押金</p>
<p>定制开发DEMO</p>
</div>
</div>
</div>
<div class="col-2 col-xs-12">
<div class="vr_demo_item">
<div class="vr_item_tip">4</div>
<div class="vr_item_label">
<i class="vr_icon vr_icon_4"></i>
<h3>体验新世界</h3>
<p>如果您对DEMO满意，我们将开始洽谈正式项目，提供时间估算和报价</p>
</div>
</div>
</div>
<div class="col-2 col-xs-12">
<div class="vr_demo_item">
<div class="vr_item_tip">5</div>
<div class="vr_item_label">
<i class="vr_icon vr_icon_5"></i>
<h3>正式开发</h3>
<p>进行正式项目开发</p>
<p>并退回5000押金</p>
</div>
</div>
</div>
</div>
</section>
<section class="vr_case">
<div class="vr_title vr_title_white wow bounceInDown">
<h2>解决方案</h2>
<p>
<span>SOLUTIONS</span>
</p>
</div>
<div class="swiper-container vr_slide vr_scale wow bounceInUp">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="">
<img src="img/slide-1.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="">
<img src="img/slide-1.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="">
<img src="img/slide-1.jpg" alt="">
</a>
</div>
</div>
<div class="vr_slide_btn">
<div class="swiper-button-prev vr_slide_prev">
<i class="vrfont vr-fanhui"></i>
</div>
<div class="swiper-button-next vr_slide_next">
<i class="vrfont vr-gengduo1"></i>
</div>
</div>
</div>
</section>
<section class="vr_news">
<div class="vr_title wow bounceInDown">
<h2>新闻中心</h2>
<p>
<span>CASE APPRECIATION</span>
</p>
</div>
<div class="vr_news_tab">
<button class="active wow bounceInRight" type="button">公司新闻</button><button class="wow bounceInLeft" type="button">行业动态</button>
</div>
<div class="container vr_news_content">
<div class="row cl">
<div class="col-xs-12 col-sm-6 wow bounceInLeft">
<dl class="vr_news_list">
<dt class="cl">
<div class="vr_news_img l">
<img src="img/news.jpg" alt="">
</div>
<div class="vr_news_text r">
<h2>vr之家-领先的虚拟现实网站1</h2>
<p>2015年7月3日，防火涂料行业标杆企业 福建南烽防火科技有限公司 提前顺利通过了中......</p>
<a class="btn" href="#">查看</a>
</div>
</dt>
<dd>
<a href="#">热烈祝贺中国“南烽一号”被认定为国内领先！<span class="r">2018-09-14</span></a>
</dd>
<dd>
<a href="#">热烈祝贺中国“南烽一号”被认定为国内领先！<span class="r">2018-09-14</span></a>
</dd>
<dd>
<a href="#">热烈祝贺中国“南烽一号”被认定为国内领先！<span class="r">2018-09-14</span></a>
</dd>
</dl>
</div>
<div class="col-xs-12 col-sm-6 wow bounceInRight">
<div class="vr_news_mask">
<img src="img/news-banner.jpg" alt="">
<p>VR全景</p>
</div>
</div>
<p class="text-c"><a class="btn btn_more wow bounceInUp" href="#">MORE →</a></p>
</div>
<div class="row cl dis_n">
<div class="col-xs-12 col-sm-6 wow bounceInLeft">
<dl class="vr_news_list">
<dt class="cl">
<div class="vr_news_img l">
<img src="img/news.jpg" alt="">
</div>
<div class="vr_news_text r">
<h2>vr之家-领先的虚拟现实网站2</h2>
<p>2015年7月3日，防火涂料行业标杆企业 福建南烽防火科技有限公司 提前顺利通过了中......</p>
<a class="btn" href="#">查看</a>
</div>
</dt>
<dd>
<a href="#">热烈祝贺中国“南烽一号”被认定为国内领先！<span class="r">2018-09-14</span></a>
</dd>
<dd>
<a href="#">热烈祝贺中国“南烽一号”被认定为国内领先！<span class="r">2018-09-14</span></a>
</dd>
<dd>
<a href="#">热烈祝贺中国“南烽一号”被认定为国内领先！<span class="r">2018-09-14</span></a>
</dd>
</dl>
</div>
<div class="col-xs-12 col-sm-6 wow bounceInRight">
<div class="vr_news_mask">
<img src="img/news-banner.jpg" alt="">
<p>VR全景</p>
</div>
</div>
<p class="text-c"><a class="btn btn_more wow bounceInUp" href="#">MORE →</a></p>
</div>
</div>
</section>
<section class="vr_case vr_case_app">
<div class="vr_title vr_title_white wow bounceInDown">
<h2>成功案例</h2>
<p>
<span>CASE APPRECIATION</span>
</p>
</div>
<div class="swiper-container vr_case_slide wow bounceInUp">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/banner-case.jpg" alt="">
<div class="slide_text">
<p>[vr游戏-梦回圆明园]</p>
<a href="#">了解更多</a>
</div>
</div>
<div class="swiper-slide">
<img src="img/banner-case.jpg" alt="">
<div class="slide_text">
<p>[vr游戏-梦回圆明园]</p>
<a href="#">了解更多</a>
</div>
</div>
<div class="swiper-slide">
<img src="img/banner-case.jpg" alt="">
<div class="slide_text">
<p>[vr游戏-梦回圆明园]</p>
<a href="#">了解更多</a>
</div>
</div>
</div>
<div class="swiper-button-prev vr_case_prev">
<i class="vrfont vr-fanhui"></i>
</div>
<div class="swiper-button-next vr_case_next">
<i class="vrfont vr-gengduo1"></i>
</div>
</div>
</section>
<footer>
<div class="container footer">
<div class="footer_list cl wow bounceInUp">
<a href="#">首页</a>
<a href="#">产品服务</a>
<a href="#">解决方案</a>
<a href="#">成功案例</a>
<a href="#">新闻中心</a>
<div class="r">
<a href="#"><i class="vrfont vr-sina"></i></a>
<a href="#"><i class="vrfont vr-qq"></i></a>
<a href="#"><i class="vrfont vr-weixin"></i></a>
</div>
</div>
<div class="container wow bounceInUp">
<div class="row cl footer_text">
<div class="col-sm-4 col-xs-12">
<p>新光科技有限公司</p>
<p><span>客服电话：000-666666</span></p>
</div>
<div class="col-sm-4 col-xs-12">
<p>地址</p>
<p><span>北京海淀区xxxxx</span></p>
</div>
<div class="col-sm-4 col-xs-12 cl">
<img class="r" src="img/ewm.jpg" alt="">
<span class="r">关注我们</span>
</div>
</div>
</div>
</div>
<div class="copyright wow bounceInUp">
<div class="container">CopyRight© 2018新光科技有限公司All Rights Reserved</div>
</div>
</footer>
<script>new WOW().init();</script>
