网格布局简介

CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网格中。

有一些浏览器是不支持网格布局的,可以从caniuse这个网站查看各个浏览器是否支持这些css3中的新属性,绿色表示支持,红色表示不支持,另一种颜色表示部分支持,如图(查看各个浏览器是否支持grid布局):

通过下面这张图片可以了解网格布局的基本概念

先来个表情包happy一下吧哈哈哈

代码部分

页面布局:

<!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)同理;

在微信的界面中是有“边框的”,这里用了伪元素来实现
代码如下:

/* 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属性来解决这个问题

我的所有图标是从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"; }

效果图:

如果有错误或者不理解的地方,希望可以指出和交流,谢谢!

grid实战之微信钱包 腾讯服务界面的更多相关文章

  1. 用c#开发微信(1)服务号的服务器配置和企业号的回调模式 - url接入 (源码下载)

    最近研究了下服务号的服务器配置和企业号的回调模式.真正实现完后,觉得很简单,但一开始还是走了点弯路,所以写了个web程序,只用改下配置文件里的参数就可以直接用了.下面介绍下详细的用法以及实现步骤. 本 ...

  2. Java11实战:模块化的 Netty RPC 服务项目

    Java11实战:模块化的 Netty RPC 服务项目 作者:枫叶lhz链接:https://www.jianshu.com/p/19b81178d8c1來源:简书简书著作权归作者所有,任何形式的转 ...

  3. WCF开发实战系列四:使用Windows服务发布WCF服务

    WCF开发实战系列四:使用Windows服务发布WCF服务 (原创:灰灰虫的家http://hi.baidu.com/grayworm) 上一篇文章中我们通过编写的控制台程序或WinForm程序来为本 ...

  4. 免注册公众号的三种微信推送消息服务的C#代码实现

    有时候我们需要监控一些网络上的变化,但是每次去刷新网页却又很麻烦,而且大部分刷新的时候网页并没有更新.那么有没有一个工具,可以监控网页变化,并将变化的结果推送到手机微信上呢? 这里有很多应用场景,比如 ...

  5. 手把手教你基于CentOS8搭建微信订阅号后台服务(一)

    一.准备域名并完成解析 关于域名,我买的是阿里的一个1元/年的廉价域名,同时国内域名都需要备案,当时在这里耽搁了挺久的. 域名解析的话,在阿里云官方帮助文档里有.传送门:https://help.al ...

  6. 微信小程序我的界面

    前言 感谢! 承蒙关照~ 微信小程序我的界面 界面效果: 界面结构: 小程序代码: 我们先看me.json代码 { "navigationBarTitleText": " ...

  7. OAuth2.0实战之微信授权篇

    微信开发三大坑: 微信OAuth2.0授权 微信jssdk签名 微信支付签名 本篇先搞定微信OAuth2.0授权吧! 以简书的登陆页面为例,来了解一下oauth2.0验证授权的一些背景知识: 1) 传 ...

  8. 全球首个实战类微信小程序开发教程

    小木学堂专注于企业实战开发和经验传授,所以微信小程序诞生这么大的事怎么能不带着大家一起学习学习呢,所以小木学堂讲师连夜赶工学习并实战开发了微信小应用的第一个程序,并录制了课程现免费分享给大家.这个速度 ...

  9. 实战:微信小程序支付开发具体流程

    来源:授权地址作者:会编码的熊 该文章纪录了我在开发小程序支付过程中的具体流程 1. 申请微信支付 小程序认证后进入微信支付申请小程序的微信支付 填写企业信息对公账户并上传凭证后,微信支付会打一笔随机 ...

随机推荐

  1. 编译安装 logstash-output-jdbc

    环境 mac https://github.com/theangryangel/logstash-output-jdbc logstash-plugin install logstash-output ...

  2. plsql中文显示问号

    1. select userenv('language') from dual 2. 复制查询的值配置系统环境变量 NLS_LANG=AMERICAN_AMERICA.ZHS16GBK 3.配置系统环 ...

  3. AppCompatActivity 透明背景

    <!-- 背景透明样式 --> <style name="AppTheme.transparent" parent="Theme.AppCompat.L ...

  4. VBA编程常用词汇英汉对照表

    表 20‑1到表 20‑8是VBA编程中使用频率最高的英文单词,按字母排序.词性列中,a表示形容词,n表示名词,v表示动词,p表示介词以及其他词性. 表 20‑1 VBA编程常用词汇表 单词 中文 词 ...

  5. iOS燃烧动画、3D视图框架、天气动画、立体相册、微信朋友圈小视频等源码

    iOS精选源码 iOS天气动画,包括太阳,云,雨,雷暴,雪动画. 较为美观的多级展开列表 3D立体相册,可以旋转的立方体 一个仪表盘Demo YGDashboardView 一个基于UIScrollV ...

  6. ByteCode Instrumentation

    Bytecode Instrumentation 定义 我们首先来看看,什么叫"Instrumentation"?Instrumentation这个词有很多意思,在维基百科中,它是 ...

  7. RHCE考试(Linux7)

    博主本人平和谦逊,热爱学习,读者阅读过程中发现错误的地方,请帮忙指出,感激不尽 一.环境模拟 * server0.example.com :172.25.0.11 * desktop0.example ...

  8. MyBatis 逆向工程介绍

    1. 概念: 逆向工程就是根据数据库中对应的表在项目工程中生成相应的MyBatis代码(XXXMapper.java/XXXMapper.xml/Moudle(XXX)),逆向工程生成的代码可以进行简 ...

  9. Ionic3学习笔记(十六)上传头像至图床

    本文为原创文章,转载请标明出处 个人做的开源 Demo 登录注册模块采用的是 Wilddog 野狗通讯云的身份认证服务,不得不说各方面和 Google 收购的 Firebase 很像,十分简单易用.其 ...

  10. 吴裕雄--天生自然 R语言开发学习:基本数据管理

    #---------------------------------------------------------# # R in Action (2nd ed): Chapter 4 # # Ba ...