grid實戰之微信錢包騰訊服務界面

時間 2019-11-11

標籤 grid 實戰微信錢包騰訊服務界面欄目騰訊简体版

原文原文鏈接

網格佈局簡介

CSS3網格佈局是讓開發人員設計一個網格並將內容放在這些網格內。而不是使用浮動製做一個網格，其實是你將一個元素聲明爲一個網格容器，並把元素內容置於網格中。css

有一些瀏覽器是不支持網格佈局的，能夠從caniuse這個網站查看各個瀏覽器是否支持這些css3中的新屬性,綠色表示支持，紅色表示不支持，另外一種顏色表示部分支持，如圖（查看各個瀏覽器是否支持grid佈局）：html

經過下面這張圖片能夠了解網格佈局的基本概念css3

先來個表情包happy一下吧哈哈哈web

代碼部分

頁面佈局：chrome

<!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>WEUI GRID</title>
  <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
  <link rel="stylesheet" href="./static/css/common.css">
  <link rel="stylesheet" href="./static/css/grid.css">
  <link rel="stylesheet" href="./static/css/iconfont.css">
</head>
<body>
  <div class="container">
        <div class="page__hd">
          <p class="page__title">騰訊服務</p>
        </div>
      <!-- 九宮格 start-->
      <div class="grids">
          <a href="#" class="grid">
              <i class="iconfont icon-xinyongkahuankuan"></i>
              <p class="grid__label">信用卡還款</p>
          </a>
          <a href="#" class="grid">
                <i class="iconfont icon-jieqian"></i>
              <p class="grid__label">微粒貸借錢</p>
          </a>
          <a href="#" class="grid">
                <i class="iconfont icon-dibugeicon_jieqian"></i>
              <p class="grid__label">手機充值</p>
          </a>
          <a href="#" class="grid">
                <i class="iconfont icon-licaitong"></i>
              <p class="grid__label">理財通</p>
          </a>
          <a href="#" class="grid">
                <i class="iconfont icon-shenghuojiaofei"></i>
              <p class="grid__label">生活繳費</p>
          </a>
          <a href="#" class="grid">
                <i class="iconfont icon-qq"></i>
              <p class="grid__label">Q幣充值</p>
          </a>
          <a href="#" class="grid">
                <i class="iconfont icon-chengshifuwu"></i>
              <p class="grid__label">城市服務</p>
          </a>
          <a href="#" class="grid">
                <i class="iconfont icon-love"></i>
              <p class="grid__label">騰訊公益</p>
          </a>
          <a href="#" class="grid"></a>
      </div>
      <!-- 九宮格 end -->
    </div>
  </div>
</body>
</html>

公共樣式css:瀏覽器

* {
    margin: 0;
    padding: 0;
  }

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  line-height: 1.6;
  background-color: #EFEFF4;
}
.container{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 0.37037037rem;
}
.page__hd {
  padding: 10px;
}
.page__title {
  text-align: left;
  color: #716F76;
}
.grids {
  display: grid;
  grid-template-columns: repeat(3,3.33333333rem);
  grid-template-rows: repeat(3,3.33333333rem);
}
.grid {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-decoration: none;
  background-color: #FFFFFF;
  color: #707070;
}

在grids中設置網格佈局，display:grid;grid-template-columns屬性設置網格佈局中每列的寬度，grid-template-rows屬性設置網格佈局中每行的高度，因爲在head中導入了淘寶的flexible，因此設置寬高時用了相對單位rem，grid-template-columns: repeat(3,3.33333333rem)至關於grid-template-columns: 3.33333333rem 3.33333333rem 3.33333333rem,grid-template-rows: repeat(3,3.33333333rem)同理；微信

在微信的界面中是有「邊框的」，這裏用了僞元素來實現
代碼以下：app

/* author: 倪子紅
date: 17-11-28 */
.grids {
    position: relative;
    overflow: hidden;
}
.grids:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   border-top: 1px solid #E5E5E5;
   /* 1px 問題 retina 手機 1px很粗*/
   /* -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0; */
}
.grids:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #E5E5E5;
 }
 .grid {
     position: relative;
     float: left;
     padding: 20px 10px;
     box-sizing: border-box;
 }
 .grid:before {
     content: "";
     position: absolute;
     right: 0;
     top: 0;
     bottom: 0;
     width: 1px;
     border-right: 1px solid #E5E5E5;
 }
 .grid:after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 1px;
    border-bottom: 1px solid #E5E5E5;
}

有的手機存在「1px問題」，能夠經過transform和transform-origin屬性來解決這個問題svg

個人全部圖標是從iconfont這個網站獲得的，下面也放出圖標的樣式佈局

@font-face {font-family: "iconfont";
  src: url('../iconfont.eot?t=1511887164151'); /* IE9*/
  src: url('../iconfont.eot?t=1511887164151#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('../iconfont.ttf?t=1511887164151') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('../iconfont.svg?t=1511887164151#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size: 0.78703704rem;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-xinyongkahuankuan {
  color: #00B25E;
}
.icon-qq {
  color: #47A6DF;
}
.icon-love {
  color: #EC6066;
}
.icon-shenghuojiaofei {
  color: #00B25E;
}
.icon-chengshifuwu {
  color: #00B25E;
}
.icon-licaitong {
  color: #439DD1;
}
.icon-dibugeicon_jieqian {
  color: #588DB4;
}
.icon-jieqian {
  color: #D5912B;
}

.icon-xinyongkahuankuan:before { content: "\e621"; }

.icon-qq:before { content: "\e61e"; }

.icon-dibugeicon_jieqian:before { content: "\e633"; }

.icon-love:before { content: "\e612"; }

.icon-shenghuojiaofei:before { content: "\e609"; }

.icon-chengshifuwu:before { content: "\e60a"; }

.icon-licaitong:before { content: "\e60b"; }

.icon-jieqian:before { content: "\e60c"; }

效果圖：