联通培训 老师教的 bootstrap row 里面都是12行不断的分割成小格子

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>欢迎页</title><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><link rel="stylesheet" href="css/bootstrap.min.css"><style >*{margin:0;padding:0}html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
</head>
<body><div style="background: #F2F2F2;width:100%;height: 1000px;padding:30px;"><div class="row"><div class="col-md-9"><div class="row"><div class="col-md-4"><div style="background: #fff;width:100%;height: 100px;border-radius:5px;padding: 0px 15px 15px 0px;"></div></div><div class="col-md-4"><div style="background: #fff;width:100%;height: 100px;border-radius:5px;padding: 0px 15px 15px 15px;"></div></div><div class="col-md-4"><div style="background: #fff;width:100%;height: 100px;border-radius:5px;padding: 0px 0px 15px 15px;"></div></div></div><div class="row"><div class="col-md-12"><div style="background: #fff;width:100%;height:700px;border-radius:5px;margin: 30px 0px 15px 0px;"></div></div></div></div><div class="col-md-3"><div class="row"><div class="col-md-12"><div style="background: #fff;width:100%;height:400px;border-radius:5px;padding: 0px 0px 15px 15px;"></div></div></div><div class="row"><div class="col-md-12"><div style="background: #fff;width:100%;height:400px;border-radius:5px;margin: 30px 15px 15px 0px;"></div></div></div></div></div></div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/openTab.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript"></script>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

