<!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. L​i​n​u​x​下​配​置​T​o​m​c​a​t

    ***安装***   安装JDK chmod a+x jdk-1_5_0_06-linux-i586-rpm.bin ./jdk-1_5_0_06-linux-i586-rpm.bin 敲几次空格就O ...

  2. leetcode 生成杨辉三角形， 118 119 Pascal's Triangle 1，2

    Given numRows, generate the first numRows of Pascal's triangle. For example, given numRows = 5, Retu ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. Android ViewManager解读之requestLayout() 详解

    尊重原创: http://blog.csdn.net/sk719887916/article/details/48464035 上篇<Android View 中invalidate() 你所不 ...

  5. CentOS安装并设置MariaDB

    作者: 铁锚 日期: 2013年12月27日 部分参考: Centos 使用YUM安装MariaDB 说明: 首先必须能链接外网. 如果不能直接访问,那也可以设置代理,请参考: 在内网机器上设置yum ...

  6. 再回首UML之下篇

    接着我们上篇博客再回首UML之上篇说,在类图中有四种关系,关联.依赖.泛化.实现,接下来,我们来看看依赖,依赖--描述的是一种使用关系,她说明一个事物的规格说明的变化可能影响到他使用的另一个事物,反之 ...

  7. 使用Gradle发布Android开源项目到JCenter

    喜欢做些开源项目的朋友,相信有不少人都希望能把自己的项目发布到公共的中央仓库,如maven中央仓库,以供别人方便地集成使用.而使用了Android Studio的同学,应该也对gradle和jcent ...

  8. 【matlab编程】Matlab版扫雷

    我发现有些人平常闲着的时候会玩window自带的游戏,其中最常见的就是扫雷和纸牌.本来想用matlab编写全自动扫雷程序用来作弊,可是后来发现扫雷问题是NP完全问题(正如:旅行商NP难问题一样不能被解 ...

  9. Cocos2D中的纹理大小计算

    纹理占用的内存大小是纹理尺寸乘以颜色深度. 图片文件的大小一般很小.一个初学者常见的错误是假设纹理内存使用量和图片大小一致. 哎,纹理内存(对于非压缩格式)的大小可以用以下伪代码来计算: pixelW ...

  10. ARC时代的内存管理

    什么是ARC Automatic Reference Counting (ARC) is a compiler feature that provides automatic memory manag ...