相亲网站怎么做的,开发一个简单的app需要多少钱,响应式网站建设咨询,忒低网站长怎么做#x1f345; 作者主页#xff1a;Java李杨勇 #x1f345; 简介#xff1a;Java领域优质创作者#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我#xff0c;都给你】 #x1f345; 欢迎点赞 #x1f44d; 收藏 ⭐留言 #x1f… 作者主页Java李杨勇 简介Java领域优质创作者、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我都给你】 欢迎点赞 收藏 ⭐留言 动图演示 文末获取源码 代码目录 主要代码实现 主页HTML布局 div classt_containerheader classt_headerspan设备环境监测平台/span/headermain classt_maindiv classt_left_boximg classt_l_line srcimg/left_line.png altdiv classt_mbox t_rboxi/ispan本月订单数/spanh218000/h2/divdiv classt_mbox t_gboxi/ispan本月新增会员/spanh21000/h2/divdiv classt_mbox t_yboxi/ispan一次消费会员/spanh2600/h2/divimg classt_r_line srcimg/right_line.png alt/divdiv classt_center_boxdiv classt_top_boximg classt_l_line srcimg/left_line.png altul classt_navlispan设备数/spanh1500/h1i/i/lilispan上月设备增加数/spanh130/h1i/i/lilispan增值率/spanh175%/h1/li/ulimg classt_r_line srcimg/right_line.png alt/divdiv classt_bottom_boximg classt_l_line srcimg/left_line.png altdiv idchart_3 classechart stylewidth: 100%; height: 3.6rem;/divimg classt_r_line srcimg/right_line.png alt/div/divdiv classt_right_boximg classt_l_line srcimg/left_line.png altdiv idchart_4 classechart stylewidth: 50%; height: 4.6rem; position: absolute;/divheader classt_b_hspan开关次数/spanimg srcimg/end.png/imgh315span次/span/h3/headermain classt_b_mimg srcimg/map.png altdiv classt_b_boxspan溫度/spani/ih223℃/h2/divdiv classt_b_box1span湿度/spani/ih256RH/h2/divdiv classt_b_box2span信号/spani/ih2-90dBm/h2/divdiv classt_b_box3span光线/spani/ih2250LX/h2/div/mainimg classt_r_line srcimg/right_line.png alt/divdiv classb_left_boximg classt_l_line srcimg/left_line.png altdiv idchart_2 classechart stylewidth: 100%; height: 3.6rem;/divimg classt_r_line srcimg/right_line.png alt/divdiv classb_center_boximg classt_l_line srcimg/left_line.png altdiv idchart_1 classechart stylewidth: 100%; height: 3.6rem;/divimg classt_r_line srcimg/right_line.png alt/divdiv classb_right_boximg classt_l_line srcimg/left_line.png alth1 classt_title设备维保数据查看/h1table classt_tabletheadtrth维护时间/thth维保人/thth维保电话/thth更换水量/th /tr/theadtbodytrtd2018-02-06/tdtd张伟/tdtd13111345462/tdtd1000ml/td/trtrtd2018-02-06/tdtd张伟/tdtd13111345462/tdtd1000ml/td/trtrtd2018-02-06/tdtd张伟/tdtd13111345462/tdtd1000ml/td/trtrtd2018-02-06/tdtd张伟/tdtd13111345462/tdtd1000ml/td/trtrtd2018-02-06/tdtd张伟/tdtd13111345462/tdtd1000ml/td/tr/tbody/tableimg classt_r_line srcimg/right_line.png alt/div/main
CSS样式文件
html,body{width: 100%;height: 100%;margin: 0;padding: 0;
}
html{font-size: 100px;
}
ul,h1,h2,h3,h4,h5,h6,p{list-style: 0;padding: 0;margin: 0;
}
a{text-decoration: none;
}/*正文*/
.t_container{width: 100%;height: 100%;min-width: 1360px;background: url(../img/true.png) no-repeat;background-size: 100% 100%;position: relative;min-height: 756px;
}
.t_header{width: 100%;height: 80px;background: url(../img/linx.png) no-repeat;background-size: 100% 100%;position: relative;
}
.t_header span{color: #fff;font-size: 0.36rem;position: absolute;top: 50%;margin-top: -0.24rem;left: 9%;
}
.t_main{width: 98%;height: 8.74rem;margin: 0 auto;margin-top: 0.2rem;margin-bottom: 0;
}
.t_left_box{position: relative;width: 3.36rem;height: 4.6rem;display: inline-block;text-align: center;
}
.t_l_line{position: absolute;top: 0;left: 0;
}
.t_r_line{position: absolute;bottom: 0;right: 0;
}
.t_center_box{width: 6.82rem;display: inline-block;min-width: 490px;
}
.t_top_box{width: 100%;height: 1.13rem;overflow: hidden;position: relative;margin-bottom: 0.2rem;
}
.t_bottom_box{width: 100%;height: 3.17rem;overflow: hidden;position: relative;
}
.t_right_box{display: inline-block;width: 7.8rem;height: 4.6rem;position: relative;min-width: 560px;
}
.b_left_box{display: inline-block;width: 5.9rem;height: 3.6rem;position: relative;min-width: 425px;
}
.b_center_box{display: inline-block;width: 6rem;height: 3.6rem;position: relative;min-width: 432px;
}
.b_right_box{display: inline-block;width: 6rem;height: 3.6rem;position: relative;min-width: 432px;
}
.t_mbox{width: 3rem;height: 1.28rem;position: relative;margin: 0 auto;margin-top: 0.2rem;
}
.t_rbox{background: #D9523F;
}
.t_gbox{background: #13D0B2;
}
.t_ybox{background: #F6A645;
}
.t_mbox i{display: inline-block;width: 0.46rem;height: 0.48rem;position: absolute;top: 0;bottom: 0;left: 20%;margin: auto;
}
.t_mbox h2{font-size: 0.28rem;color: #fff;position: absolute;top: 50%;left: 50%;
}
.t_mbox span{font-size: 0.2rem;color: #fff;position: absolute;top: 24%;left: 48%;
}
.t_rbox i{background: url(../img/indent.png) no-repeat;background-size: 100% 100%;
}
.t_gbox i{background: url(../img/vip.png) no-repeat;background-size: 100% 100%;
}
.t_ybox i{background: url(../img/consumption.png) no-repeat;background-size: 100% 100%;
}
.t_nav{width: 100%;height: 100%;
}
.t_nav li{display: inline-block;width: 30%;height: 100%;text-align: center;position: relative;
}
.t_nav li span{font-size: 0.16rem;color: #1AA1FD;position: absolute;left: 0;right: 0;margin: auto;top: 25%;
}
.t_nav li h1{font-size: 0.30rem;color: #fff;position: absolute;left: 0;right: 0;margin: auto;top: 50%;
}
.t_nav li i{width: 1px;height: 100%;position: absolute;right: -0.2rem;background: url(../img/sper.png) no-repeat;background-size: 100% 100%;
}
.t_table{font-size: 0.16rem;color: #fff;width: 94%;margin: 0 auto;border-spacing: 0;text-align: center;box-sizing: border-box;margin-top: 12%;
}
.t_table tr{margin: 0;padding: 0;height: 0.42rem;
}
.t_table thead tr{background: #053A98;
}
.t_table tbody tr td:first-child{border-left: 1px solid #053A98;
}
.t_table td{border-bottom: 1px solid #053A98;border-right: 1px solid #053A98;
}
.t_title{position: absolute;font-size: 0.18rem;color: #fff;left: 5%;top: 10%;
}
.t_b_h,t_b_m{position: absolute;font-size: 0.16rem;left: 54%;width: 50%;height: 4.6rem;
}
.t_b_h span{position: absolute;color: #fff;top: 10%;
}
.t_b_h img{position: absolute;width: 0.53rem;height: 0.53rem;top: 6%;left: 24%
}
.t_b_h h3{font-size: 0.36rem;color: #F0FF00;position: absolute;left: 55%;top: 8%;width: 1rem;
}
.t_b_h h3 span{font-size: 0.2rem;position: absolute;left: 50%;top: 28%;color: #0072FF;
}作品来自于网络收集、侵权立删
上面的图片文件以及js文件等需要引入进来 源码获取 大家点赞、收藏、关注、评论啦 、查看微信公众号获取 打卡 文章 更新 58/ 100天 专栏推荐阅读 EChartsHTML5大数据模板《100套》 HTML5大作业实战案例《100套》 Java毕设项目精品实战案例《100套》
