<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>九宫格</title>

</head>

<style>

    .squre{

        width: 600px;

        height:600px;

        border:2px dotted #0f0;

        color:#aaaaaa;

        font-size: 28px;

        font-weight: bold;

    }

    .circle{

        width: calc(100%/3 - 8px);

        -moz-width: calc(100%/3 - 8px);

        -webkit-width: calc(100%/3 - 8px);

        height: calc(100%/3 - 8px);

        -moz-height: calc(100%/3 - 8px);

        -webkit-height: calc(100%/3 - 8px);

        line-height: calc(600px/3 - 8px);

        -moz-line-height: calc(600px/3 - 8px);

        -webkit-line-height: calc(600px/3 - 8px);

        text-align:center;

        border-radius: 50%;

        margin:0 calc(8px*3/2) calc(8px*3/2) 0;

        -moz-margin:0 calc(8px*3/2) calc(8px*3/2) 0;

        -webkit-margin:0 calc(8px*3/2) calc(8px*3/2) 0;

        float:left;

        background:rgba(0,0,0,0.1);

    }

    .circle:nth-child(3n){

        margin-right:0;

    }

</style>

<body>

<div class="squre">

    <div class="circle">1</div>

    <div class="circle">2</div>

    <div class="circle">3</div>

    <div class="circle">4</div>

    <div class="circle">5</div>

    <div class="circle">6</div>

    <div class="circle">7</div>

    <div class="circle">8</div>

    <div class="circle">9</div>

</div>

</body>

</html>

九宫格效果图：

 


      在绘制过程中主要用到的是css中的calc()，下面针对calc()做一下简单介绍：

calc()
1.支持%、rem、em、px等单位的四则运算
2.“+”、“-”运算注意要留有空格
3.“*”、“/”运算可以不留空格

兼容性处理:
-moz-calc(expression)     兼容firefox
-webkit-calc(expression)   兼容chrome/safari

用calc()绘制手机图案解锁的九宫格样式的更多相关文章

  1. canvas 实现手机图案解锁

    参考☞: https://www.cnblogs.com/chenyingying0/ 先上效果图: 我是在 vue 里面实现js 文件 ,所以如果需要在vue 里面使用 可以将以下内容import  ...

  2. Python&Appium实现安卓手机图形解锁

    首先,在解锁状态下,建立一个Session,打开APP.然后,调用press_keycode()方法传入整型数值"26",锁定屏幕.通过implicitly_wait()方法等待两 ...

  3. Java之绘制艺术图案

    前面已经介绍过绘制方法.这里不再赘述. package com.caiduping; import java.awt.Color; import java.awt.Graphics; import j ...

  4. Java之绘制五环图案

    前面已经介绍过绘制方法.这里不再赘述. package com.caiduping; import java.awt.BasicStroke; import java.awt.Color; impor ...

  5. 纯php实现中秋博饼游戏（1）：绘制骰子图案

    最近公司中秋博饼(在厦门),自己没事也想玩玩,所以就想动手写了一个纯php实现的中秋博饼游戏,既然要纯php实现,就要用php来生成图案,所以第一步就先绘制骰子图案. 平时很少使用php绘图,不过查查 ...

  6. html5--5-14 阶段小练习：绘制太极图案

    html5--5-14 阶段小练习:绘制太极图案 学习要点 运用前几节课的知识完成一个小练习 这个图案有多种不同的绘制方法,这里只做一个简单的演示,练习的时候可以自己思考一下,尝试其他的方法,或者对这 ...

  7. canvas一周一练 -- canvas绘制马尾图案 （5）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  8. 长沙理工大学第十二届ACM大赛-重现赛C 安卓图案解锁 （模拟）

    链接:https://ac.nowcoder.com/acm/contest/1/C来源:牛客网 安卓图案解锁 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K,其他语言 ...

  9. Android自定义九宫格图案解锁

    转自: http://blog.csdn.net/shineflowers/article/details/50408350

随机推荐

  1. android studio签名

    1.Build -> Generate Signed APK...,打开如下窗口 2.假设这里没有打过apk包,点击Create new,窗口如下 这里只要输入几个必要项 Key store p ...

  2. Css技术入门笔记02

    第一篇见Css入门笔记01http://blog.csdn.net/qq_32059827/article/details/51406674 4.其他选择器 4.1.关联选择器 有时在页面上会出现我们 ...

  3. 网站开发进阶(三十)HTML5--本地存储Web Storage

    HTML5--本地存储Web Storage Web Storage功能,顾名思义,就是在Web上针对客户端本地储存数据的功能,具体来说Web Storage分为两种: sessionStorage: ...

  4. 江湖问题研究-- intent传递有没有大小限制，是多少？

    出门一步,便是江湖,江湖上有许多流言. 比如这条: intent传递是有大小限制的,具体在40KB左右. 当然也有传言说是1M左右. 数百头母驴为何半夜惨叫? 小卖部安全套为何屡遭黑手? 女生宿舍内裤 ...

  5. Mahout fp-growth

    FP-growth Apriori算法的一个主要瓶颈在于,为了获得较长的频繁模式,需要生成大量的候选短频繁模式.FP-Growth算法是针对这个瓶颈提出来的全新的一种算法模式.目前,在数据挖掘领域,A ...

  6. MPEG-7 视觉描述符

    本文节选自<基于MPEG-7与内容的图像检索技术的研究>. MPEG-7 标准中视觉描述工具包括基本结构和描述符.本文主要介绍各描述符. (1)颜色描述符 MPEG-7 主要定义了七种颜色 ...

  7. 理解WebKit和Chromium: Chromium的多进程资源加载机制

    转载请注明原文地址:http://blog.csdn.net/milado_nju ##概述 前面介绍了WebKit中的资源加载机制,其实它只是一个框架性的东西,实际的资源加载依赖于各个WebKit移 ...

  8. Mongodb系列之--mongodb的启动与关闭

    Mongodb的开启   默认启动:   $ ./mongodb   默认数据保存路径:/data/db/ 默认端口:27017   修改默认路径:   --dbpath $ ./mongdb --d ...

  9. java 编程性能调优

    一.避免在循环条件中使用复杂表达式 在不做编译优化的情况下,在循环中,循环条件会被反复计算,如果不使用复杂表达式,而使循环条件值不变的话,程序将会运行的更快. 例子: import java.util ...

  10. "C#"：MySql批量数量导入

    现在对数据库(以MySql为例)的操作大多会封装成一个类,如下例所示: namespace TESTDATABASE { public enum DBStatusCode { ALL_OK, MySq ...