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>

CSS——实现图片等比例正方形显示,宫格排列

像微信朋友圈一样,添加图片的时候,等比例正方形显示在列表中,示例如下: .figure-list{ ...
  • yu17310133443
  • yu17310133443
  • 2017年05月24日 11:00
  • 972

div+css实现九宫格效果

div+css实现九宫格效果 有3种方法: 1、方法一:把九宫图切割成9张图,用9个div合在一起,改变宽高,实现。优点:兼容性100%支持,缺点div太多,使用不方便。 2、方法二:把九...
  • linguifa
  • linguifa
  • 2015年02月11日 11:07
  • 11182

仅用css+HTML实现图片墙功能

备注:最好在firefox或chrome运行,在IE效果没出现  -。- 效果如下: 当鼠标移动到某一张图片时,另外也点击打开图片,会自动连接到大图片。 代码如下: -----...
  • zjut_acm
  • zjut_acm
  • 2015年04月08日 18:27
  • 799

纯CSSt实现照片墙效果

纯CSS实现的照片墙效果,鼠标经过图片是图片上浮变大,照片程不同角度倾斜如图: HTML部分 一起度过的第一个生日 ...
  • CNZSWYMP
  • CNZSWYMP
  • 2017年05月27日 17:19
  • 407

css3实现照片墙

在网站上经常可以看到照片墙的展示,于是动手用css3写了一个简单的照片墙。其实就是css3样式的一些新特效的使用。 作品展示: 接下来贴上实现的代码: html结构: ...
  • u010297791
  • u010297791
  • 2016年09月24日 15:11
  • 1360

HTML5+CSS3实战(二)——照片墙效果

现在的前端做的越来越炫酷了,各种特效让人眼花缭乱。 前几天逛网站的时候,看见有个照片墙的效果不错,就想着自己也做做看。 首先上图: 照片呈不规则的角度摆放,当鼠标放在照片上时,照片会放大; 鼠...
  • a253664942
  • a253664942
  • 2015年05月01日 20:00
  • 5513

用纯CSS实现照片墙

首先需要引入指定的照片,编写html代码 照片墙 然后再...
  • bboyjoe
  • bboyjoe
  • 2015年06月25日 15:31
  • 697

HTML第二十节(CSS制作照片墙效果与瀑布流)

CSS3制作照片墙 1.用CSS制作照片墙需要用到两个重要属性:transform和transition。transform属性允许旋转(rotate)、伸缩(scale)、倾斜(skew)或者移 ...
  • qq_24249259
  • qq_24249259
  • 2015年06月08日 22:29
  • 1532

Android照片墙应用实现,再多的图片也不怕崩溃

照片墙这种功能现在应该算是挺常见了,在很多应用中你都可以经常看到照片墙的身影。它的设计思路其实也非常简单,用一个GridView控件当作“墙”,然后随着GridView的滚动将一张张照片贴在“墙”上,...
  • sinyu890807
  • sinyu890807
  • 2013年08月02日 08:23
  • 108790

使用html+css实现一个个人照片墙

今天我们来简单的实现一个个人照片墙 照片呈不规则的角度摆放,当鼠标放在照片上时,照片会放大; 鼠标离开照片时,照片回到原来的状态。 其实只要用CSS3的一些属性完全就可以实现这样的效果,无须一...
  • dazhanglao1
  • dazhanglao1
  • 2017年10月23日 17:03
  • 249
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css 实现6宫格图标
举报原因:
原因补充:

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