鱼C论坛

 找回密码
 立即注册
查看: 1487|回复: 17

[系列教程] 0 0 4 4 - Web最常用布局之#格子布局 | 【入门】

[复制链接]
最佳答案
171 
发表于 2017-2-7 11:08:24 | 显示全部楼层 |阅读模式

马上注册加入鱼C,享用更多服务吧^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 不二如是 于 2017-2-23 16:28 编辑

39 + 40 = Hero Unit 单图文混排

41 + 42 + 43 = 双图文混排

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

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

主打:

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

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

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

Snip20170207_286.png


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

介绍到此结束,上代码:

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.         <meta charset="utf-8">
    5.         <title></title>
    6.         <style type="text/css">
    7.                
    8.         </style>
    9. </head>
    10. <body>
    11.         <section>
    12.                 <article>
    13.                         <h1>招财树</h1>
    14.                         <p>招财进宝,日入斗金</p>
    15.                         <img src="1.png" alt="Fortune tree">
    16.                 </article>
    17.                 <article>
    18.                         <h1>金元宝</h1>
    19.                         <p>敛福生财,兴隆大业</p>
    20.                         <img src="2.png" alt="Gold ingot">
    21.                 </article>
    22.                 <article>
    23.                         <h1>锦绣狮</h1>
    24.                         <p>心想事成,吉祥如意</p>
    25.                         <img src="3.png" alt="Splendid lion">
    26.                 </article>
    27.                 <article>
    28.                         <h1>八卦图</h1>
    29.                         <p>日转千阶,源源不断</p>
    30.                         <img src="4.png" alt="Eight Diagrams">
    31.                 </article>
    32.         </section>
    33. </body>
    34. </html>
    复制代码

效果图:
Snip20170207_287.png


嗯。。。确实好丑。。。

赶紧妙手回春

添加CSS样式:
  1. section{
  2.                         width: 666px;
  3.                 }
复制代码

效果图:
Snip20170207_288.png


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

继续设置article宽度:
  1.         article{
  2.                         box-sizing: border-box;
  3.                         width: 333px;
  4.                         height: 333px;
  5.                         padding: 20px;
  6.                         text-align: center;
  7.                         float: left;
  8.                 }
复制代码

效果图:
Snip20170207_289.png


这下是不是一下好多了。

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

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

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

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

有个小技巧:

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


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

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

怎么办呢?

很简单先设置每幅图的上面和左面有框线:
  1. article{
  2. border-bottom: 1px solid rgba(0,0,0,.3);
  3.                         border-left:1px solid rgba(0,0,0,.3);
  4. }
复制代码

效果图:
Snip20170207_290.png


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

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

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

最左侧的两个article,分别是child(2),child(4),都是偶数。

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

:nth-child(odd) 匹配序号为奇数。
  1.         article:nth-child(even){
  2.                         border-right: 1px solid rgba(0,0,0,.3);

  3.                 }
复制代码

效果图:
Snip20170207_292.png


同理child(1),child(2)添加上边框即可
  1. article:nth-child(1){
  2.                         border-top: 1px solid rgba(0,0,0,.3);
  3.                 }
  4.                 article:nth-child(2){
  5.                         border-top: 1px solid rgba(0,0,0,.3);
  6.                 }
复制代码

效果图:
Snip20170207_294.png


最后修改完善h1、p
  1.         article h1{
  2.                         font-size: 33px;
  3.                         margin:10px 0;
  4.                         color:#F08;
  5.                 }
  6.                 article p{
  7.                         font-size: 20px;
  8.                         background-color: #F33;
  9.                         color: #FFF;
  10.                         font-family: "NSimSun";
  11.                 }
复制代码

效果图:
Snip20170208_347.png






这位鱼油,如果喜欢本系列HTML帖子,请订阅 专辑&#9758;传送门)(不喜欢更要订阅

评分

参与人数 3荣誉 +15 鱼币 +10 贡献 +8 收起 理由
睦ちゃん她爹 + 5 + 5 + 3 无条件支持楼主!
alltolove + 5 + 3 感谢楼主无私奉献!
type_J + 5 + 5 + 2 支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

最佳答案
0 
发表于 2017-2-7 19:12:45 | 显示全部楼层
第一课还没看。。好性奋
最佳答案
171 
 楼主| 发表于 2017-2-7 19:20:55 | 显示全部楼层
aluominhai 发表于 2017-2-7 19:12
第一课还没看。。好性奋

