1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>九宫格</title>
  6. </head>
  7. <style>
  8.     .squre{
  9.         width: 600px;
  10.         height:600px;
  11.         border:2px dotted #0f0;
  12.         color:#aaaaaa;
  13.         font-size: 28px;
  14.         font-weight: bold;
  15.     }
  16.     .circle{
  17.         width: calc(100%/3 - 8px);
  18.         -moz-width: calc(100%/3 - 8px);
  19.         -webkit-width: calc(100%/3 - 8px);
  21.         height: calc(100%/3 - 8px);
  22.         -moz-height: calc(100%/3 - 8px);
  23.         -webkit-height: calc(100%/3 - 8px);
  25.         line-height: calc(600px/3 - 8px);
  26.         -moz-line-height: calc(600px/3 - 8px);
  27.         -webkit-line-height: calc(600px/3 - 8px);
  29.         text-align:center;
  30.         border-radius: 50%;
  31.         margin:0 calc(8px*3/2) calc(8px*3/2) 0;
  32.         -moz-margin:0 calc(8px*3/2) calc(8px*3/2) 0;
  33.         -webkit-margin:0 calc(8px*3/2) calc(8px*3/2) 0;
  35.         float:left;
  36.         background:rgba(0,0,0,0.1);
  37.     }
  38.     .circle:nth-child(3n){
  39.         margin-right:0;
  40.     }
  41. </style>
  42. <body>
  44. <div class="squre">
  45.     <div class="circle">1</div>
  46.     <div class="circle">2</div>
  47.     <div class="circle">3</div>
  48.     <div class="circle">4</div>
  49.     <div class="circle">5</div>
  50.     <div class="circle">6</div>
  51.     <div class="circle">7</div>
  52.     <div class="circle">8</div>
  53.     <div class="circle">9</div>
  54. </div>
  56. </body>
  57. </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 应用开发】 自定义 圆形进度条 组件

    转载著名出处 : http://blog.csdn.net/shulianghan/article/details/40351487 代码下载 : -- CSDN 下载地址 : http://down ...

  2. TensorFlow安装配置，茫茫人海中一瞥

    深度学习的框架,我们熟知的有caffe,torch和convnet.最近,Google又搞了一个TensorFlow,已经开源:http://www.tensorflow.org/.据说,谷歌的深度学 ...

  3. C算法分解质因数与分解因子

    ) ) printf("%d ",i); } }

  4. 高通 8x12 添加 TP和按键

    1 .在tp的驱动文件中添加以下代码实现按键功能 [plain] view plain copy static ssize_t ft5x06_virtual_keys_register(struct  ...

  5. 经过一段的努力，终于成为CSDN博客专家，感谢大家支持

    感谢CSDN提供这么好的一个技术学习平台,通过各路大神的博客我成长了许多,同时也感谢支持我的朋友们,我会继续努力,用心去写好博客.还请继续关注我~ 谢谢!

  6. Leetcode_172_Factorial Trailing Zeroes

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42417535 Given an integer n, re ...

  7. HashMap与HashTable面试宝典

    u012233832的专栏 初生牛犊 目录视图 摘要视图 订阅 写博客,送money.送书.送C币啦   7-8月博乐推荐文章    砸BUG 得大奖 100%中奖率   微信开发学习路线高级篇上线  ...

  8. C#之委托和事件

    我想,读者们可能看过一部电影叫<全民目击>,在电影中,富豪林泰婚期将至,准新娘却惨死地下停车场,林泰的富二代女儿林萌萌成为最大嫌疑人,林泰不惜重金聘请国内顶级律师周莉为女儿辩护,而公诉方却 ...

  9. Cocos2D v2.0至v3.x简洁转换指南（五）

    资源管理 如果你没有计划用SpriteBuilder,你可以继续使用后缀去管理各种不同解决方案中的图像. 首先,你需要在AppDelegate.m中将[CCBReader configrueCCFil ...

  10. VS2010安装Boost库

    source URL: http://stackoverflow.com/questions/2629421/how-to-use-boost-in-visual-studio-2010 While ...