主题:通用平台模板
开发技术:
Echarts+html+css+js
支持平台:
dw,vscode,webstorm,idea,Hbuilderx等
源码:文末附
整体效果
部分js代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>index</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script><script type="text/javascript" src="js/js.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="head clearfix"> <h1 class="pulll_left">某公司大数据展示模版标题</h1> <div class="menu menu2 pulll_left"> <ul> <li><a href="#">导航标题</a></li> <li><a href="#">导航标题样式</a></li> <li><a href="#">导航标题</a></li> <li><a href="#">导航标题</a></li> <li><a href="#">导航标题</a></li> <li><a href="#">导航标题</a></li> </ul> </div> <div class="time" id="showTime">2018/6/12 17:00:12</div> </div> <div class="mainbox"> <ul class="clearfix nav1"> <li style="width: 25%"> <div class="box"> <div class="tit">模块标题</div> <div class="boxnav" id="echart1">
部分css代码
.head{position: relative; height: 90px; margin: 0 15px; padding-right: 60px;} .head h1{ font-size: 30px; letter-spacing: -2px; text-align: center; line-height: 90px; padding-right: 55px; color: #daf9ff;} .head .menu li{ display: inline-block; position: relative;margin: 30px 15px;;} .head .menu li a{ display: block; font-size: 18px; color: #fff; line-height: 30px; padding: 0 10px; } .head .time{position: absolute; right: 0; line-height: 90px; top: 0;} .menu li:before, .menu li:after{ position:absolute; width:10px; height:5px;opacity: .4; content: ""; border-top: 2px solid #02a6b5; top: -1px;border-radius: 2px;} .menu li:before,.menu li a:before{border-left: 2px solid #02a6b5;left: -1px;} .menu li:after,.menu li a:after{border-right: 2px solid #02a6b5; right: -1px;} .menu li a{ position:relative;} .menu li a:before, .menu li a:after{ position:absolute; width:10px; height:5px; opacity: .4; content: "";border-bottom: 2px solid #02a6b5; bottom:-1px;border-radius: 2px;} .head .menu li a:hover{ color: #f4e925;} .menu li a:hover:before, .menu li a:hover:after, .menu li:hover:before, .menu li:hover:after{border-color: #f4e925; opacity: 1;} .box{ border:1px solid rgba(7,118,181,.5); box-shadow:inset 0 0 10px rgba(7,118,181,.4); margin-bottom: 12px; position: relative;} .tit{ padding: 10px 10px 10px 25px;border-bottom:1px solid rgba(7,118,181,.7);font-size: 16px; font-weight: 500; position: relative;} .tit:before,.tit01:before{position: absolute; content: ""; width: 6px; height: 6px; background: rgba(22,214,255,.9);box-shadow: 0 0 5px rgba(22,214,255,.9); border-radius: 10px; left: 10px; top: 18px;} .tit:after,.box:before{ width: 100%; height: 1px; content: ""; position: absolute; left: 0; bottom:-1px; background:linear-gradient(to right,#076ead,#4ba6e0,#076ead); box-shadow: 0 0 5px rgba(131,189,227,1); opacity: .6} .box:before{top: -1px;}
想要源码的小伙伴们，请关注公众号Echarts技术专家，点击获取资源。
