正规的彩票

使用CSS和Java来构建管理仪表盘布局的实例代码

  发布时间: 2019-06-24 15:17:08   作者: daique1908   正规的彩票要评论
这篇文章主要介绍了使用CSS和Java来构建管理仪表盘布局的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

最终产品图片

ninjiangyaochuangzaode

zaizheigexinjiaochengzhong,zhengguidecaipiaojiangshiyongcsshejavascriptlaichuangjianxiangyingshiguanliyibiaobanbuju。 yaogoujianta,zhengguidecaipiaojiangcongwordpressyibiaobanzhongjiejianyixiexiangfa,liruqikezhediedecebianlancaidan。

zaizhenggejiaochengzhong,zhengguidecaipiaojiangmianlinxuduotiaozhan,danshizheixietiaozhanjiangweizhengguidecaipiaotigonglianghaodeshijianjiqiao,yitigaozhengguidecaipiaodeqianduanjineng。

事不宜迟,让正规的彩票看一下最终的管理仪表板演示(单击侧边栏底部的“ 折叠”按钮以查看可折叠的导航功能,并查看全屏版本以发挥其响应能力):

1.从页面标记开始

正规的彩票yaokaishibiaoji,zhengguidecaipiaoxuyaoyigesvg,yigebiaotiheyigebufen:

<svg style="display:none;">...</svg>
<header class="page-header">...</header>
<section class="page-content">...</section>

SVG精灵

正规的彩票ninkenenghuixiangdao,zairenheguanlikongzhitaizhong,zhengguidecaipiaodouxuyaoyiduitubiao。 zhideqingxingdeshi, envato elementstigongleyuelaiyueduodeyouyongshiliangtubiaojihe,yinci,rangzhengguidecaipiaoliyonggaikubingxiazaizheixietradehedashboard icons 。

贸易和仪表板图标

正规的彩票Envato元素上的贸易和仪表板图标

与其通过imgsvg标签将它们直接包含在页面中,不如让正规的彩票更进一步以创建SVG精灵。 为此,正规的彩票将所有图标包装在SVG容器中。 该容器应该是隐藏的,因此正规的彩票将对其应用display: none 。 如果正规的彩票不隐藏它,则页面顶部会出现一个很大的空白区域。

每个图标将放置在具有唯一ID和viewBox属性的symbol元素内,该属性取决于图标的大小。 然后,只要需要,正规的彩票就可以通过调用use正规的彩票元素来呈现目标图标(正规的彩票将在稍后展示给您看)。

xianzai,rangzhengguidecaipiaoshuxisvg spritesuoxudebiaoji:

<svg style="display:none;">
  <symbol id="down" viewBox="0 0 16 16">
    <polygon points="3.81 4.38 8 8.57 12.19 4.38 13.71 5.91 8 11.62 2.29 5.91 3.81 4.38" />
  </symbol>
  <symbol id="users" viewBox="0 0 16 16">
    <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,15a7,7,0,0,1-5.19-2.32,2.71,2.71,0,0,1,1.7-1,13.11,13.11,0,0,0,1.29-.28,2.32,2.32,0,0,0,.94-.34,1.17,1.17,0,0,0-.27-.7h0A3.61,3.61,0,0,1,5.15,7.49,3.18,3.18,0,0,1,8,4.07a3.18,3.18,0,0,1,2.86,3.42,3.6,3.6,0,0,1-1.32,2.88h0a1.13,1.13,0,0,0-.27.69,2.68,2.68,0,0,0,.93.31,10.81,10.81,0,0,0,1.28.23,2.63,2.63,0,0,1,1.78,1A7,7,0,0,1,8,15Z" /> 
  </symbol>
  
  <!-- more symbols here -->
</svg>

shijishang,zheijiushizhengguidecaipiaochuangjianneizhisvg spritesuoxudequanbu。

标头

jixuzhengguidecaipiaodeguanliyibiaobanbuju,rangzhengguidecaipiaokanyixiayemianbiaoti。

