0 0 4 4 - Web最常用布局之#格子布局 | 【入门】

不二如是 · 发表于 2017-2-7 11:08:24

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2021-8-11 09:29 编辑

39 + 40 = Hero Unit 单图文混排

41 + 42 + 43 = 双图文混排

凭借你聪明的大脑，应该能推理出，格子布局就是“多图文混排”

格子布局，Grid Layout，是一种极其常见的布局方式。

主打：

简约、粗暴、有效
的页面设计

先有的个大电商都极其推崇！

随便打开个京东的感受下，没错继续为小甲鱼老湿处女作打广告：

这个规规矩矩的排列方式，就是格子布局。

介绍到此结束，上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<section>
<article>
<h1>招财树</h1>
<p>招财进宝，日入斗金</p>
<img src="1.png" alt="Fortune tree">
</article>
<article>
<h1>金元宝</h1>
<p>敛福生财，兴隆大业</p>
<img src="2.png" alt="Gold ingot">
</article>
<article>
<h1>锦绣狮</h1>
<p>心想事成,吉祥如意</p>
<img src="3.png" alt="Splendid lion">
</article>
<article>
<h1>八卦图</h1>
<p>日转千阶,源源不断</p>
<img src="4.png" alt="Eight Diagrams">
</article>
</section>
</body>
</html>

复制代码

效果图：

素材（图片不一样，不影响代码）：

img.zip (223.86 KB, 下载次数: 29)

嗯。。。确实好丑。。。

赶紧妙手回春

添加CSS样式：

section{
width: 666px;
}

复制代码

效果图：

单纯的先设置格子区域宽度666px。

继续设置article宽度：

article{
box-sizing: border-box;
width: 333px;
height: 333px;
padding: 20px;
text-align: center;
float: left;
}

复制代码

效果图：

这下是不是一下好多了。

每个格子宽度高度都是333px。

内边距随意设置个20px，文本居中。

这样，格子布局初步就已完成。

继续修改，为格子布局添加框线border。

有个小技巧：

游客，如果您要查看本帖隐藏内容请回复

还记得border设置值的几种用法吗（忘记的请点这里）

当只设置一个值时，上下左右都是1px，两幅图中间就会重叠在一起变为2px。。。

怎么办呢？

很简单先设置每幅图的下面和左面有框线：

article{
border-bottom: 1px solid rgba(0,0,0,.3)；
border-left:1px solid rgba(0,0,0,.3);
}

复制代码

效果图：

这样就能保证中间线也是，1px。

但是，上面、最外侧右边就会缺线，憋着急

利用“父子元素”来定位添加框线。

最左侧的两个article，分别是child（2），child（4），都是偶数。

就可以这么写:nth-child(even)

:nth-child(odd) 匹配序号为奇数。

article:nth-child(even){
border-right: 1px solid rgba(0,0,0,.3);
}

复制代码

效果图：

同理child（1），child（2）添加上边框即可

article:nth-child(1){
border-top: 1px solid rgba(0,0,0,.3);
}
article:nth-child(2){
border-top: 1px solid rgba(0,0,0,.3);
}

复制代码

效果图：

最后修改完善h1、p

article h1{
font-size: 33px;
margin:10px 0;
color:#F08;
}
article p{
font-size: 20px;
background-color: #F33;
color: #FFF;
font-family: "NSimSun";
}

复制代码

效果图：

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅

）

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

aluominhai · 发表于 2017-2-7 19:12:45

第一课还没看。。好性奋

不二如是 · 发表于 2017-2-7 19:20:55

aluominhai 发表于 2017-2-7 19:12
第一课还没看。。好性奋

就喜欢xin奋好同志～

Xman · 发表于 2017-2-13 14:18:20

1111111111111111111

dreamdnj · 发表于 2017-2-15 08:31:00

学到了！！！！！

dps521 · 发表于 2017-2-15 17:46:30

小甲鱼万岁

a540656809 · 发表于 2017-3-6 15:25:16

前端和ui设计师有区别么

163areocraft · 发表于 2017-3-7 17:16:23

谢谢分享。

