目录

一、前言

二、网页文件

三、网页效果

四、代码展示

1.HTML

2.CSS

3.JS

五、更多推荐

一、前言

大气的VR科技创新企业网页实例,应用html+css+js,自适应响应式网页,该实例模板适用于公司网站制作,大学生课程作业设计等,供大家参考。网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板,DW网页成品源代码等,2000+套Web案例源码,优质文章,关注作者获取更多源码,点赞收藏博文,您的支持是我创作的动力!3Q!

二、网页文件

三、网页效果

以下为网页正文(节选示例):

四、代码展示

1.HTML

代码如下(节选示例):

                    新光VR                                

   

   

       
           
               
                                            javascript 课程设计 bootstrap html5 java 123. web前端 大学生期末作业 高端大气的VR科技创新企业网页 网页制作html+css+js  第2张                                    
               
                                            javascript 课程设计 bootstrap html5 java 123. web前端 大学生期末作业 高端大气的VR科技创新企业网页 网页制作html+css+js  第2张                                    
           
           
       
   

   

       
           

免费开发DEMO

           

只需5000元押金即可体验崭新世界

       
       
           
               
                   
1
                   
                                               

建立联系

                       

加我们微信

                       

150-0015-9790

                   
               
           
           
               
                   
2
                   
                                               

索取案例

                       

我们会提供给您超过

                       

30个HoloLens产品

                   
               
           
           
               
                   
3
                   
                                               

定制DEMO

                       

选择类似案例

                       

提交5000押金

                       

定制开发DEMO

                   
               
           
           
               
                   
4
                   
                                               

体验新世界

                       

如果您对DEMO满意,我们将开始洽谈正式项目,提供时间估算和报价

                   
               
           
           
               
                   
5
                   
                                               

正式开发

                       

进行正式项目开发

                       

并退回5000押金

                   
               
           
       
   

   

       
           

解决方案

           

                SOLUTIONS            

       
       
           
               
                                            javascript 课程设计 bootstrap html5 java 123. web前端 大学生期末作业 高端大气的VR科技创新企业网页 网页制作html+css+js  第4张                                    
               
                                            javascript 课程设计 bootstrap html5 java 123. web前端 大学生期末作业 高端大气的VR科技创新企业网页 网页制作html+css+js  第4张                                    
               
                                            javascript 课程设计 bootstrap html5 java 123. web前端 大学生期末作业 高端大气的VR科技创新企业网页 网页制作html+css+js  第4张                                    
           
           
               
                                   
               
                                   
           
       
   

   

       
           

新闻中心

           

                CASE APPRECIATION            

       
       
                   
       
           
               
                   
                       
                           
                                javascript 课程设计 bootstrap html5 java 123. web前端 大学生期末作业 高端大气的VR科技创新企业网页 网页制作html+css+js  第7张                            
                           
                               

vr之家-领先的虚拟现实网站1

                               

2015年7月3日,防火涂料行业标杆企业 福建南烽防火科技有限公司 提前顺利通过了中......

                                查看                            
                       
                       
                            热烈祝贺中国“南烽一号”被认定为国内领先!2018-09-14                        
                       
                            热烈祝贺中国“南烽一号”被认定为国内领先!2018-09-14                        
                       
                            热烈祝贺中国“南烽一号”被认定为国内领先!2018-09-14                        
                   
               
               
                   
                        javascript 课程设计 bootstrap html5 java 123. web前端 大学生期末作业 高端大气的VR科技创新企业网页 网页制作html+css+js  第8张                        

VR全景

                   
               
               

MORE →

           
           
               
                   
                       
                           
                                javascript 课程设计 bootstrap html5 java 123. web前端 大学生期末作业 高端大气的VR科技创新企业网页 网页制作html+css+js  第7张                            
                           
                               

vr之家-领先的虚拟现实网站2

                               

2015年7月3日,防火涂料行业标杆企业 福建南烽防火科技有限公司 提前顺利通过了中......

                                查看                            
                       
                       
                            热烈祝贺中国“南烽一号”被认定为国内领先!2018-09-14                        
                       
                            热烈祝贺中国“南烽一号”被认定为国内领先!2018-09-14                        
                       
                            热烈祝贺中国“南烽一号”被认定为国内领先!2018-09-14                        
                   
               

......

2.CSS

代码如下(节选示例):

@charset "utf-8"; .vr_sevice {     margin-top: 75px;     margin-bottom: 75px; }