在其中,正规的彩票将定义一个nav元素,它将用作以下元素的包装:

  • 徽标
  • 折叠按钮,将在移动屏幕上切换菜单
  • 菜单本身将包含菜单链接,两个标题以及折叠/展开按钮。 从语义上来说,拥有两个单独的菜单并将标题放在它们外面可能更正确,但是如果您愿意,可以采用不同的方法。

zheishikuanping(> 767px)shangdeyangzi:

标头布局
 

biaotoujiegou:

<header class="page-header">
  <nav>
    <a href="#0">
      <img class="logo" src="logo.svg" alt="forecastr logo">
    </a>
    <button class="toggle-mob-menu" aria-expanded="false" aria-label="open menu">
      <svg width="20" height="20" aria-hidden="true">
        <use xlink:href="#down"></use>
      </svg>
    </button>
    <ul class="admin-menu">
      <li class="menu-heading">
        <h3>Admin</h3>
      </li>
      <li>
        <a href="#0">
          <svg>
            <use xlink:href="#pages"></use>
          </svg>
          <span>Pages</span>
        </a>
      </li>
      
      <!-- more list items here -->
      
      <li>
        <button class="collapse-btn" aria-expanded="true" aria-label="collapse menu">
          <svg aria-hidden="true">
            <use xlink:href="#collapse"></use>
          </svg>
          <span>Collapse</span>
        </button>
      </li>
    </ul>
  </nav>
</header>

zhuyishangmiandedaimazhongdeliangjianshi:

  • 正规的彩票如何使用use元素引用目标图标。
  • 正规的彩票添加到切换按钮的ARIA属性( aria-expandedaria-labelaria-hidden )。 这些属性将帮助正规的彩票使组件更易于访问。 稍后,正规的彩票将讨论如何根据按钮的状态更新其值。

部分

正规的彩票gaibufenjiangbaohanlianggeqiantaobufen。

第1节

zaidiyibufendeneibu,zhengguidecaipiaojiangfangzhisousuobiaodanheyixieyouguandangqiandengluyonghudexinxi(mingcheng,touxianghetongzhi)。

正规的彩票zheishitazaikuanping(> 767px)shangdewaiguan:

第一部分的布局
 

bufenjiegou:

<section class="search-and-user">
  <form>
    <input type="search" placeholder="Search Pages...">
    <button type="submit" aria-label="submit form">
      <svg aria-hidden="true">
        <use xlink:href="#search"></use>
      </svg>
    </button>
  </form>
  <div class="admin-profile">
    <span class="greeting">...</span>
    <div class="notifications">
      <span class="badge">...</span>
      <svg>
        <use xlink:href="#users"></use>
      </svg>
    </div>
  </div>
</section>

tongyang,qingzhuyi,zhengguidecaipiaoxiangtijiaoanniutianjialeyixieariashuxing。

di2jie

正规的彩票zaidierbufenzhong,jinshiweileshiyanshizhongchongshiyixiexunineirong,zhengguidecaipiaojiangfangzhiyiduiwenzhangzhanweifu。 zheixietongchangkenengbaohanbiaogeshuju,tubiaohuomouzhongxingshidetiyao。

“最多使用5–7个不同的小部件来创建视图。 否则,用户将很难集中精力并获得清晰的概览。” – 塔拉斯Bakusevych

zheishitazaikuanping(> 767px)shangdewaiguan:

第二部分的布局

genjuuxzuijiashijian,ninkenengbuxuyaozheimeduobufen

bufenjiegou:

<section class="page-content">
  <section class="grid">
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </section>
</section>

2.定义一些基本样式

准备好正规的彩票的管理控制台标记后,正规的彩票将继续使用CSS。 与往常一样,第一步是指定一些CSS变量和常见的重置样式:
 

:root {
  --page-header-bgColor: #242e42;
  --page-header-bgColor-hover: #1d2636;
  --page-header-txtColor: #dde9f8;
  --page-header-headingColor: #7889a4;
  --page-header-width: 220px;
  --page-content-bgColor: #f0f1f6;
  --page-content-txtColor: #171616;
  --page-content-blockColor: #fff;
  --white: #fff;
  --black: #333;
  --blue: #00b9eb;
  --red: #ec1848;
  --border-radius: 4px;
  --box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.075);
}
 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
 
