文章目录
- 1.设计来源
- 1.1 大屏主界面
- 1.2 弹框界面
- 2.效果和源码
- 2.1 动态效果
- 2.2 源代码
- 源码下载
作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/130870963
html实现酷炫科技风大屏风格模板源码，html大屏源码，科技风，酷炫的界面效果，灵活的模块配置，打造属于自己的酷炫大屏，全屏打开页面，Ctrl+鼠标滚轮，找到最合适的分辨率，展现最好的界面效果。支持扩展界面，功能，灵活改变版块样式。
1.设计来源
1.1 大屏主界面
头部： 是主题+外部链接+全屏
中间左右： 是以图表展示数据（可以扩展文字）
中间上面： 是统计的数据
中间下面： 是全国地图，可以灵活配置。
1.2 弹框界面
弹框里面内容可以自定义，我这里放的是Iframe嵌套外连接，也可以放自定义界面。
更多效果见下面的，动态效果
2.效果和源码
2.1 动态效果
html实现酷炫科技风大屏风格模板
2.2 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>酷炫科技风大屏数据展示 - xcLeigh</title>
<link rel="icon" type="image/png" href="images/favicon.ico" />
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/animate.min.css">
</head>
<body>
<header class="animate__animated animate__fadeInDown">
<h1>酷炫科技风大屏数据展示</h1>
<div style="position: absolute;top:0;left:8rem;height: 0.8rem;">
<div class="nav">
<div class="navitem active"><span onclick="ggOO('https://blog.csdn.net/weixin_43151418/article/details/128349160','个人简介源码');">个人简介源码</span></div>
<div class="navitem" onclick="ggOO('https://blog.csdn.net/weixin_43151418/article/details/128315955','个人表白源码');"><span>个人表白源码</span></div>
<div class="navitem"><span onclick="ggOO('https://blog.csdn.net/weixin_43151418/article/details/125642161','邀请函源码');">邀请函源码</span></div>
<div class="navitem"><span onclick="ggOO('https://blog.csdn.net/weixin_43151418/article/details/128028326','个人空间源码');">个人空间源码</span></div>
<div class="navitem"><span onclick="ggOO('https://download.csdn.net/download/weixin_43151418/87769658','PPT模板');" title="500套模板可以私信联系，单独发">PPT模板</span></div>
<div class="navitem"><span onclick="ggOO('https://blog.csdn.net/weixin_43151418/category_12107481.html','html游戏源码');">html游戏源码</span></div>
</div>
</div>
<div style="position: absolute;top:0;right: 0;height: 0.8rem; line-height: 0.8rem;">
<img class="imgButton" title="全屏" onclick="goFull();" src="img/full.png" alt="全屏" />
<img class="imgButton" onclick="logout();" src="img/exit.png" alt="退出" />
</div>
</header>
<section class="mainbox">
<div class="column animate__animated animate__fadeInLeft" >
<div class="panel bar">
<img src="img/border_lefttop.png" alt="l" class="item_left_top" />
<img src="img/border_righttop.png" alt="l" class="item_right_top" />
<img src="img/border_leftbottom.png" alt="l" class="item_left_bottom" />
<img src="img/border_rightbottom.png" alt="l" class="item_bottom_right" />
<h2>
模块一 - 柱状图 <a href="javascript:;">2023</a><a href="javacript:;"> 2022</a>
</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel line">
<img src="img/border_lefttop.png" alt="l" class="item_left_top" />
<img src="img/border_righttop.png" alt="l" class="item_right_top" />
<img src="img/border_leftbottom.png" alt="l" class="item_left_bottom" />
<img src="img/border_rightbottom.png" alt="l" class="item_bottom_right" />
<h2>模块二 - 折线图</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel pie" style="height: 4.26rem;">
<img src="img/border_lefttop.png" alt="l" class="item_left_top" />
<img src="img/border_righttop.png" alt="l" class="item_right_top" />
<img src="img/border_leftbottom.png" alt="l" class="item_left_bottom" />
<img src="img/border_rightbottom.png" alt="l" class="item_bottom_right" />
<h2>模块三 - 饼形图</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
</div>
<div class="column animate__animated animate__fadeInUp">
<div class="no">
<div class="no-hd">
<ul>
<li>131400</li>
<li>520000</li>
</ul>
</div>
<div class="no-bd">
<ul>
<li>JAVA需求人数</li>
<li>C#需求人数</li>
</ul>
</div>
</div>
<div class="map">
<div class="chart"></div>
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
</div>
</div>
<div class="column animate__animated animate__fadeInRight">
<div class="panel bar1">
<img src="img/border_lefttop.png" alt="l" class="item_left_top" />
<img src="img/border_righttop.png" alt="l" class="item_right_top" />
<img src="img/border_leftbottom.png" alt="l" class="item_left_bottom" />
<img src="img/border_rightbottom.png" alt="l" class="item_bottom_right" />
<h2>模块四 - 横条柱状图</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel line1">
<img src="img/border_lefttop.png" alt="l" class="item_left_top" />
<img src="img/border_righttop.png" alt="l" class="item_right_top" />
<img src="img/border_leftbottom.png" alt="l" class="item_left_bottom" />
<img src="img/border_rightbottom.png" alt="l" class="item_bottom_right" />
<h2>模块五 - 山峰折线图</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel pie1" style="height: 4.26rem;">
<img src="img/border_lefttop.png" alt="l" class="item_left_top" />
<img src="img/border_righttop.png" alt="l" class="item_right_top" />
<img src="img/border_leftbottom.png" alt="l" class="item_left_bottom" />
<img src="img/border_rightbottom.png" alt="l" class="item_bottom_right" />
<h2>模块六 - 扩展饼状图</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
</div>
</section>
<div id="tkAlert" class="popWinMain animate__animated animate__backInDown" ref="popWinMain" style="display: none;">
<div id="popWinMain" class="titleBody animate__animated animate__delay-1s animate__backInUp" ref="titleBody">
<span id="alertName">我的大屏</span>
</div>
<div class="popClose" ref="popClose" onclick="closeDiv();"></div>
<div class="slot">
<iframe id="myFrame" src="https://blog.csdn.net/weixin_43151418" style="width: 100%; height: 100%; position: absolute; border: 0px;"></iframe>
</div>
</div>
<script src="js/flexible.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/index.js"></script>
<script src="js/china.js"></script>
<script src="js/myMap.js"></script>
</body>
</html>
源码下载
html实现酷炫科技风大屏风格模板（源码） 点击下载
💞 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署（有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务；
如🈶合作请联系我，期待您的联系。
注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/130870963（防止抄袭，原文地址不可删除）
