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%;
}
.
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！