css 实现6宫格图标

原创 2015年07月09日 18:37:56
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Unicorn Admin</title>
    <meta charset="UTF-8" />
    <style type="text/css" media="screen">
      .test{
        width:100px;
        height: 100px;
        background-color: gray;
      }
      .test:after{
        content: "";
        display: block;
        width: 100%;
        height: 33.3%;
        border-top: 1px solid white;
        border-bottom:  1px solid white;
        margin-top: -66.6%;
      }
      .test:before{
        content: "";
        display: block;
        width: 33%;
        height: 100%;
        border-right: 2px solid white;
      }
    </style>
  </head>
  <body >
      <div>
        <div class="test">
        </div>
      </div>
  </body>
</html>

相关文章推荐

GridLayout + Animation 实现 Android 仿超级课程表“发现”全屏宫格图标弹出动画

宫格布局在如今众多Android App中其实应用很广泛,但是全屏只有宫格图标的设计不免使用户觉得比较死板,不妨给宫格图标加上缩放动画效果,给用户更友好的体验。...

[Phonegap+Sencha Touch] 移动开发59 移动web页面N宫格图标布局怎么实现?

很多人不知道要如何实现图标的N宫格布局。我来说下思路。 一、等宽占比 其实就是一行要显示几列的问题,也就是一行里的各个图标占宽度相同。 如果要一行显示3个图标,那就是每个图标宽度占33.3...

ios-实现9宫格

iOS 的9宫格实现方式有很多种,这里是参考了网上某某的demo后,几乎照着做了一遍。 这里我采用订制cell的方式来实现 这里给出几点注意事项: 1,订制的cell里面的重用标...

QT使用border-image实现9宫格效果

  • 2017年08月15日 16:26
  • 137KB
  • 下载

9宫格横竖等于4 c++编程实现

  • 2015年09月06日 21:17
  • 13KB
  • 下载

Android实现宫格图片连续滑动效果

本文给大家介绍如何在Android中实现宫格图片连续滑动效果。     在这之前,写过几篇关于在Android中实现滑动的效果,毕竟滑动效果在Andriod开发中也使用得比较频繁,有兴趣的...

星座12宫格实现

  • 2014年10月21日 22:24
  • 3.44MB
  • 下载

JQuery实现移动9宫格图片自由切换移动

这篇文章主要介绍了通过JQuery实现移动9宫格的前端页面特效,用户可以自由选择任意2张图片,被选中的2张图片会自动交换位置。 实现方法:html和css在页面上静态地实现9宫格,用9张图片填充这9...
  • hzschqh
  • hzschqh
  • 2017年04月17日 22:07
  • 298

一个iOS图片选择器的DEMO(实现图片添加,宫格排列,图片长按删除,以及图片替换等功能)

转自:http://www.cnblogs.com/dashunzi/p/3746445.html   在开发中,经常用到选择多张图片进行上传或作其他处理等等,以下DEMO满足了...

实现美团宫格导航ViewPager+GridView

GridView 是 DataGrid的后继控件,在.net framework 2 中,虽然还存在DataGrid,但是GridView已经走上了历史的前台,取代DataGrid的趋势已是势不可挡。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css 实现6宫格图标
举报原因:
原因补充:

(最多只允许输入30个字)