123. web前端大学生期末作业高端大气的VR科技创新企业网页网页制作html+css+js|电子爱好者

admin管理员组
文章数量:1616691

一、前言

二、网页文件

三、网页效果

四、代码展示

1.HTML

2.CSS

3.JS

五、更多推荐

一、前言

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

二、网页文件

三、网页效果

以下为网页正文（节选示例）：

四、代码展示

1.HTML

代码如下（节选示例）：

<!DOCTYPE html>
<html lang="zh-CN">

<body>

</nav>
</div>
</div>
</header>

<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>

......

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);
// });
});

......

五、更多推荐

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

本文标签：作业网页制作科技创新期末大气

版权声明：本文标题：123. web前端大学生期末作业高端大气的VR科技创新企业网页网页制作html+css+js 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：https://m.elefans.com/dongtai/1728742305a1171198.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

电子爱好者 - 最新技术资讯及电子产品介绍！

123. web前端 大学生期末作业 高端大气的VR科技创新企业网页 网页制作html+css+js

一、前言

二、网页文件

三、网页效果

四、代码展示

1.HTML

2.CSS

3.JS

五、更多推荐

更多相关文章

c语言知识总结（适合期末复习，初学入门，专升本备考）

SEU-系统安全-期末复习

UML作业总结

网络空间安全导论课程作业

计算机网络期末复习题

《计算机网络》期末复习（往年试题复习）

【渝粤题库】陕西师范大学100131大学英语（二） 作业 （高起本、高起专）

操作系统期末复习题（超级全）

MySQL数据库酒店客房管理系统（含MySQL源码） 结课作业 做的不是很好

《人机交互技术》结课作业：界面调研报告&amp;交互界面设计快速原型设计（华科软院）

工程数学第二次作业

【Spark】spark-submit作业提交及参数设定

2024全国特种作业操作证高处作业精选题练习

2024全国特种作业操作证高处作业备考模拟练习

华为云原生Kubernetes之运行Volcano高性能作业的深度使用和实践

作业收缴系统设计手册(自写开源小系统)

【开源软件开发导论作业-1】

第二次作业-Steam软件分析

软件过程与项目管理——第一周作业（2）

台式计算机的拆卸与组装作业,计算机组装与维护大作业-设计组装一台当前主流台式电脑.doc...

发表评论

推荐文章

H-Curious

webstrom 永久激活方法 ，长期可用

用U盘安装Linux时U盘启动没有指定路径的解决方法

红帽操作系统 RHEL 8.1 官方ISO镜像下载

游戏型计算机配置方案4000,高性价比游戏配置 4000元i5-7500配GTX1050Ti电脑配置推荐 (全文)...

热门文章

Linux下deb包和rpm包区别

Android 浏览器分辨率调整,让Android上的浏览器用设备实际像素打开你的网页

打开IE浏览器输入了网址自动跳转到Edge浏览器的解决方法

u盘数据删除或者移除了怎么办？冷静，恢复指南来帮你

SSD固态盘已坏的数据就恢复不了吗？

七个合法学习黑客技术的网站，让你从萌新成为大佬_黑客网

解决Photoshop保存图片找不到ICO格式问题：一款实用的开源解决方案

小米手机扩容教程_小米note手机扩容，16G升级64G

iOS问题记录 - Xcode 14安装低版本iOS模拟器（持续更新）

织梦dedecms自定义表单短信验证及手机验证插件效果演示

最新文章

手机更新找不到计算机,为什么手机更新换代这么快，电脑的更新却没有这么快呢...

5000配置一台游戏型计算机,开学装机：2020年如何配一台5000元主流配置的游戏主机？...

DIY台式电脑小白教程

计算机组装 项目教学,计算机组装与维护项目教学课程.doc

设计一个关于计算机硬件设备的海报,干货分享 | 写给设计师看的电脑配置攻略 ——【1】关于 PS...

ITX迷你主机的优点及缺点

深度学习（3090）装机

如何搭建一台深度学习的电脑工作站

基因测序、生物信息分析平台工作站硬件配置推荐2020

大学生选配个人计算机,大学生要怎样选一台合适自己的电脑？

如何配置一台深度学习主机？

家用计算机做raid 2018,让电脑速度翻倍的方法，手把手教你组建RAID！

如何组装一台自己最满意的电脑

计算机主机什么硬件组成,一台计算机电脑由什么组成,电脑的基础硬件有哪些！-电脑自学网...

Smart3D（ContextCapture）跑三维到底要啥配置？！40000元来组建建模集群

小米手机肿么还原时钟

15000流明是多少瓦

一般普通投影机功率多大?

苹果绿联转换器有些投影机不能用

坚果V9投影机具体参数?

有关九年级作文850字精选

80后90后_高一作文

中级卫生专业资格中医全科学主治医师中级模拟题2021年(9)案与解析

(精品)师范大学招考硕士研究生课程八六0试卷

ZXMVC8900(V3

【模拟人生4（The Sims 4）性感露背黑色亮片礼服MOD V20190313】模拟人生4（The Sims 4）性感露背黑色亮片礼服MOD V20190313 官方免费下载

【生化危机2：重制版（Resident Evil 2 Remake）克莱尔红头发深色服装MOD】生化危机2：重制版（Resident Evil 2 Remake）克莱尔红头发深色服装MOD 官方免费下载

【模拟人生4（The Sims 4）性感露背深V领吊带裙MOD V20190311】模拟人生4（The Sims 4）性感露背深V领吊带裙MOD V20190311 官方免费下载

【模拟人生4（The Sims 4）科幻风宇宙飞船家庭住宅MOD V20190311】模拟人生4（The Sims 4）科幻风宇宙飞船家庭住宅MOD V20190311 官方免费下载

【鬼泣5（Devil May Cry V）v1.0十四项修改】鬼泣5（Devil May Cry V）v1.0十四项修改 官方免费下载

123. web前端大学生期末作业高端大气的VR科技创新企业网页网页制作html+css+js

【渝粤题库】陕西师范大学100131大学英语（二）作业（高起本、高起专）

MySQL数据库酒店客房管理系统（含MySQL源码）结课作业做的不是很好

《人机交互技术》结课作业：界面调研报告&交互界面设计快速原型设计（华科软院）

webstrom 永久激活方法，长期可用

计算机组装项目教学,计算机组装与维护项目教学课程.doc

【鬼泣5（Devil May Cry V）v1.0十四项修改】鬼泣5（Devil May Cry V）v1.0十四项修改官方免费下载