蓝色大气风格的VR科技创新企业网站源码下载



5 19 7



模板描述:蓝色大气风格 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:;">&#xe667;</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&emsp;→</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&emsp;→</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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 网络科技 科技公司 网络科技公司 IT公司 网络公司 软件公司 IT软件公司 蓝色 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 宽屏 全屏 满屏

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到