QQ登录

只需一步,快速开始

搜索
鱼C论坛笔记大赛成绩公示
查看: 555|回复: 11

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

[复制链接]
累计签到:417 天
连续签到:87 天
最佳答案
83 
发表于 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帖子,请订阅 专辑传送门)(不喜欢更要订阅

评分

参与人数 2荣誉 +10 鱼币 +5 贡献 +5 收起 理由
alltolove + 5 + 3 感谢楼主无私奉献!
type_J + 5 + 5 + 2 支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
累计签到:56 天
连续签到:1 天
最佳答案
0 
发表于 2017-2-7 19:12:45 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
累计签到:417 天
连续签到:87 天
最佳答案
83 
发表于 2017-2-7 19:20:55 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
累计签到:2 天
连续签到:1 天
最佳答案
0 
发表于 2017-2-13 14:18:20 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
累计签到:87 天
连续签到:1 天
最佳答案
0 
发表于 2017-2-15 08:31:00 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
累计签到:179 天
连续签到:1 天
最佳答案
0 
发表于 2017-2-15 17:46:30 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
累计签到:1 天
连续签到:1 天
最佳答案
0 
发表于 2017-3-6 15:25:16 From FishC Mobile | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
累计签到:2 天
连续签到:2 天
最佳答案
0 
发表于 2017-3-7 17:16:23 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
累计签到:102 天
连续签到:1 天
最佳答案
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
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
累计签到:537 天
连续签到:8 天
最佳答案
0 
发表于 2017-7-25 02:11:46 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
累计签到:537 天
连续签到:8 天
最佳答案
0 
发表于 2017-7-25 02:32:50 | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
累计签到:42 天
连续签到:1 天
最佳答案
2 
发表于 2017-9-7 22:03:21 From FishC Mobile | 显示全部楼层
1. 如果您的提问得到满意的答案,请务必选择【最佳答案】;2. 如果想鼓励一下楼主或帮助到您的朋友,可以给他们【评分】作为奖励;
3. 善用【论坛搜索】功能,那里可能有您想要的答案;4. 粘贴代码请点击编辑框上的 <> 按钮,否则您的代码可能会被“吃掉”!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

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

小黑屋手机版Archiver( 粤公网安备 44051102000370号 | 粤ICP备11014136号

© 2010-2017 FishC.com GMT+8, 2017-9-23 08:20 Powered by Discuz! X2.5 Theme by dreambred

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