就喜欢xin奋好同志~
最佳答案
0 
发表于 2017-2-13 14:18:20 | 显示全部楼层
1111111111111111111
最佳答案
0 
发表于 2017-2-15 08:31:00 | 显示全部楼层
学到了!!!!!
最佳答案
0 
发表于 2017-2-15 17:46:30 | 显示全部楼层
小甲鱼万岁
最佳答案
0 
发表于 2017-3-6 15:25:16 From FishC Mobile | 显示全部楼层
前端和ui设计师有区别么
最佳答案
0 
发表于 2017-3-7 17:16:23 | 显示全部楼层
谢谢分享。
最佳答案
0 
发表于 2017-5-2 14:59:14 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>Layout</title>
  6.         <style type="text/css">
  7.                 section{
  8.                         width: 600px;
  9.                 }
  10.                 article{
  11.                         box-sizing: border-box;
  12.                         width: 300px;
  13.                         height: 300px;
  14.                         padding: 20px;
  15.                         text-align: center;
  16.                         float: left;
  17.                         border-top: 1px solid rgba(0,0,0,.3);
  18.                         border-right:1px solid rgba(0,0,0,.3);
  19.                 }
  20.                 article:nth-child(odd){        /*:nth-child(even)        匹配序号为o偶数
  21.                                                                         :nth-child(odd) 匹配序号为奇数
  22.                                                                         */
  23.                         border-left: 1px solid rgba(0,0,0,.3);

  24.                 }
  25.                 article:nth-child(3){
  26.                         border-bottom: 1px solid rgba(0,0,0,.3);
  27.                 }
  28.                 article:nth-child(4){
  29.                         border-bottom: 1px solid rgba(0,0,0,.3);
  30.                 }
  31.                 article h1{
  32.                         font-size: 33px;
  33.                         margin:10px 0;
  34.                         color:#F08;
  35.                 }
  36.                 article p{
  37.                         font-size: 20px;
  38.                         background-color: #F33;
  39.                         color: #FFF;
  40.                         font-family: sans-serif ;
  41.                 }
  42.         </style>
  43. </head>
  44. <body>
  45. <section>
  46.         <article>
  47.                 <h1>招财树</h1>
  48.                 <p>招财进宝,日入斗金</p>
  49.                 <img src="p1.png" alt="Fortune tree">
  50.         </article>
  51.         <article>
  52.                 <h1>金元宝</h1>
  53.                 <p>敛福生财,兴隆大业</p>
  54.                 <img src="p2.png" alt="Gold ingot">
  55.         </article>
  56.         <article>
  57.                 <h1>锦绣狮</h1>
  58.                 <p>心想事成,吉祥如意</p>
  59.                 <img src="p3.png" alt="Splendid lion">
  60.         </article>
  61.         <article>
  62.                 <h1>八卦图</h1>
  63.                 <p>日转千阶,源源不断</p>
  64.                 <img src="p4.png" alt="Eight Diagrams">
  65.         </article>
  66. </section>
  67. </body>
  68. </html>
复制代码
0036Layout.png
最佳答案
0 
发表于 2017-7-25 02:11:46 | 显示全部楼层
回复看帖
最佳答案
0 
发表于 2017-7-25 02:32:50 | 显示全部楼层
交作业!
044.png
最佳答案
2 
发表于 2017-9-7 22:03:21 From FishC Mobile | 显示全部楼层
aa
最佳答案
1 
发表于 2017-11-26 23:47:43 From FishC Mobile | 显示全部楼层
nice
最佳答案
0 
发表于 2018-1-16 22:12:14 | 显示全部楼层
我设置的背景颜色是因为图层的原因被覆盖了吗?谢谢指教
  1. <!DOCTYPE html>
  2. <html lang='en'>
  3. <head>
  4.         <meta charset='utf-8'>
  5.         <title>give me the web open</title>
  6.         <style type='text/css'>
  7.                 .section{width:666px;margin:30px;}
  8.                 article h1{font-family:kaiti;font-size:33px;
  9.                                         color:#FF6EB4;
  10.                 }
  11.                 article p{font-family:kaiti;font-size:22px;color:#FFFFFF;background:#FF0000;}
  12.                 article{width:333px;height:333px;box-sizing:border-box;
  13.                 padding:20px;text-align:center;float:left;
  14.                 border-left:3px solid rgba(0,0,0,.3);
  15.                 border-bottom:3px solid rgba(0,0,0,.3);                       
  16.                 }
  17.                 article:nth-child(even){border-right:3px solid rgba(0,0,0,.3)}
  18.                 article:nth-child(1){border-top:3px solid rgba(0,0,0,.3)}
  19.                 article:nth-child(2){border-top:3px solid rgba(0,0,0,.3)}
  20.         </style>
  21. </head>

  22. <body>
  23.         <div class='section'>
  24.                 <article>
  25.                         <h1>招财树</h1>
  26.                         <p>招财进宝,日进斗金</p>
  27.                         <img src='shu.jpg' alt='tree' width=80px;>
  28.                 </article>
  29.                
  30.                 <article>
  31.                         <h1>金元宝</h1>
  32.                         <p>敛福生财,兴隆大业</p>
  33.                         <img src='timg.jpg' alt='tree' width=80px;>
  34.                 </article>
  35.                
  36.                 <article>
  37.                         <h1>锦绣狮</h1>
  38.                         <p>心想事成,吉祥如意</p>
  39.                         <img src='jinxiu.jpg' alt='jinxiu' width=80px;>
  40.                 </article>
  41.                
  42.                 <article>
  43.                         <h1>八卦图</h1>
  44.                         <p>日转前阶,源源不断</p>
  45.                         <img src='bagua.jpg' alt='tree' width=80px;>
  46.                 </article>
  47.         </div>
  48. </body>
  49. </html>
复制代码
'>
最佳答案
0 
发表于 2018-2-27 17:20:45 | 显示全部楼层
学习了!
最佳答案
0 
发表于 2018-3-21 18:42:07 | 显示全部楼层
最佳答案
0 
发表于 2018-3-30 19:39:24 | 显示全部楼层
隐藏内容
最佳答案
31 
发表于 2018-4-15 15:37:37 | 显示全部楼层
没有素材
*滑块验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐上一条 /1 下一条

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号 )

GMT+8, 2018-7-17 07:52

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表