数据在各种屏幕上的显示，根据岗位的不同，用途也是不一样的，现在比较流行的是大、中、小屏联动的数字化作战体系建设，大屏用于管理决策，中屏用于生产调度，小屏用于作业执行。小屏一般是手机或平板，中屏一般是电脑，大屏有电视、有LED等。
今天演示一个大屏的布局和配色方案，分两种类型，第一种是弹性宽高像素，第二种是固定宽高像素。
第一种：弹性宽高像素。用display:flex;方式布局，宽高尺寸采用rem方式而不是px像素，显示内容根据屏幕大小自动调节比例和尺寸，包括文字也能放大和缩小。
效果图：看着是不是很爽？
代码：dashboard.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数据看板演示01</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/icomoon.css">
</head>
<body>
<div class="viewport">
<div class="column">
<!--概览-->
<div class="overview panel">
<div class="inner">
<div class="item">
<h4>30100</h4>
<span>
<i class="icon-dot" style="color: #006cff"></i>
渠道总数
</span>
</div>
<div class="item">
<h4>410</h4>
<span>
<i class="icon-dot" style="color: #6acca3"></i>
自营渠道
</span>
</div>
<div class="item">
<h4>15980</h4>
<span>
<i class="icon-dot" style="color: #6acca3"></i>
合作渠道
</span>
</div>
<div class="item">
<h4>14321</h4>
<span>
<i class="icon-dot" style="color: #ed3f35"></i>
零售渠道
</span>
</div>
</div>
</div>
<!--监控-->
<div class="monitor panel">
<div class="inner">
<div class="tabs">
<a href="javascript:;" data-index="0" class="active">异常渠道监控</a>
<a href="javascript:;" data-index="1">新增渠道监控</a>
</div>
<div class="content" style="display: block;">
<div class="head">
<span class="col">监控月份</span>
<span class="col">渠道名称</span>
<span class="col">异常类型</span>
</div>
<div class="marquee-view">
<div class="marquee">
<div class="row">
<span class="col">202203</span>
<span class="col">江苏省XX市XX县XX镇测试渠道00001</span>
<span class="col">零销量</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">202203</span>
<span class="col">江苏省XX市XX县XX镇测试渠道00002</span>
<span class="col">流失</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">202203</span>
<span class="col">江苏省XX市XX县XX镇测试渠道00003</span>
<span class="col">零销量</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">202203</span>
<span class="col">江苏省XX市XX县XX镇测试渠道00004</span>
<span class="col">流失</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">202203</span>
<span class="col">江苏省XX市XX县XX镇测试渠道00005</span>
<span class="col">零销量</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">202203</span>
<span class="col">江苏省XX市XX县XX镇测试渠道00006</span>
<span class="col">流失</span>
<span class="icon-dot"></span>
</div>
</div>
</div>
</div>
<div class="content">
<div class="head">
<span class="col">监控时间</span>
<span class="col">渠道名称</span>
<span class="col">销量概况</span>
</div>
<div class="marquee-view">
<div class="marquee">
<div class="row">
<span class="col">202203</span>
<span class="col">江苏省XX市XX县XX镇测试渠道00001</span>
<span class="col">1000001</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">202203</span>
<span class="col">江苏省XX市XX县XX镇测试渠道00002</span>
<span class="col">1000002</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">202203</span>
<span class="col">江苏省XX市XX县XX镇测试渠道00003</span>
<span class="col">1000002</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">202203</span>
<span class="col">江苏省XX市XX县XX镇测试渠道00004</span>
<span class="col">1000002</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">202203</span>
<span class="col">江苏省XX市XX县XX镇测试渠道00005</span>
<span class="col">1000002</span>
<span class="icon-dot"></span>
</div>
<div class="row">
<span class="col">202203</span>
<span class="col">江苏省XX市XX县XX镇测试渠道00006</span>
<span class="col">1000002</span>
<span class="icon-dot"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!--点位-->
<div class="point panel">
<div class="inner">
<h3>渠道分布统计</h3>
<div class="chart">
<div class="pie"></div>
<div class="data">
<div class="item">
<h4>30100</h4>
<span>
<i class="icon-dot" style="color: #ed3f35"></i>
渠道总数
</span>
</div>
<div class="item">
<h4>418</h4>
<span>
<i class="icon-dot" style="color: #eacf19"></i>
本月新增
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="column">
<!-- 地图 -->
<div class="map">
<h3>
<span class="icon-cube"></span>
渠道数据统计
</h3>
<div class="chart">
<div class="geo"></div>
</div>
</div>
<!-- 用户 -->
<div class="users panel">
<div class="inner">
<h3>全省用户总量统计</h3>
<div class="chart">
<div class="bar"></div>
<div class="data">
<div class="item">
<h4>XXXXXX</h4>
<span>
<i class="icon-dot" style="color: #ed3f35"></i>
用户总量
</span>
</div>
<div class="item">
<h4>XXX</h4>
<span>
<i class="icon-dot" style="color: #eacf19"></i>
本月新增
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="column">
<!-- 订单 -->
<div class="order panel">
<div class="inner">
<!-- 筛选 -->
<div class="filter">
<a href="javascript:;" data-key="day365" class="active">365天</a>
<a href="javascript:;" data-key="day90">90天</a>
<a href="javascript:;" data-key="day30">30天</a>
<a href="javascript:;" data-key="day1">24小时</a>
</div>
<!-- 数据 -->
<div class="data">
<div class="item">
<h4>XXXXXXXX</h4>
<span>
<i class="icon-dot" style="color: #ed3f35;"></i>
订单量
</span>
</div>
<div class="item">
<h4>XXXXXXXXXXX</h4>
<span>
<i class="icon-dot" style="color: #eacf19;"></i>
销售额(万元)
</span>
</div>
</div>
</div>
</div>
<!-- 销售额 -->
<div class="sales panel">
<div class="inner">
<div class="caption">
<h3>销售额统计</h3>
<a href="javascript:;" class="active" data-type="year">年</a>
<a href="javascript:;" data-type="quarter">季</a>
<a href="javascript:;" data-type="month">月</a>
<a href="javascript:;" data-type="week">周</a>
</div>
<div class="chart">
<div class="label">单位:万</div>
<div class="line"></div>
</div>
</div>
</div>
<!-- 渠道 季度 -->
<div class="wrap">
<div class="channel panel">
<div class="inner">
<h3>渠道分布</h3>
<div class="data">
<div class="item">
<h4>39 <small>%</small></h4>
<span>
<i class="icon-plane"></i>
商圈
</span>
</div>
<div class="item">
<h4>28 <small>%</small></h4>
<span>
<i class="icon-bag"></i>
次商圈
</span>
</div>
</div>
<div class="data">
<div class="item">
<h4>20 <small>%</small></h4>
<span>
<i class="icon-train"></i>
乡镇
</span>
</div>
<div class="item">
<h4>13 <small>%</small></h4>
<span>
<i class="icon-bus"></i>
农村
</span>
</div>
</div>
</div>
</div>
<div class="quarter panel">
<div class="inner">
<h3>一季度销售进度</h3>
<div class="chart">
<div class="box">
<div class="gauge"></div>
<div class="label">xx<small> %</small></div>
</div>
<div class="data">
<div class="item">
<h4>xxxx</h4>
<span>
<i class="icon-dot" style="color: #6acca3"></i>
销售额(万元)
</span>
</div>
<div class="item">
<h4>150%</h4>
<span>
<i class="icon-dot" style="color: #ed3f35"></i>
同比增长
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 排行榜 -->
<div class="top panel">
<div class="inner">
<div class="all">
<h3>全省热榜</h3>
<ul>
<li>
<i class="icon-cup1" style="color: #d93f36;"></i>
套餐1
</li>
<li>
<i class="icon-cup2" style="color: #68d8fe;"></i>
套餐2
</li>
<li>
<i class="icon-cup3" style="color: #4c9bfd;"></i>
套餐3
</li>
</ul>
</div>
<div class="province">
<h3>各市热销 <i class="date">// 近30日 //</i></h3>
<div class="data">
<ul class="sup">
<li>
<span>苏州</span>
<span>xxxxx <s class="icon-up"></s></span>
</li>
<li>
<span>南京</span>
<span>xxxx <s class="icon-down"></s></span>
</li>
<li>
<span>无锡</span>
<span>xxx <s class="icon-up"></s></span>
</li>
<li>
<span>南通</span>
<span>xxx <s class="icon-down"></s></span>
</li>
<li>
<span>徐州</span>
<span>xxx <s class="icon-up"></s></span>
</li>
</ul>
<ul class="sub">
<!-- <li><span>数据</span><span> 数据<s class="icon-up"></s></span></li> -->
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.min.js"></script>
<script src="js/index.js"></script>
<script src="js/china.js"></script>
<script src="js/mymap.js"></script>
</html>代码：index.css
body{
line-height: 1.15;
font-size: 0.5rem;
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-position: 0 0 / cover;
background-color: #101129; /* 101129 ff5000 */
}
*{
margin: 0;
padding: 0;
font-weight: normal;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.viewport {
/* 限定大小 */
min-width: 1024px;
max-width: 1920px;
min-height: 780px;
margin: 0 auto;
background: url(../images/logo.png) no-repeat 0 0 / contain;
display: flex;
padding: 3.667rem 0.833rem 0;
}
.column{
flex: 3;
position: relative;
}
.column:nth-child(2){
flex: 4;
margin: 1.333rem 0.833rem 0;
}
.panel {
/* 边框 */
box-sizing: border-box;
border: 2px solid red;
border-image: url(../images/border.png) 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
}
.panel .inner {
/* 装内容 */
/* height: 60px; */
position: absolute;
top: -2.125rem;
right: -1.583rem;
bottom: -0.875rem;
left: -5.5rem;
padding: 1rem 1.5rem;
}
.panel h3{
font-size: 0.833rem;
color: #fff;
}
/* 概览区域 */
.overview{
height: 4.583rem;
}
.overview .inner{
display: flex;
justify-content: space-between;
}
.overview h4{
font-size: 1.167rem;
padding-left: 0.2rem;
color: #fff;
margin-bottom: 0.333rem
}
.overview span{
font-size: 0.667rem;
color: #4c9bfd;
}
/* 监控 */
.monitor{
height: 20rem;
}
.monitor .inner{
padding: 1rem 0;
display: flex;
flex-direction: column;
}
.monitor .tabs{
padding: 0 1.5rem;
margin-bottom: 0.75rem;
}
.monitor .tabs a{
color: #1950c4;
font-size: 0.75rem;
padding: 0 1.125rem;
}
.monitor .tabs a:first-child{
border-right: 0.083rem solid #00f2f1;
padding-left: 0;
}
.monitor .tabs a.active{
color: #fff;
}
.monitor .content{
flex: 1;
display: none;
position: relative;
}
.monitor .head{
background: rgba(255, 255, 255, 0.1);
font-size: 0.583rem;
padding: 0.5rem 1.5rem;
color: #68d8fe;
display: flex;
justify-content: space-between;
line-height: 1.05;
}
.monitor .col:nth-child(1) {
width: 3.2rem;
}
.monitor .col:nth-child(2) {
width: 8.4rem;
/* 不换行 一行省略*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.monitor .col:nth-child(3) {
width: 3.2rem;
}
.monitor .marquee-view{
position: absolute;
top: 1.6rem;
bottom: 0;
width: 100%;
overflow: hidden;
}
.monitor .row{
line-height: 1.05;
padding: 0.5rem 1.5rem;
color: #61a8ff;
font-size: 0.5rem;
position: relative;
display: flex;
justify-content: space-between;
}
.monitor .row:hover{
color:#68d8ff;
background: rgba(255, 255, 255, 0.1);
}
.monitor .row:hover .icon-dot{
opacity: 1;
}
.monitor .icon-dot{
position: absolute;
left: 0.64rem;
opacity: 0;
}
.monitor .marquee-view{
position: absolute;
top: 1.6rem;
bottom: 0;
width: 100%;
overflow: hidden;
}
.monitor .row{
line-height: 1.05;
padding: 0.5rem 1.5rem;
color: #61a8ff;
font-size: 0.5rem;
position: relative;
display: flex;
justify-content: space-between;
}
.monitor .row:hover{
color:#68d8ff;
background: rgba(255, 255, 255, 0.1);
}
.monitor .row:hover .icon-dot{
opacity: 1;
}
.monitor .icon-dot{
position: absolute;
left: 0.64rem;
opacity: 0;
}
/* ------------------------------------------------------------动画 */
@keyframes row{
0%{}
100%{
transform: translateY(-50%);
}
}
/* 调用动画 */
.monitor .marquee {
/* //infinite永久调用动画 */
animation: row 10s linear infinite;
}
/*鼠标划入 停止动画 */
.monitor .marquee:hover {
animation-play-state: paused;
}
/* 点位 */
.point {
height: 14.167rem;
}
.point .chart {
display: flex;
margin-top: 1rem;
justify-content: space-between;
}
.point .pie {
width: 13rem;
height: 10rem;
margin-left: -0.4rem;
}
.point .data {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 7rem;
padding: 1.5rem 1.25rem;
box-sizing: border-box;
background-image: url(../images/rect.png);
background-size: cover;
}
.point h4 {
margin-bottom: 0.5rem;
font-size: 1.167rem;
color: #fff;
}
.point span {
display: block;
color: #4c9bfd;
font-size: 0.667rem;
}
/* 地图 */
.map {
height: 24.1rem;
margin-bottom: 0.833rem;
display: flex;
flex-direction: column;
}
.map h3 {
line-height: 1;
padding: 0.667rem 0;
margin: 0;
font-size: 0.833rem;
color: #fff;
}
.map .icon-cube {
color: #68d8fe;
}
.map .chart {
flex: 1;
background-color: rgba(255, 255, 255, 0.05);
}
.map .geo {
width: 100%;
height: 100%;
}
/* 用户模块 */
.users {
height: 14.167rem;
display: flex;
}
.users .chart {
display: flex;
margin-top: 1rem;
}
.users .bar {
width: 24.5rem;
height: 10rem;
}
.users .data {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 7rem;
padding: 1.5rem 1.25rem;
box-sizing: border-box;
background-image: url(../images/rect.png);
background-size: cover;
}
.users h4 {
margin-bottom: 0.5rem;
font-size: 1.167rem;
color: #fff;
}
.users span {
display: block;
color: #4c9bfd;
font-size: 0.667rem;
}
/* 订单 */
.order {
height: 6.167rem;
}
.order .filter {
display: flex;
}
.order .filter a {
display: block;
height: 0.75rem;
line-height: 1;
padding: 0 0.75rem;
color: #1950c4;
font-size: 0.75rem;
border-right: 0.083rem solid #00f2f1;
}
.order .filter a:first-child {
padding-left: 0;
}
.order .filter a:last-child {
border-right: none;
}
.order .filter a.active {
color: #fff;
font-size: 0.833rem;
}
.order .data {
display: flex;
margin-top: 0.833rem;
}
.order .item {
width: 50%;
}
.order h4 {
font-size: 1.167rem;
color: #fff;
margin-bottom: 0.417rem;
}
.order span {
display: block;
color: #4c9bfd;
font-size: 0.667rem;
}
/* 销售区域 */
.sales {
height: 10.333rem;
}
.sales .caption {
display: flex;
line-height: 1;
}
.sales h3 {
height: 0.75rem;
padding-right: 0.75rem;
border-right: 0.083rem solid #00f2f1;
}
.sales a {
padding: 0.167rem;
font-size: 0.667rem;
margin: -0.125rem 0 0 0.875rem;
border-radius: 0.125rem;
color: #0bace6;
}
.sales a.active {
background-color: #4c9bfd;
color: #fff;
}
.sales .inner {
display: flex;
flex-direction: column;
}
.sales .chart {
flex: 1;
padding-top: 0.6rem;
position: relative;
}
.sales .label {
position: absolute;
left: 1.75rem;
top: 0.75rem;
color: #4996f5;
font-size: 0.583rem;
}
.sales .line {
width: 100%;
height: 100%;
}
/* 渠道区块 */
.wrap {
display: flex;
}
.channel,
.quarter {
flex: 1;
height: 9.667rem;
}
.channel {
margin-right: 0.833rem;
}
.channel .data {
overflow: hidden;
}
.channel .item {
margin-top: 0.85rem;
}
.channel .item:first-child {
float: left;
}
.channel .item:last-child {
float: right;
}
.channel h4 {
color: #fff;
font-size: 1.333rem;
margin-bottom: 0.2rem;
}
.channel small {
font-size: 50%;
}
.channel span {
display: block;
color: #4c9bfd;
font-size: 0.583rem;
}
/* 季度区块 */
.quarter .inner {
display: flex;
flex-direction: column;
margin: 0 -0.25rem;
}
.quarter .chart {
flex: 1;
padding-top: 0.75rem;
}
.quarter .box {
position: relative;
}
.quarter .label {
transform: translate(-50%, -30%);
color: #fff;
font-size: 1.25rem;
position: absolute;
left: 50%;
top: 50%;
}
.quarter .label small {
font-size: 50%;
}
.quarter .gauge {
height: 3.5rem;
}
.quarter .data {
display: flex;
justify-content: space-between;
}
.quarter .item {
width: 50%;
}
.quarter h4 {
color: #fff;
font-size: 1rem;
margin-bottom: 0.4rem;
}
.quarter span {
display: block;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: #4c9bfd;
font-size: 0.583rem;
}
/* 排行榜 */
.top {
height: 11.8rem;
}
.top .inner {
display: flex;
}
.top .all {
display: flex;
flex-direction: column;
width: 7rem;
color: #4c9bfd;
font-size: 0.6rem;
vertical-align: middle;
}
.top .all ul {
padding-left: 0.5rem;
margin-top: 0.5rem;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.top .all li {
overflow: hidden;
}
.top .all [class^="icon-"] {
font-size: 1.5rem;
vertical-align: middle;
margin-right: 0.5rem;
}
.top .province {
flex: 1;
display: flex;
flex-direction: column;
color: #fff;
}
.top .province i {
padding: 0 0.5rem;
margin-top: 0.208rem;
float: right;
font-style: normal;
font-size: 0.583rem;
color: #0bace6;
}
.top .province s {
display: inline-block;
transform: scale(0.8);
text-decoration: none;
}
.top .province .icon-up {
color: #dc3c33;
}
.top .province .icon-down {
color: #36be90;
}
.top .province .data {
flex: 1;
display: flex;
margin-top: 0.6rem;
}
.top .province ul {
flex: 1;
line-height: 1;
margin-bottom: 0.25rem;
}
.top .province ul li {
display: flex;
justify-content: space-between;
}
.top .province ul span {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.top .province ul.sup {
font-size: 0.583rem;
}
.top .province ul.sup li {
color: #4995f4;
padding: 0.5rem;
}
.top .province ul.sup li.active {
color: #a3c6f2;
background-color: rgba(10, 67, 188, 0.2);
}
.top .province ul.sub {
display: flex;
flex-direction: column;
justify-content: space-around;
font-size: 0.5rem;
background-color: rgba(10, 67, 188, 0.2);
}
.top .province ul.sub li {
color: #52ffff;
padding: 0.417rem 0.6rem;
}
.clock {
position: absolute;
top: -1.5rem;
right: 1.667rem;
font-size: 0.833rem;
color: #0bace6;
}
.clock i {
margin-right: 5px;
font-size: 0.833rem;
}
@media screen and (max-width: 1600px) {
.top span {
transform: scale(0.9);
}
.top .province ul.sup li {
padding: 0.4rem 0.5rem;
}
.top .province ul.sub li {
padding: 0.23rem 0.5rem;
}
.quarter span {
transform: scale(0.9);
}
}这个案例用了js的jquery和echart框架，代码比较多，我就不一一罗列了，大家可以到我发布的这个资源链接来下来，免费。由于资源发布的审核需要一点时间，现在还看不到的猿友，可以把帖子先收藏了，过几天再来下载，资源审核通过后我会第一时间更新。
第二种：固定宽高像素。用于显示的屏幕尺寸和像素，可以通过放大或缩小显示比例来调节，windows系统是按住ctrl键+鼠标滚动即可放大或缩小。由于主题是演示整体布局，本例只给出了布局实现，内容填充省略了，请猿友根据需要自行调整。
效果图：
代码：index1.htm文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数据看板演示01</title>
<link rel="stylesheet" href="css/index1.css">
</head>
<body>
<center>
<!--整个页面容器-->
<div class="all_page">
<!--标题-->
<div class="title">
渠道数据演示大屏
</div>
<!--页面布局行之间分割div-->
<div class="split_row20"></div>
<!--页面布局最左边的一列-->
<div class="left_col float_left">
<div class="clear left_zone1">
</div>
<!--区域布局行之间分割div-->
<div class="split_row20"></div>
<div class="left_zone2">
</div>
<!--区域布局行之间分割div-->
<div class="split_row20"></div>
<div class="left_zone3">
</div>
<!--区域布局行之间分割div-->
<div class="split_row20"></div>
<div class="left_zone4">
</div>
</div>
<!--页面布局列之间分割div-->
<div class="split_column20 float_left"></div>
<!--页面布局中间的一列-->
<div class="middle_col float_left">
<div class="clear middle_zone1">
<div class="middle_zone_title float_left">
</div>
<div class="split_column20 float_left"></div>
<div class="middle_zone_title float_left">
</div>
<div class="split_column20 float_left"></div>
<div class="middle_zone_title float_left">
</div>
<div class="split_column20 float_left"></div>
<div class="middle_zone_title float_left">
</div>
<div class="split_column20 float_left"></div>
<div class="middle_zone_title float_left">
</div>
</div>
<!--区域布局行之间分割div-->
<div class="split_row20"></div>
<div class="middle_zone2">
</div>
<!--区域布局行之间分割div-->
<div class="split_row20"></div>
<div class="middle_zone3">
</div>
</div>
<!--页面布局列之间分割div-->
<div class="split_column20 float_left"></div>
<!--页面布局最右边的一列-->
<div class="right_col float_left">
<div class="clear right_zone1">
</div>
<!--区域布局行之间分割div-->
<div class="split_row20"></div>
<div class="right_zone2">
</div>
<!--区域布局行之间分割div-->
<div class="split_row20"></div>
<div class="right_zone3">
</div>
<!--区域布局行之间分割div-->
<div class="split_row20"></div>
<div class="right_zone4">
</div>
</div>
</div>
</center>
</body>
</html>代码：index1.css文件
body{
margin: 0;
padding: 0;
line-height: 1.15;
font-size: 0.5rem;
background-repeat: no-repeat;
background-position: 0 0 / cover;
background-color: #101129;
}
*{
margin: 0;
padding: 0;
font-weight: normal;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
.all_page {
width:1980px;
font-color:#ffffff;
/*background-color:#ccc;*/
}
.title{
width:100%;
font-size:40px;
font-family:微软雅黑;
height:80px;
line-height:80px;
color:#00deff;
}
.left_col{
width:550px;
}
.middle_col{
width:840px;
}
.right_col{
width:550px;
}
.float_left{
float:left;
}
.split_column10{
width:10px;
}
.split_column20{
width:20px;
height:1px;
}
.split_row10{
height:10px;
}
.split_row20{
height:20px;
}
.clear{
float:clear;
}
/*边框颜色 006cff*/
.left_zone1{
width:100%;
height:150px;
box-shadow: rgb(0, 108, 255) 0px 0px 10px inset;
}
.left_zone2{
width:100%;
height:250px;
box-shadow: rgb(0, 108, 255) 0px 0px 10px inset;
}
.left_zone3{
width:100%;
height:250px;
box-shadow: rgb(0, 108, 255) 0px 0px 10px inset;
}
.left_zone4{
width:100%;
height:250px;
box-shadow: rgb(0, 108, 255) 0px 0px 10px inset;
}
.middle_zone1{
width:100%;
height:150px;
}
.middle_zone2{
width:100%;
height:520px;
}
.middle_zone3{
width:100%;
height:250px;
box-shadow: rgb(0, 108, 255) 0px 0px 10px inset;
}
.middle_zone_title{
width:152px;
height:147px;
border-top:3px solid #3333ff;
filter:alpha(Opacity=10); /*ie半透明*/
-moz-opacity:0.1; /*火狐半透明*/
opacity: 0.1; /*ie以外浏览器半透明*/
background-color:#dddddd;
}
.right_zone1{
width:100%;
height:150px;
box-shadow: rgb(0, 108, 255) 0px 0px 10px inset;
}
.right_zone2{
width:100%;
height:250px;
box-shadow: rgb(0, 108, 255) 0px 0px 10px inset;
}
.right_zone3{
width:100%;
height:250px;
box-shadow: rgb(0, 108, 255) 0px 0px 10px inset;
}
.right_zone4{
width:100%;
height:250px;
border-color:#;
box-shadow: rgb(0, 108, 255) 0px 0px 10px inset;
}如果觉得本文对你有帮助，请给个赞来，猿友们的鼓励是我继续发帖的动力，谢谢。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