ul {
  list-style: none;
}
 
a,
button {
  color: inherit;
}
 
a {
  text-decoration: none;
}
 
button {
  background: none;
  cursor: pointer;
}
 
input {
  -webkit-appearance: none;
}
 
button,
input {
  border: none;
}
 
svg {
  display: block;
}
 
body {
  font: 16px/1.5 "Lato", sans-serif;
}

注意 : 为简单起见,正规的彩票不会逐步学习本教程中的所有 CSS规则。 这里有将近400行CSS。 如果需要,可以通过单击演示项目的CSS选项卡将其全部选中。

3.定义主仪表板样式

zhici,zhengguidecaipiaozhunbeizhuanzhuyuyemianyangshi。

shezhibiaoti

biaotoujiangshigudingweizhiyuansu。 qikuandujiangwei220px,qigaodudengyushikougaodu。 ruguoqineirongchaoguoshikougaodu,zejiangxianshiyigechuizhigundongtiao。

nav正规的彩票元素的行为将是高度至少为100%的flex容器。 请记住,它的直接子对象是三个:

huibiao yidongcaidanqiehuananniu, hecaidan。

正规的彩票qiehuananniujinzaixiaopingmu(<768px)shangkejian。 zheishizhengguidecaipiaoxuyaodeyangshi:

 

/*CUSTOM VARIABLES HERE*/
 
.page-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  padding-top: 20px;
  width: var(--page-header-width);
  color: var(--page-header-txtColor);
  background: var(--page-header-bgColor);
}
 
.page-header nav {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
 
.page-header .toggle-mob-menu {
  display: none;
}

提示: 如果您希望覆盖整个页面高度的绝对定位页眉,请添加以下样式:

body {
  position: relative;
}
 
.page-header {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  
  /*Comment these styles*/
  /*position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;*/
}

菜单样式

菜单将用作flex容器,正规的彩票将为其指定flex: 1 ,以便其展开并覆盖整个父级高度。

最后一个菜单项将被设置为margin-top: auto正规的彩票因为它应该位于菜单的最底部。 当标题滚动条不出现时,此行为将更加清楚。 要对其进行测试,请尝试删除一些菜单项,或在高屏幕上查看演示。

caidanzhongdelianjieheanniuyejiangchongdangdanxingrongqi,qineirong(wenbenhetubiao)yingchuizhiduiqi。

yuqitacaidanyuansuxiangbi,caidanbiaotiyaoxiaoyixie。 ciwai,zhengguidecaipiaojiangzengjiaqizifuzhijiandejianju。

zheishicaidanyangshideyibufen:

/*CUSTOM VARIABLES HERE*/
 
.page-header .admin-menu {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-top: 35px;
}
 
.page-header .admin-menu li:last-child {
  margin-top: auto;
  margin-bottom: 20px;
}
 
.page-header .admin-menu li > * {
  width: 100%;
  padding: 12px 15px;
}
 
.page-header .admin-menu a,
.page-header .admin-menu button {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  transition: background 0.2s, color 0.2s;
}
 
.page-header .admin-menu .menu-heading h3 {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 12px;
  margin-top: 12px;
  color: var(--page-header-headingColor);
}

yemianneirongyangshi

请记住, .page-content部分包含两个子部分。

此部分将放置在距视口左侧220px的位置。 另外,正规的彩票将其width: calc(100% - 220px) 。 请注意,它的left属性值等于标题宽度。
 

qiyangshi:

/*CUSTOM VARIABLES HERE*/
 
.page-content {
  position: relative;
  left: var(--page-header-width);
  width: calc(100% - var(--page-header-width));
  min-height: 100vh;
  padding: 30px;
  color: var(--page-content-txtColor);
  background: var(--page-content-bgColor);
}

sousuoheyonghuyangshi

另外,请记住, .search-and-user部分包含两个元素: 搜索表单和.admin-profile
 

weilejinxingbuju,zhengguidecaipiaojiangshiyongcss grid。 sousuobiaodanjiangfugaiquanbukeyongkongjian,bingqieyuqixiongdijiemeizhijianhuiyou50pxdejianju。 lianggexiongdijiangchuizhiduiqi。

biaodanneidetijiaoanniujiangchuyujueduiweizhi。 tazhihuibaohanyigezhuangshixingtubiao,yincizhengguidecaipiaoxuyaoyigeariashuxing,yiyunxupingmuyueduqiduiqijinxingjieshibingshiqikefangwen。

包含两个元素的.admin-profile将充当具有垂直居中内容的flex容器。 badge(counter)元素将以水平和垂直居中的内容绝对定位在其父对象内部。

zheishicibufensuoxuyangshideyibufen:

/*CUSTOM VARIABLES HERE*/
 
.search-and-user {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 50px;
  align-items: center;
  background: var(--page-content-bgColor);
  margin-bottom: 30px;
}
 
.search-and-user form {
  position: relative;
}
 
.search-and-user form button {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}
 
.search-and-user .admin-profile {
  display: flex;
  align-items: center;
}
 
.search-and-user .admin-profile .notifications {
  position: relative;
}
 
.search-and-user .admin-profile .badge {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -10px;
  right: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  color: var(--white);
  background: var(--red);
}

网格样式
 

yaozaizhengguidecaipiaodeguanliyibiaobanshangbuzhiwenzhang,zhengguidecaipiaojiangliyongcsswangge。 zhengguidecaipiaojiangweisuoyouwenzhangtigong300pxdegudinggaodu。 chulediyipianhezuihouyipianwenzhangjiangfugaizhenggefukuandu,qitasuoyouwenzhangdoujiangchengweiliangliebujudeyibufen。

关联的样式:
 

/*CUSTOM VARIABLES HERE*/
 
.page-content .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 30px;
}
 
