技术文章

html实现酷炫科技风大屏风格模板(附源码)

xcLeigh

An editor at Blogzine

  • 2023-05-26
  • 11天前
  • 1833
  • 43 Views
  • 100

文章目录

作者：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（防止抄袭，原文地址不可删除）

版权声明：

本文为[xcLeigh]所创，转载请带上原文链接，感谢

https://blog.csdn.net/weixin_43151418/article/details/130870963

上一篇
GPT-4平替版：MiniGPT-4，支持图像理解和对话，现...
下一篇
傅里叶级数 傅里叶变换 及应用

作者相关文章

技术文章
html实现好看的浪漫爱情回忆录(附源码)
技术文章
html制作好看的个人简历(附源码)

评论数 0

留下回复

如果您是个网络喷子或者键盘侠，那么建议您多看少说。
下一篇
傅里叶级数 傅里叶变换 及应用