<!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. Linux进程－进程的创建

    今天学习了Linux的进程创建的基本原理,是基于0.11版本核心的.下面对其作一下简单的总结. 一.Linux进程在内存中的相关资源   很容易理解,Linux进程的创建过程就是内存中进程相关资源产生 ...

  2. 【leetcode73】经典算法-Guess Number Higher or Lower

    题目描述: 从1-n中,随便的拿出一个数字,你来猜测. 提示 提供一个guess(int num)的api,针对猜测的数字,返回三个数值.0,-1,1 0;猜中返回num -1:比猜测的数值小 1:比 ...

  3. Github搭建属于自己的开源项目-androd学习之旅(72)

    Github是一个基于的git的版本控制工具,分为私人代码管理和开源代码管理,下面我们简单的介绍一下 首先登陆官网https://github.com 完成注册,随后首页会有四个模块,第一个是安装的指 ...

  4. Python学习笔记 - dict和set

    dict #!/usr/bin/env python3 # -*- coding: utf-8 -*- #dict >>> d = {'Michael': 95, 'Bob': 75 ...

  5. 关于post利用之Python

    今天大师兄放出了自己用PHP写的KTV点歌系统,注明,欢迎调戏,于是乎就尝试了下. 地址就不上了,到现在没补漏洞,我可不想被大师兄K…… 首先试试JavaScript脚本能否恶搞下 来个最基础的警告框 ...

  6. centos 系统时间的同步

    1.当你的网站架构涉及到多台服务器的时候,服务器之间的时间必须得同步,这样就涉及到了程序的时间的准确性问题,特别是跟时间相关的操作和系统本身的定时任务. 2.时间同步工具:ntpdate,安装方式:y ...

  7. SpriteBuilder代码中弱引用(weak)需要注意的地方

    比如在GameScene类中有一个弹出菜单层实例的引用,我们有: @implementation GameScene{ //other ivars __weak GameMenuLayer *_pop ...

  8. Android高级控件（二）——SurfaceView实现GIF动画架包，播放GIF动画，自己实现功能的初体现

    Android高级控件(二)--SurfaceView实现GIF动画架包,播放GIF动画,自己实现功能的初体现 写这个的原因呢,也是因为项目中用到了gif动画,虽然网上有很多的架包可以实现,不过我们还 ...

  9. Spring--ApplicationContext

    //中心接口,给应用提供配置信息 public interface ApplicationContext extends EnvironmentCapable, ListableBeanFactory ...

  10. 使用钩子参与到TCP拥塞事件的处理中

    TCP定义了几个拥塞事件,当这些事件发生时,我们可以通过TCP的拥塞控制算法,调用自定义的处理函数, 来做一些额外的事情的.也就是说,我们可以很简便的参与到TCP对拥塞事件的处理过程中. Author ...