shishunfu · 发表于 2017-5-2 14:59:14

交作业

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout</title>
<style type="text/css">
section{
width: 600px;
}
article{
box-sizing: border-box;
width: 300px;
height: 300px;
padding: 20px;
text-align: center;
float: left;
border-top: 1px solid rgba(0,0,0,.3);
border-right:1px solid rgba(0,0,0,.3);
}
article:nth-child(odd){ /*:nth-child(even) 匹配序号为o偶数
:nth-child(odd) 匹配序号为奇数
*/
border-left: 1px solid rgba(0,0,0,.3);
}
article:nth-child(3){
border-bottom: 1px solid rgba(0,0,0,.3);
}
article:nth-child(4){
border-bottom: 1px solid rgba(0,0,0,.3);
}
article h1{
font-size: 33px;
margin:10px 0;
color:#F08;
}
article p{
font-size: 20px;
background-color: #F33;
color: #FFF;
font-family: sans-serif ;
}
</style>
</head>
<body>
<section>
<article>
<h1>招财树</h1>
<p>招财进宝，日入斗金</p>
<img src="p1.png" alt="Fortune tree">
</article>
<article>
<h1>金元宝</h1>
<p>敛福生财，兴隆大业</p>
<img src="p2.png" alt="Gold ingot">
</article>
<article>
<h1>锦绣狮</h1>
<p>心想事成,吉祥如意</p>
<img src="p3.png" alt="Splendid lion">
</article>
<article>
<h1>八卦图</h1>
<p>日转千阶,源源不断</p>
<img src="p4.png" alt="Eight Diagrams">
</article>
</section>
</body>
</html>

复制代码

aswyamato1989 · 发表于 2017-7-25 02:11:46

回复看帖

aswyamato1989 · 发表于 2017-7-25 02:32:50

交作业！

哨子1122 · 发表于 2017-9-7 22:03:21

冷小漠 · 发表于 2017-11-26 23:47:43

nice

庚午 · 发表于 2018-1-16 22:12:14

我设置的背景颜色是因为图层的原因被覆盖了吗？谢谢指教

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>give me the web open</title>
<style type='text/css'>
.section{width:666px;margin:30px;}
article h1{font-family:kaiti;font-size:33px;
color:#FF6EB4;
}
article p{font-family:kaiti;font-size:22px;color:#FFFFFF;background:#FF0000;}
article{width:333px;height:333px;box-sizing:border-box;
padding:20px;text-align:center;float:left;
border-left:3px solid rgba(0,0,0,.3);
border-bottom:3px solid rgba(0,0,0,.3);
}
article:nth-child(even){border-right:3px solid rgba(0,0,0,.3)}
article:nth-child(1){border-top:3px solid rgba(0,0,0,.3)}
article:nth-child(2){border-top:3px solid rgba(0,0,0,.3)}
</style>
</head>
<body>
<div class='section'>
<article>
<h1>招财树</h1>
<p>招财进宝，日进斗金</p>
<img src='shu.jpg' alt='tree' width=80px;>
</article>
<article>
<h1>金元宝</h1>
<p>敛福生财，兴隆大业</p>
<img src='timg.jpg' alt='tree' width=80px;>
</article>
<article>
<h1>锦绣狮</h1>
<p>心想事成，吉祥如意</p>
<img src='jinxiu.jpg' alt='jinxiu' width=80px;>
</article>
<article>
<h1>八卦图</h1>
<p>日转前阶，源源不断</p>
<img src='bagua.jpg' alt='tree' width=80px;>
</article>
</div>
</body>
</html>

复制代码

'>

helingyuan · 发表于 2018-2-27 17:20:45

学习了！

R9bot · 发表于 2018-3-21 18:42:07

likesunshine · 发表于 2018-3-30 19:39:24

隐藏内容

像番茄加两个蛋 · 发表于 2018-4-15 15:37:37

没有素材

floride · 发表于 2018-8-5 14:26:39

a211827754 · 发表于 2018-8-22 17:15:21

好好看好好学

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 4 4 - Web最常用布局之#格子布局 | 【入门】

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

浏览过的版块