grid网格布局实例
一起来学习一下grid网格布局的一个小案例
eg:百度风云榜
上代码:
(1)划分区域
按照图示首先划分七个区域:
结构:
样式:
1.划分为3列4行
(2)加上网格的间距:
(3)找到网格指定的区域:
先加上红色的背景色看一下运行效果:
(4)分别给每块加上颜色
此时每块的背景色就完成了:
(5)给对应的块加上文字,再加上样式就完成这个简单的网格布局了
效果图:
by:逆战班伍延彬
grid网格布局实例
一起来学习一下grid网格布局的一个小案例
eg:百度风云榜
上代码:
(1)划分区域
按照图示首先划分七个区域:
结构:
样式:
1.划分为3列4行
(2)加上网格的间距:
(3)找到网格指定的区域:
先加上红色的背景色看一下运行效果:
(4)分别给每块加上颜色
此时每块的背景色就完成了:
(5)给对应的块加上文字,再加上样式就完成这个简单的网格布局了
效果图:
by:逆战班伍延彬