.vr_sevice_text p {     font-size: 18px;     color: #333;     line-height: 4; }

.vr_btn_sevice {     padding: 10px 40px;     font-size: 14px;     color: #666;     border: 1px solid #dcdcdc; }

.vr_btn_sevice:hover {     background: #8ba0cd;     border-color: #8ba0cd;     color: #fff; }

.vr_solu_row {     padding-bottom: 100px;     margin-bottom: 100px;     border-bottom: 1px solid #eee;     overflow: hidden; }

.vr_solu_row h2 {     font-size: 24px;     color: #333;     padding: 0 0 20px;     position: relative; }

.vr_solu_row h2::after {     content: "";     display: block;     width: 2.5em;     height: 4px;     background: #6d80bc;     position: absolute;     left: 0;     bottom: 0; }

.vr_solu_row p {     font-size: 14px;     color: #666;     line-height: 34px;     overflow: hidden;     text-overflow: ellipsis;     display: -webkit-box;     -webkit-line-clamp: 3;     -webkit-box-orient: vertical;     margin: 30px 0 50px; }

.vr_sevice .vr_solu_row:last-child {     margin-bottom: 0;     border-bottom: none;     padding-bottom: 50px; }

.vr_case_search {     margin: 60px auto; }

.vr_search {     border: 1px solid #e0e0e0;     border-radius: 5px;     font-size: 16px;     padding: 0; }

.vr_search input {     width: 90%;     height: 40px;     border: none;     float: left;     padding-left: 15px;     -webkit-box-sizing: border-box;     box-sizing: border-box; }

.vr_search button {     width: 10%;     height: 40px;     border: none;     background: transparent;     float: right;     cursor: pointer; }

.vr_case_tip {     -webkit-box-shadow: 0 5px 15px #f8f8f8;     box-shadow: 0 5px 15px #f8f8f8;     margin-bottom: 65px;     padding-bottom: 35px; }

.vr_case_tip a {     font-size: 16px;     color: #333;     margin: 0 25px;     padding-bottom: 10px;     border-bottom: 2px solid transparent;     display: inline-block; }

@media (max-width:767px){     .vr_case_tip a{         font-size: 12px;         margin-bottom: 10px;     } }

.vr_case_tip a:hover, .vr_case_tip a.active {     color: #5477ba;     border-color: #5477ba; }

.vr_case_item {     background: #fafaf9; }

.vr_case_text {     padding: 45px 20px 60px; }

.vr_case_text h3 {     font-size: 22px;     color: #333; }

.vr_case_text p {     font-size: 14px;     color: #666;     line-height: 30px;     margin: 30px 0 50px;     width: 70%;     overflow: hidden;     text-overflow: ellipsis;     display: -webkit-box;     -webkit-line-clamp: 4;     -webkit-box-orient: vertical; }

.btn_more {     padding: 5px 15px;     border: 1px solid #aaa;     font-size: 18px;     color: #333; }

.btn_more i {     color: inherit;     font-size: inherit;     margin-right: 10px; }

.btn_more:hover {     background: #8ba0cd;     color: #fff;     border-color: #8ba0cd; }

.btn_more.none{     background: #ccc;     color: #fff;     border-color: #ccc;     cursor: no-drop; }

.vr_news_tab {     width: 100%;     text-align: center;     margin-bottom: 50px;     overflow: hidden; }

.vr_news_tab button {     padding: 10px 30px;     background: #fff;     border: 1px solid #6d80bc;     color: #333;     border-radius: 5px;     font-size: 18px;     cursor: pointer; }

.vr_news_tab button:hover, .vr_news_tab button.active {     background: #6d80bc;     color: #fff; }

.vr_news_item {     background: #f7f7f7;     padding: 15px 5px;     -webkit-transition: all 0.3s;     transition: all 0.3s; }

.vr_news_item:hover {     -webkit-box-shadow: 0 5px 15px #eee;     box-shadow: 0 5px 15px #eee; }

.vr_news_item a:hover h2 {     color: #6d80bc; }

.vr_news_item a .ver-more_circle:before {     color: #666; }

.vr_news_item a:hover .vr-more_circle:before {     content: "\e691";     color: #6d80bc; }

.vr_news_item h2 {     font-size: 16px;     color: #333;     padding: 20px 0; }

.vr_news_item p {     font-size: 14px;     color: #666;     overflow: hidden;     text-overflow: ellipsis;     display: -webkit-box;     -webkit-line-clamp: 2;     -webkit-box-orient: vertical; }

.vr_news_item h3 {     text-align: right;     font-size: 16px;     padding: 20px 0;     color: #a0a0a0; }

.vr_news_item i {     font-size: 26px;     float: right; }

.vr_about h2 {     margin: 30px auto;     font-size: 34px;     color: #333;     font-weight: normal; }

.vr_about p {     font-size: 16px;     color: #333;     line-height: 2; }

.vr_about_1 {     padding-bottom: 100px;     border-bottom: 1px solid #ddd; }

.vr_about h3 {     font-size: 34px;     color: #333;     font-weight: normal;     margin: 100px auto; }

.vr_about_2>div {     padding: 60px 0;     border: 1px solid #ddd; }

.vr_about_2 i {     display: inline-block;     width: 85px;     height: 85px; }

.icon_1 {     background: url(../img/about-1.png) 0 0 no-repeat; }

.icon_2 {     background: url(../img/about-2.png) 0 0 no-repeat; }

.icon_3 {     background: url(../img/about-3.png) 0 0 no-repeat; }

.icon_4 {     background: url(../img/about-4.png) 0 0 no-repeat; }

.vr_about_3 {     margin-top: 100px; }

.vr_about_4 {     margin: 100px auto; }

.vr_about_item {     text-align: left;     padding: 0 20px;     height: 100px;     -webkit-box-sizing: border-box;     box-sizing: border-box;     color: #fff; }

.vr_about_item h4 {     font-size: 24px; }

.vr_about_item p {     color: #fff;     font-size: 14px; }

.bg-1 {     background: #edad2c;     border: none !important; }

.bg-2 {     background: #d66464;     border: none !important; }

.bg-3 {     background: #32b1b6;     border: none !important; }

.bg-4 {     background: #95c373;     border: none !important; }

.vr_job_box>div {     padding: 0;     border: none;     text-align: left;     margin-bottom: 100px; }

.vr_job img {     margin-bottom: 40px; }

.vr_job p {     -webkit-box-sizing: border-box;     box-sizing: border-box;     padding-left: 20px; }

.vr_detail {     background: #fff;     margin-top: -300px;     padding: 85px 50px 150px;     overflow: hidden;     position: relative;     z-index: 99; }

.vr_detail h1 {     font-size: 36px;     color: #333;     font-weight: normal;     text-align: center; }

.vr_detail h2 {     text-align: center;     margin: 30px auto 100px; }

.vr_detail h2 span {     font-size: 14px;     color: #666;     margin: 0 25px; }

article p {     font-size: 16px;     color: #666;     margin-bottom: 30px;     line-height: 2;     position: relative; }

@media (max-width: 767px) {     .vr_detail {         margin-top: -100px;     } }

......

3.JS

代码如下(节选示例):

$(function() {     var banner = new Swiper('.vr_banner', {         direction: 'horizontal',         loop: false,         autoplay: 3000,         paginationClickable: true,         pagination: '.vr_banner_pages'     });     var caseApp = new Swiper('.vr_case_slide', {         direction: 'horizontal',         loop: false,         // autoplay: 3000,         // paginationClickable: true,         prevButton: '.vr_case_prev',         nextButton: '.vr_case_next',     });     var slide;     slideView(slide);     // $(window).resize(function () {     //     slideView(slide);     // }); });

function slideView(slide) {     if ($(window).width() < 768) {         $('.vr_slide').removeClass('vr_scale');         slide = new Swiper('.vr_slide', {             direction: 'horizontal',             initialSlide: 0,             loop: true,             slidesPerView: 1,             centeredSlides: true,             prevButton: '.vr_slide_prev',             nextButton: '.vr_slide_next',         });     } else {         $('.vr_slide').addClass('vr_scale');         slide = new Swiper('.vr_slide', {             direction: 'horizontal',             initialSlide: 1,             loop: true,             slidesPerView: 3,             centeredSlides: true,             prevButton: '.vr_slide_prev',             nextButton: '.vr_slide_next',         });     } }

......

五、更多推荐

 【关注作者|获取更多源码(2000+个网页源码)|优质文章】;您的支持是我创作的动力!看到这里就【点赞收藏博文】,三连支持下吧,3Q;关注我带您学习各种前端插件、整站模板、3D炫酷效果、图片展示、文字效果、大学生毕业HTML、期末大作业模板案例等;以上内容技术有兴趣的可以交流学习!更多优质博客文章、网页模板点击以下链接查阅:仙女网页设计-CSDN博客。

参考链接

评论可见,请评论后查看内容,谢谢!!!评论后请刷新页面。

发表评论