这是一款非常实用的纯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%;
}
.