<!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(Lollipop/5.0) Material Design(二) 入门指南

    Material Design系列 Android(Lollipop/5.0)Material Design(一) 简介 Android(Lollipop/5.0)Material Design(二) ...

  2. 小试ImageMagik——开发篇

    ===================================================== ImageMagick的使用和开发的文章: 小试ImageMagik--使用篇 小试Imag ...

  3. Android View事件机制一些事

    本文主要讲述: 自己对View事件机制的一些理解 在项目中遇到的一些坑,解决方案 收集了一些View的事件机制问题 事件的分发原理图 对于一个root viewgroup来说,如果接受了一个点击事件, ...

  4. 前端框架Bootstrap - 快速搭建网站

    Bootstrap简介         Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.是一个CSS/HTML/JavaScript框架.Bootstrap是基于HTML5和C ...

  5. BLOCK/字面量(语法糖)OC——第六天

    1.//block ,块语法,实质是匿名函数,是对C语言中函数的扩充,扩展: //block  语法可以用来保存一段代码或者用来调用一段封装好的代码: //block  语法由于是C语言实现的,所以执 ...

  6. 如何实现一个malloc（转）

    本文转自博文如何实现一个malloc.就如作者本人所说,该博文大量参考了A malloc Tutorial,所以对照着阅读这两篇文章更能加深理解. 任何一个用过或学过C的人对malloc都不会陌生.大 ...

  7. JSONP获取Twitter和Facebook文章数

    原文链接: Retrieve Twitter and Facebook Counts with JSON 翻译人员: 铁锚 原文日期: 2014年02月19日 翻译日期: 2014年02月22日 !! ...

  8. 【一天一道leetcode】 #2 Add Two Numbers

    一天一道leetcode系列 (一)题目: You are given two linked lists representing two non-negative numbers. The digi ...

  9. redis注册成window服务

    注册服务 redis-server.exe –service-install redis.windows.conf 删除服务 redis-server –service-uninstall 开启服务 ...

  10. C语言之多线程机制(程序可以同时被执行而不会相互干扰)

    接触过linux的人或多或少知道,linux有多线程的机制,也就是说程序可以同时执行,不受干扰,关于这个在我以前的博文里有过类似模拟的时间片轮转程序,跟这个其实是类似的.其实在window上,线程的头 ...