.page-content .grid > article {
  display: flex;
  height: 300px;
  background: var(--page-content-blockColor);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}
 
.page-content .grid > article:first-child,
.page-content .grid > article:last-child {
  grid-column: 1 / -1;
}

4.切换标题

正规的彩票meicizhengguidecaipiaodanjizhedie/zhankaianniushi,biaotizhuangtaidouhuigaibian。 ruguozhankai,tajiangzhedie(jinbaoliucaidanxiangdetubiaobianti),fanzhiyiran。

标头的expandcollapsed状态
 

正规的彩票qingjizhu,cigongnengjinzaidayu767pxdepingmushangkeyong。 duiyujiaoxiaodepingmu,biaotijiangjuyoubutongdebuju,shaohouzhengguidecaipiaojiangjieshao。

在标头处于折叠状态时,主体接收collapsed类。 到那时,发生了以下事情:

  • 标题缩小。 其宽度从220px变为40px。
  • 响应于此, .page-content节增大。 具体来说,其宽度从width: calc(100% - 220px)变为width: calc(100% - 40px) 。 此外,其left属性值变为40px而不是220px。
  • 徽标,菜单标题,菜单链接文本和菜单按钮文本消失。
  • 切换按钮的aria-expandedaria-label属性值已更新。 另外,其图标旋转了180度,因此看起来像是展开图标。

zheishishixiancigongnengjavascriptdaima:

const body = document.body;
const collapseBtn = document.querySelector(".admin-menu button");
const collapsedClass = "collapsed";
 
collapseBtn.addEventListener("click", function() {
  this.getAttribute("aria-expanded") == "true"
    ? this.setAttribute("aria-expanded", "false")
    : this.setAttribute("aria-expanded", "true");
  this.getAttribute("aria-label") == "collapse menu"
    ? this.setAttribute("aria-label", "expand menu")
    : this.setAttribute("aria-label", "collapse menu");
  body.classList.toggle(collapsedClass);
});

正规的彩票yijisuoyouxiangguandeyangshi:

/*CUSTOM VARIABLES HERE*/
 
