0 0 4 4 - Web最常用布局之#格子布局 | 【入门】
本帖最后由 不二如是 于 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>
效果图：
素材（图片不一样，不影响代码）：
嗯。。。确实好丑。。。
赶紧妙手回春
添加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。
有个小技巧：
**** Hidden Message *****
还记得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";
}
效果图：
这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 第一课还没看。。好性奋{:10_256:}{:10_256:}{:10_256:}{:10_256:}{:10_256:} aluominhai 发表于 2017-2-7 19:12
第一课还没看。。好性奋
就喜欢xin奋好同志～ 1111111111111111111 学到了！！！！！ 小甲鱼万岁 前端和ui设计师有区别么 谢谢分享。 交作业
<!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> 回复看帖 交作业！
aa nice{:10_254:} 我设置的背景颜色是因为图层的原因被覆盖了吗？谢谢指教
<!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>'> 学习了！ {:5_92:} 隐藏内容 没有素材{:10_266:} {:7_146:} 好好看好好学