网站开发原理,wordpress小工具编辑,赣州网站推广公司电话,贵州建设职业技术学院网站查成绩#x1f345; 作者主页#xff1a;Java李杨勇 #x1f345; 简介#xff1a;Java领域优质创作者#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我#xff0c;都给你】 #x1f345; 欢迎点赞 #x1f44d; 收藏 ⭐留言 #x1f… 作者主页Java李杨勇 简介Java领域优质创作者、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我都给你】 欢迎点赞 收藏 ⭐留言 动图演示 文末获取源码 代码目录 主要代码实现 主页HTML布局 !DOCTYPE html
html langen
headmeta charsetUTF-8title新能源车联网综合大数据平台/titlelink relstylesheet hrefcss/common.csslink relstylesheet hrefcss/map.css
/head
body
div classdatadiv classdata-titlediv classtitle-left fl/divdiv classtitle-center fl/divdiv classtitle-right fr/div/divdiv classdata-contentdiv classcon-left fldiv classleft-topdiv classinfodiv classinfo-title实时统计/divimg srcimg/bj-1.png alt classbj-1img srcimg/bj-2.png alt classbj-2img srcimg/bj-3.png alt classbj-3img srcimg/bj-4.png alt classbj-4div classinfo-maindiv classinfo-1div classinfo-img flimg srcimg/info-img-1.png alt/divdiv classinfo-text flp车辆总数(辆)/pp12,457/p/div/divdiv classinfo-2div classinfo-img flimg srcimg/info-img-2.png alt/divdiv classinfo-text flp当前在线数(辆)/pp12,457/p/div/divdiv classinfo-3div classinfo-img flimg srcimg/info-img-3.png alt/divdiv classinfo-text flp今日活跃数(辆)/pp12,457/p/div/divdiv classinfo-4div classinfo-img flimg srcimg/info-img-4.png alt/divdiv classinfo-text flp今日活跃率(%)/pp83/p/div/div/div/divdiv classtop-bottomdiv classtitle行业分类/divimg srcimg/bj-1.png alt classbj-1img srcimg/bj-2.png alt classbj-2img srcimg/bj-3.png alt classbj-3img srcimg/bj-4.png alt classbj-4div idecharts_1 classcharts/div/div/divdiv classleft-bottomdiv classtitle车型分类/divimg srcimg/bj-1.png alt classbj-1img srcimg/bj-2.png alt classbj-2img srcimg/bj-3.png alt classbj-3img srcimg/bj-4.png alt classbj-4div idecharts_2 classcharts/div/div/divdiv classcon-center fldiv classmap-nump实时行驶车辆(辆)/pdiv classnumspan1/spanspan,/spanspan2/spanspan3/spanspan4/spanspan,/spanspan5/spanspan6/spanspan7/span/div/divdiv classcen-top idmap/divdiv classcen-bottomdiv classtitle车辆充电高峰时间/divimg srcimg/bj-1.png alt classbj-1img srcimg/bj-2.png alt classbj-2img srcimg/bj-3.png alt classbj-3img srcimg/bj-4.png alt classbj-4div idecharts_3 classcharts/div/div/divdiv classcon-right frdiv classright-topdiv classtitle本月行驶里程TOP5/divimg srcimg/bj-1.png alt classbj-1img srcimg/bj-2.png alt classbj-2img srcimg/bj-3.png alt classbj-3img srcimg/bj-4.png alt classbj-4div idecharts_4 classcharts/div/divdiv classright-centerdiv classtitle报警车辆TOP5/divimg srcimg/bj-1.png alt classbj-1img srcimg/bj-2.png alt classbj-2img srcimg/bj-3.png alt classbj-3img srcimg/bj-4.png alt classbj-4div idecharts_5 classcharts/div/divdiv classright-bottomdiv classtitle电池报警车辆TOP10/divimg srcimg/bj-1.png alt classbj-1img srcimg/bj-2.png alt classbj-2img srcimg/bj-3.png alt classbj-3img srcimg/bj-4.png alt classbj-4div idecharts_6 classcharts/div/div/div/div
/div/body
script srcjs/jquery-2.1.1.min.js/script
script srcjs/echarts.min.js/script
script srcjs/china.js/script
script srcjs/echarts.js/script
/html
CSS样式文件
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {margin: 0;padding: 0;
}/*将标签原有的默认内外边距去掉*/fieldset, img, input, button {border: none; /*去掉边框*/padding: 0;margin: 0;outline-style: none; /*去掉环绕边框*/
}ul, ol {list-style: none; /*去掉原样式中的小黑点*//*ctrlaltl*/
}input {padding-top: 0;padding-bottom: 0;}select, input {vertical-align: middle; /*输入字居中显示*/
}select, input, textarea {font-size: 14px;margin: 0;
}/**/
textarea {resize: none; /*防止拖动*/
}img {border: 0;vertical-align: middle; /* 去掉图片底部默认的3像素空白缝隙*/
}table {border-collapse: collapse; /*合并外边线*/
}body {font-family: Microsoft YaHei, Arial, \5b8b\4f53;
}.clearfix:before, .clearfix:after {content: ;display: table;
}.clearfix:after {clear: both;
}.clearfix {*zoom: 1; /*IE/7/6*//*兼容IE6下的写法*/
}h1, h2, h3, h4, h5, h6 {text-decoration: none; /**/font-weight: normal; /*不加粗*/font-size: 100%;
}
a{text-decoration: none;
}
s, i, em {/*一般起装饰作用*/font-style: normal; /*将字体变成正常字体*/text-decoration: none; /*去掉中划线*/
}
.fl{float: left;
}
.fr{float: right;
}
作品来自于网络收集、侵权立删
上面的图片文件以及js文件等需要引入进来 源码获取 大家点赞、收藏、关注、评论啦 、查看微信公众号获取 打卡 文章 更新 58/ 100天 专栏推荐阅读 EChartsHTML5大数据模板《100套》 HTML5大作业实战案例《100套》 Java毕设项目精品实战案例《100套》
