html图片四格,纯CSS3全屏单页4格网格布局

这是一款非常实用的纯CSS3全屏单页4格网格布局。该布局将整个屏幕平分为4个网格，每个网格是一个项目内容。当点击了相应的网格后，该网格的图片会全屏放大，并显示出该项目的说明文字。

制作方法

HTML结构

该CSS3网格布局的HTML结构中，每一个网格由3个部分组成：一个元素，一个元素和一个用于放置文字内容的

元素。

Left top block heading

Title

...

...

CSS样式

在CSS样式中，每一个网格的宽度和高度都设置为50%，并分别进行定位。

.absPos, .blocks .trigger, .blocks .block {

position: absolute;

width: 50%;

height: 50%;

}

.absPos.top, .blocks .top.trigger, .blocks .top.block {

top: 0;

}

.absPos.right, .blocks .right.trigger, .blocks .right.block {

left: 50%;

}

.absPos.bot, .blocks .bot.trigger, .blocks .bot.block {

top: 50%;

}

.