*******************************************不用bootstrap很麻烦****************************************************************************

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>欢迎页</title><meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"><link rel="stylesheet" href="css/bootstrap.min.css"><style >*{margin:0;padding:0}html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
</head>
<body>
<div class="panel panel-default"  ><div style="background: #F2F2F2;width:100%;height: 1000px;  "><div style=" width:69.5%;height: 1000px;display: inline-block; "><div style=" width:100%;height: 200px;display: inline-block;"><div style="background: white;width:32%;height: 100px;display: inline-block; margin:50px 5px 20px 5px;border-radius:5px"><div style=" width:29%;height: 100px; position: relative;  display: inline-block; "><img style="width:50px;height:50px;position: absolute;top:50%;left:50%;margin-top:-25px;margin-left: -25px ;" src="img/a1.jpg"></div><div style=" width:68%;height: 70px; position: relative; display: inline-block; "><div style=" width:100%;height: 98px; position: absolute;top:50%;left:50%;margin-top:-50px;margin-left: -79px ;display: inline-block; "><p style="font-size:15px;color: #656865;">今日用户上线人数</p><br><span style="font-size:25px;color: #66CC00;"> 109</span><span style="font-size:15px;color: grey;">数量</span></div></div></div><div style="background: white;width:32%;height: 100px;display: inline-block; margin:50px 5px 20px 5px;border-radius:5px"><div style=" width:29%;height: 100px; position: relative;  display: inline-block; "><img style="width:50px;height:50px;position: absolute;top:50%;left:50%;margin-top:-25px;margin-left: -25px ;" src="img/a1.jpg"></div><div style=" width:68%;height: 80px; position: relative; display: inline-block; "><div style=" width:100%;height: 98px; position: absolute;top:50%;left:50%;margin-top:-50px;margin-left: -79px ;display: inline-block; "><p style="font-size:15px;color: #656865;">今日新发帖子数</p><br><span style="font-size:25px;color: red;">40</span><span style="font-size:15px;color: grey;">数量</span></div></div></div><div style="background: white;width:32%;height: 100px;display: inline-block; margin:50px 5px 20px 5px;border-radius:5px"><div style=" width:29%;height: 100px; position: relative;  display: inline-block; "><img style="width:50px;height:50px;position: absolute;top:50%;left:50%;margin-top:-25px;margin-left: -25px ;" src="img/a1.jpg"></div><div style=" width:68%;height: 80px; position: relative; display: inline-block; "><div style=" width:100%;height: 98px; position: absolute;top:50%;left:50%;margin-top:-50px;margin-left: -79px ;display: inline-block; "><p style="font-size:15px;color: #656865;">今日互动用户量</p><br><span style="font-size:25px;color: red;">200</span><span style="font-size:15px;color: grey;">数量</span></div></div></div></div><div id="container_maqun" style="background: white;width:100%;height: 800px;display: inline-block; "></div></div><div style="background: #F2F2F2;width:30%;height: 960px;display: inline-block;margin-top:40px; float: right"><div style="background:white;width:90%;height: 379px;display: inline-block;margin:10px 0 0 40px;border-radius:5px;"><p style="font-size:20px;text-align: center;margin-top:20px;">互动方式占比</p><div id="container" style="height: 100%;"></div></div><div style="background: white;width:90%;height: 509px;display: inline-block;margin:0px 0 0 40px; border-radius:5px;"><p style="font-size:20px;text-align: center;margin-top:20px;">互动方式占比</p><div id="container_pie" style="height: 100%;"></div></div></div></div><!--<div class="panel-heading">了解BootDo</div>  --><!--    <div style="padding: 10px 0 20px 10px;">--><!--        <h3>&nbsp;&nbsp;&nbsp;项目介绍</h3>--><!--        <ul>--><!--            <li>面向学习型的开源框架，简洁高效，减少过渡封装，展现技术本质</li>--><!--            <li>Springboot作为基础框架，使用mybatis作为持久层框架</li>--><!--            <li>使用官方推荐的thymeleaf做为模板引擎，shiro作为安全框架,主流技术，“一网打尽”</li>--><!--            <li>极简配置，一键前后台代码生成</li>--><!--        </ul>--><!--        <h3>&nbsp;&nbsp;&nbsp;获取源码</h3>--><!--        <ul>--><!--            <li>Github地址：<a href="https://github.com/lcg0124/bootdo.git"--><!--                            th:href="@{https://github.com/lcg0124/bootdo.git}" target="_blank">https://github.com/lcg0124/bootdo.git</a>--><!--            </li>--><!--            <li>Oschina地址：<a href="https://gitee.com/lcg0124/bootdo.git" target="_blank">https://gitee.com/lcg0124/bootdo.git</a>--><!--            </li>--><!--        </ul>--><!--        <h3>&nbsp;&nbsp;&nbsp;官方QQ群</h3>--><!--        <ul>--><!--            <li>点击链接加入群聊【BootDo交流群】：<a href="https://jq.qq.com/?_wv=1027&k=5EYXfiZ">669039323</a></li>--><!--            <li>点击链接加入群聊【BootDo交流二群】：<a href="https://jq.qq.com/?_wv=1027&k=5M659N4">614726589</a></li>--><!--            <li>点击链接加入群聊【BootDo交流三群】：<a href="https://jq.qq.com/?_wv=1027&k=5tE3A9O">600801035</a></li>--><!--            <li>点击链接加入群聊【CloudDo交流群】：<a href="https://jq.qq.com/?_wv=1027&k=5Zk12Xl">719741533</a></li>--><!--        </ul>--><!--        <button class="btn" οnclick="openPage('http://bootdo.com','bootdo.com')">访问bootdo官网(新打开tab页事例)</button>--></div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/openTab.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">var dom = document.getElementById("container");var myChart = echarts.init(dom);var app = {};option = null;option = {tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},series : [{name:'面积模式',type:'pie',radius : [10, 90],center : ['50%', '40%'],roseType : 'area',data:[{value:30, name:'点赞'},{value:20, name:'浏览'},{value:15, name:'收藏'},{value:25, name:'其他'},{value:10, name:'评论'}]}]};;if (option && typeof option === "object") {myChart.setOption(option, true);}
</script><script type="text/javascript">var dom = document.getElementById("container_maqun");var myChart = echarts.init(dom);var app = {};option = null;function randomData() {var value = 0;$.ajax({type : "GET",url : "http://localhost/wo/protal/getCount",async : false,error : function(request) {alert("Connection error");},success : function(data) {value = data;}});now = new Date(+now + oneSec);return {name: now.toString(),value: [now.getTime(),value]}}var data = [];var now = +new Date();now = new Date(+now - 1000*1000);var oneSec = 1000;for (var i = 0; i < 1000; i++) {now = new Date(+now + oneSec);data.push([now.getTime(),0]);}option = {title: {text: '动态数据 + 时间坐标轴'},tooltip: {trigger: 'axis',formatter: function (params) {params = params[0];var date = new Date(params.name);return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];},axisPointer: {animation: false}},xAxis: {type: 'time',splitLine: {show: false}},yAxis: {type: 'value',boundaryGap: [0, '100%'],splitLine: {show: false}},series: [{name: '模拟数据',type: 'line',showSymbol: false,hoverAnimation: false,data: data}]};setInterval(function () {for (var i = 0; i < 1; i++) {data.shift();data.push(randomData());}myChart.setOption({series: [{data: data}]});}, 1000);;if (option && typeof option === "object") {myChart.setOption(option, true);}
</script><script type="text/javascript">var dom_pie = document.getElementById("container_pie");var myChart_pie = echarts.init(dom_pie);var option_pie = null;var pieData = [{name: '技术',value: 35},{name: '工会11',value: 20},{name: '生活',value: 45}];option_pie = {tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},series : [{name: '姓名',type: 'pie',radius : '55%',center: ['50%', '30%'],data: pieData,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};if (option_pie && typeof option_pie === "object") {myChart_pie.setOption(option_pie, true);}
</script>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/328057.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

numpy 数组抽取_清晰易懂的Numpy入门教程

numpy 数组抽取_清晰易懂的Numpy入门教程

原标题&#xff1a;清晰易懂的Numpy入门教程翻译 | 石头来源 | Machine Learning PlusNumpy是python语言中最基础和最强大的科学计算和数据处理的工具包&#xff0c;如数据分析工具pandas也是基于numpy构建的&#xff0c;机器学习包scikit-learn也大量使用了numpy方法。本文介绍…
阅读更多...
oracle基本笔记整理及案例分析2

oracle基本笔记整理及案例分析2

/**//* tp_orders表空间&#xff0c;大小10M&#xff0c;文件大小可自动增长&#xff0c;允许文件扩展&#xff0c;最大限度为无限制 创建A_oe用户的默认表空间为tp_orders 密码 bdqn 授予connect,resource权限党文a_hr用户的employee */ --创建表空间和用户&#xff0c;并授予…
阅读更多...
Debugging into .NET Core源代码的两种方式

Debugging into .NET Core源代码的两种方式

一、前言 .NET开源时间还不长&#xff0c;因为一直在做YOYOFx的关系&#xff0c;所似我常常有更深入的了解.NET Core和ASP.NET Core内容的需求&#xff0c;并且.NET Core平台与之前版本的变化太大&#xff0c;这也导致我经常要去查看源代码中&#xff0c;来了解ASP.NET Core和.…
阅读更多...
JAVA基础学习大全（笔记）

JAVA基础学习大全（笔记）

JAVASE和JAVAEE的区别 JDK的安装路径 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-perPRPgq-1608641067105)(C:\Users\王东梁\AppData\Roaming\Typora\typora-user-images\image-20201222001641906.png)] 卸载和安装JDK [外链图片转存失败,源站…
阅读更多...
Vue.js2.0开发环境搭建（二）

Vue.js2.0开发环境搭建（二）

转载自 Vue.js 2.0从入门到放弃---入门实例&#xff08;二&#xff09;前面一篇博客介绍了从零开始准备Vue.js所需的一些环境和工具。这片博客就来跟大家探讨一下Vue.js 2.0中的一些特性&#xff0c;以及一个小实例&#xff0c;通过实例来跟大家分享&#xff0c;想必更容易理解…
阅读更多...
工程打包是什么意思_太生动形象了！500个建筑施工3D动画演示，施工工艺一目了然，零基础工程人也能看懂...

工程打包是什么意思_太生动形象了！500个建筑施工3D动画演示，施工工艺一目了然，零基础工程人也能看懂...

在建筑行业干了这么多年&#xff0c;老杨深知其中的艰辛。刚毕业的时候去了中建&#xff0c;那时候带我的老师傅很忙&#xff0c;天天都让看书&#xff0c;看得头晕眼花&#xff0c;不懂的地方也不好意思去问&#xff0c;后来还是一个同事给了这500个建筑施工3D动画演示&#x…
阅读更多...
使用 dotnet watch 开发 ASP.NET Core 应用程序

使用 dotnet watch 开发 ASP.NET Core 应用程序

原文&#xff1a;Developing ASP.NET Core applications using dotnet watch作者&#xff1a;Victor Hurdugaci翻译&#xff1a;谢炀(Kiler)校对&#xff1a;刘怡(AlexLEWIS)、许登洋(Seay) 介绍 dotnet watch 是一个开发阶段在源文件发生变动的情况下使用 dotnet 命令的工具。…
阅读更多...
蓝桥杯JAVA---2013---B----世纪末的星期

蓝桥杯JAVA---2013---B----世纪末的星期

2013 一、世纪末的星期 方法一 package com.kuang.Test; import java.util.Calendar; public class Test{ public static void main(String[] args) {Calendar calendar Calendar.getInstance(); //获取Calendar类的实例for(int year 1999; year < 10000; year 100) …
阅读更多...
PL/SQL编程基本概念

PL/SQL编程基本概念

/* pl/sql编程 */--pl/sql块的结构 declare --声明部门&#xff1a;在此声明pl/sql用到的变量、类型以及游标&#xff0c;以及局部的存储过程和函数 begin--执行部分&#xff1a;过程及sql语句&#xff0c;即程序的组成部分 exception --异常处理部分&#xff1a;错误处理 end;…
阅读更多...
Vue.js2.0开发环境搭建（三）

Vue.js2.0开发环境搭建（三）

转载自 Vue.js2.0从入门到放弃---入门实例&#xff08;三&#xff09;今天就来简单说一下vue-resource&#xff0c;这是vue的一个与服务器端通信的HTTP插件&#xff0c;用来从服务器端请求数据。话不多说&#xff0c;直接上干货吧。这里PS一下&#xff0c;有人反映之前的代码下…
阅读更多...
controller如何保证当前只有一个线程执行_聊聊Spring线程安全，读完之后，大部分程序员收藏了......

controller如何保证当前只有一个线程执行_聊聊Spring线程安全，读完之后，大部分程序员收藏了......

Spring作为一个IOC/DI容器&#xff0c;帮助我们管理了许许多多的“bean”。但其实&#xff0c;Spring并没有保证这些对象的线程安全&#xff0c;需要由开发者自己编写解决线程安全问题的代码。Spring对每个bean提供了一个scope属性来表示该bean的作用域。它是bean的生命周期。例…
阅读更多...
.NET Core 使用 grpc 实现微服务

.NET Core 使用 grpc 实现微服务

GRPC 是Google发布的一个开源、高性能、通用RPC&#xff08;Remote Procedure Call&#xff09;框架。提供跨语言、跨平台支持。以下以一个.NET Core Console项目演示如何使用GRPC框架。 一、定义服务 通过proto定义一个数学计算服务&#xff0c;其中包括两个服务方法&#xff…
阅读更多...
范式 第一 第二 第三范式

范式 第一 第二 第三范式

第一范式&#xff08;每个数据项不可分&#xff09; 如果一个关系模式R的所有属性都是不可分的基本数据项&#xff0c;则R∈1NF&#xff08;即R符合第一范式&#xff09;。 第二范式 &#xff08;没有部分依赖&#xff09; 若关系模式R∈1NF&#xff08;即R符合第一范式&a…
阅读更多...
Vue.js2.0开发环境搭建（四）

Vue.js2.0开发环境搭建（四）

转载自 vuejs2.0从入门到放弃--入门实例&#xff08;四&#xff09;最近&#xff0c;很多小伙伴有疑惑&#xff0c;想学vuejs必须先了解复杂的构建工具和命令行操作吗&#xff01;&#xff01;答案是否定的&#xff01; 对于很多做前端的同学&#xff0c;涉及到命令行和构建工…
阅读更多...
微信小程序父级之间的传值_微信小程序自定义组件封装及父子间组件传值的方法...

微信小程序父级之间的传值_微信小程序自定义组件封装及父子间组件传值的方法...

首先在我们可以直接写到需要的 page 中&#xff0c;然后再进行抽取组件&#xff0c;自定义组件建议wxzx-xxx命名例如&#xff0c;我们封装的组件名为 **wxzx-loadmorewxzx-loadmore.wxml正在加载{{tip}}这里就是把index.wxml中的需要封装成组件的代码原样copy过来wxzx-loadmore…
阅读更多...
[公测]微信小程序设计指南文档

[公测]微信小程序设计指南文档

微信小程序开放了。不要在意名额&#xff0c;一定要加大专注度。并保持良好的想法以及意识&#xff0c;扩大认知范围&#xff0c;这样才能占得先机。程序上的事我不懂&#xff0c;设计文档还是有必要看一看。文档并没有讲如何更漂亮。只是从人性化的角度去讲&#xff0c;如何让…
阅读更多...
多线程----join插队

多线程----join插队

package com.kuang.demo05; public class TestJoin implements Runnable {Overridepublic void run() {for (int i 0; i <10 ; i) {System.out.println("VIP线程来插队了&#xff01;&#xff01;&#xff01;"i);}}public static void main(String[] args) thro…
阅读更多...
联通 培训 c班还 20190814

联通 培训 c班还 20190814

看我的ppt是没有很多文字的 文字都在心里 电脑比较旧 可以装一个Linux 还能用 还是装xp把 电脑旧可以在咸鱼上买一个ssd&#xff0c;还能用很久。 Linux 目录每个用户都一样 不可以修改 ps -ef | sudo service sudo 授权 一般都是普通用户 docker 启动就类似模拟…
阅读更多...
Vue开源项目库汇总

Vue开源项目库汇总

转载自 Vue开源项目库汇总最近做了一个Vue开源项目库汇总&#xff0c;里面集合了OpenDigg 上的优质的Vue开源项目库&#xff0c;方便移动开发人员便捷的找到自己需要的项目工具等&#xff0c;感兴趣的可以到GitHub上给个star。 UI组件 element ★9305 - 饿了么出品的Vue2的web…
阅读更多...
PL/SQL经典练习

PL/SQL经典练习

/* PL/SQL编程*/--先把scott里面的表弄到test表空间里面来 CREATE TABLE EMP ASSELECT * FROM SCOTT.EMP; CREATE TABLE DEPT ASSELECT * FROM SCOTT.DEPT; /* 上机1 */ --&#xff08;1&#xff09;计算King所交税金DECLARE V_SHUIJIN NUMBER; --应交税金V_SA…
阅读更多...
最新文章

Copyright @ 2022~2023