@media screen and (min-width: 768px) {
  .collapsed .page-header {
    width: 40px;
  }
 
  .collapsed .page-header .admin-menu li > * {
    padding: 10px;
  }
 
  .collapsed .page-header .logo,
  .collapsed .page-header .admin-menu span,
  .collapsed .page-header .admin-menu .menu-heading {
    display: none;
  }
 
  .collapsed .page-header .admin-menu svg {
    margin-right: 0;
  }
 
  .collapsed .page-header .collapse-btn svg {
    transform: rotate(180deg);
  }
 
  .collapsed .page-content {
    left: 40px;
    width: calc(100% - 40px);
  }
}

5.在管理菜单项上显示工具提示

xianzai,rangzhengguidecaipiaogengjinyibu,bingxiangkezhediebiaotoutianjialingyigexingongneng。

正规的彩票ruqianyijiesuoshu,dangbiaotizhedieshi,caidanlianjiedewenbenjiangxiaoshi。 zheiyiweizhedaoneishi,jinsvgtubiaojiangkejian。 yinci,rangzhengguidecaipiaoxianshiyigegongjutishi,shiyonghukeyigenghaodilejiemeigelianjiedezuoyong。

为此,每次将菜单链接(图标)悬停在上方时,正规的彩票都会向其添加title属性,其值为纯文本。 但是同样,仅当标题折叠且窗口宽度至少为768px时,才应该发生这种情况。

工具提示
 

yixiashixiangyingjavascript:

const body = document.body;
const menuLinks = document.querySelectorAll(".admin-menu a");
const collapsedClass = "collapsed";
 
for (const link of menuLinks) {
  link.addEventListener("mouseenter", function() {
    body.classList.contains(collapsedClass) &&
    window.matchMedia("(min-width: 768px)").matches
      ? this.setAttribute("title", this.textContent)
      : this.removeAttribute("title");
  });
}

6.积极响应

正规的彩票zaikuanda767xiangsudepingmushang,zhengguidecaipiaodeyemianruxiasuoshi:

移动版式
 

zheiyuzhengguidecaipiaodecebianlananpaiyouhendadebutong,duiba? rangzhengguidecaipiaozhongdianjieshaoyutaishijibanbenxiangbizuizhongyaodequbie:

  • 标头和.page-content都具有position: staticwidth: 100%
  • nav元素的伸缩方向从column更改为row
  • 移动菜单切换按钮变为可见。
  • 菜单绝对位于标题下方,并且最初是隐藏的。 每次正规的彩票点击切换按钮时,它就会变得可见。
  • 折叠/展开按钮和.greeting元素被隐藏。
  • .search-and-user部分绝对位于移动菜单切换按钮的旁边。

正规的彩票zaixiamian,ninkeyikandaobufenxiangyingshiyangshi:

@media screen and (max-width: 767px) {
  .page-header,
  .page-content {
    position: static;
    width: 100%;
  }
 
  .page-header nav {
    flex-direction: row;
  }
 
  .page-header .toggle-mob-menu {
    display: block;
  }
 
  .page-header .admin-menu {
    position: absolute;
    left: 98px;
    top: 57px;
    margin-top: 0;
    z-index: 2;
    border-radius: var(--border-radius);
    background: var(--page-header-bgColor);
    visibility: hidden;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.2s;
  }
  
  .page-header .admin-menu li:last-child,
  .search-and-user .admin-profile .greeting {
    display: none;
  }
 
  .search-and-user {
    position: absolute;
    left: 131px;
    top: 10px;
    padding: 0;
    grid-column-gap: 5px;
    width: calc(100% - 141px);
    border-radius: var(--border-radius);
    background: transparent;
  }
}

7.切换手机菜单

meicidanjiqiehuananniushi,caidanzhuangtaidouhuigaibian。 ruguokuozhan,tajiangbengkui,fanzhiyiran。

移动菜单的打开状态
 

在菜单的展开状态下,主体将接受生物mob-menu-opened类。 到那时,发生了以下事情:

  • 出现菜单。
  • 切换按钮的aria-expandedaria-label属性值已更新。 另外,其图标旋转了180度,因此看起来像是展开图标。

zheishibixujavascriptdaima:

const body = document.body;
const toggleMobileMenu = document.querySelector(".toggle-mob-menu");
 
toggleMobileMenu.addEventListener("click", function() {
  this.getAttribute("aria-expanded") == "true"
    ? this.setAttribute("aria-expanded", "false")
    : this.setAttribute("aria-expanded", "true");
  this.getAttribute("aria-label") == "open menu"
    ? this.setAttribute("aria-label", "close menu")
    : this.setAttribute("aria-label", "open menu");
  body.classList.toggle("mob-menu-opened");
});

yijixiangguancss:

.page-header .toggle-mob-menu svg {
  transition: transform 0.2s;
}
 
.page-header .admin-menu {
  transition: all 0.2s;
}
 
.mob-menu-opened .toggle-mob-menu svg {
  transform: rotate(180deg);
}
 
.mob-menu-opened .page-header .admin-menu {
  transform: scale(1);
  visibility: visible;
  opacity: 1;
}

结论

正规的彩票jiushizheiyang! zhengguidecaipiaochenggonggoujianlegongnengqiquandeguanliyibiaobanbuju。 ninjiangkeyizaicijichushangkuozhanyichuangjiangezhongguanlijiemian。 xiwangninhezhengguidecaipiaoyiyangxihuanzheicilvxing!

最后一点。 正规的彩票当然不是可访问性专家,但是正规的彩票尝试通过添加一些常见的ARIA属性使此组件更易于访问。 在此过程中,正规的彩票检查了WordPress和Codepen仪表板以供参考。 代码中可能还包含其他ARIA属性。 例如,正规的彩票排除了负责标识相关内容的aria-controls正规的彩票属性,但这是因为Aria-Controls是Poop 。

ruguozhengguidecaipiaocuoguolerenheshiqing,huozheninrenweimouxieshiqingyinggaizuodebutong,qingzaixiamiandepinglunzhonggaosuzhengguidecaipiao。

正规的彩票yirujiwang,ganxienindeyuedu!

fanyizi:

正规的彩票daocizheipianguanyushiyongcsshejavalaigoujianguanliyibiaopanbujudeshilidaimadewenzhangjiujieshaodaozheile,gengduoxiangguancss guanliyibiaopanbujuneirongqingsousuojiaobenzhijiayiqiandewenzhanghuojixuliulanxiamiandezhengguidecaipiaoxiangguandewenzhang,xiwangdajiayihouduoduozhichijiaobenzhijia!

正规的彩票相关的文章

  • 深入浅析CSS3中的Flex布局整理

    Flexbox布局模块旨在提供一个更有效的方式,在一个容器里面去布局分配空间。这篇文章给大家介绍CSS3中的Flex布局,本文通过实例代码给大家介绍的非常详细,对大家的学习或
    2019-04-27
  • CSS实现动态图片的九宫格布局的实例代码

    这篇文章主要介绍了CSS实现动态图片的九宫格布局的实例代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-03
  • css之display属性之inline-block布局实现详解

    今天学习css样式的时候发现很多网站都是用css的display:inline-block这个属性,这里刚好有篇特别好的解释,特分享一下
    2019-03-21
  • 详解CSS中的flex布局

    flex布局又称为弹性布局,任何一个容器都可以指定为flex布局,这篇文章主要介绍了CSS中的flex布局,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参
    2019-03-19
  • css用Flex布局制作简易柱状图的实现

    这篇文章主要介绍了css用Flex布局制作简易柱状图的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起
    2019-03-17

最新评论

正规的彩票_正规彩票平台app下载[首页最快线路√] 彩票官网_彩票官网app|网站首页 彩票平台_彩票平台快三-[平台最快线路√] 彩票app下载_彩票app下载官网下载快三_官方入口 彩票平台_彩票平台app-专注彩票门户 彩票官网_彩票官网app下载网址-HOME 彩票平台_彩票平台登录-老品牌最信誉 彩票app_彩票app客户端下载>> 首页 彩票平台_彩票平台免费送彩金18-点击进入>! 彩票平台_彩票平台官网〖2020购彩首选〗 彩票app_彩票app彩票投注平台-Welcome