设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › Web密训营 › 0 0 4 5 - 格子布局【进阶】
返回列表 发新帖
查看: 4667|回复: 12

[庖丁解牛] 0 0 4 5 - 格子布局【进阶】

[复制链接]
不二如是
发表于 2017-2-8 10:41:03 | 显示全部楼层 |阅读模式
购买主题 已有 12 人购买  本主题需向作者支付 2 鱼币 才能浏览

本帖被以下淘专辑推荐:

小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

shishunfu
发表于 2017-5-2 15:17:38 | 显示全部楼层
布局
  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){       
  21.                         border-left: 1px solid rgba(0,0,0,.3);
  22.                 }
  23.                 article:nth-child(2){
  24.                         height: 600px;
  25.                         border-bottom: 1px solid rgba(0,0,0,.3);
  26.                         padding-top: 150px;
  27.                 }
  28.                 article:nth-child(3){
  29.                         border-bottom: 1px solid rgba(0,0,0,.3);
  30.                         margin-top: -300px;
  31.                         /*margin-top: -300px; 相当于在第三个格子上面开了一个黑洞空间，吸收了300px像素高度。*/
  32.                 }
  33.                 article h1{
  34.                         font-size: 33px;
  35.                         margin:10px 0;
  36.                         color:#F08;
  37.                 }
  38.                 article p{
  39.                         font-size: 20px;
  40.                         background-color: #F33;
  41.                         color: #FFF;
  42.                         font-family: sans-serif ;
  43.                 }
  44.         </style>
  45. </head>
  46. <body>
  47. <section>
  48.         <article>
  49.                 <h1>招财树</h1>
  50.                 <p>招财进宝，日入斗金</p>
  51.                 <img src="p1.png" alt="Fortune tree">
  52.         </article>
  53.         <article>
  54.                 <h1>金元宝</h1>
  55.                 <p>敛福生财，兴隆大业</p>
  56.                 <img src="p2.png" alt="Gold ingot">
  57.         </article>
  58.         <article>
  59.                 <h1>锦绣狮</h1>
  60.                 <p>心想事成,吉祥如意</p>
  61.                 <img src="p3.png" alt="Splendid lion">
  62.         </article>
  63. </section>
  64. </body>
  65. </html>
复制代码
0037Layout.png

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2017-5-2 21:12
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

aswyamato1989
发表于 2017-7-25 03:07:06 | 显示全部楼层
交作业！
045-1.jpg
045-2.jpg
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

隨鈊乄鎍慾
发表于 2018-6-19 08:38:11 | 显示全部楼层
交作业：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             section{
  8.                                 width:666px;
  9.                         }
  10.                         article{
  11.                                 box-sizing:border-box;
  12.                                 width:333px;
  13.                                 height:333px;
  14.                                 padding:20px;
  15.                                 text-align:center;
  16.                                 float:left;
  17.                                 border-bottom:1px solid rgba(0,0,0,0.3);
  18.                                 border-left:1px solid rgba(0,0,0,0.3);
  19.                                 #border-top:1px solid rgba(0,0,0,0.3);
  20.                                
  21.                         }
  22.                         /*这种方法是不二用的可把右边线一次全部补齐，
  23.                         article:nth-child(even){
  24.                                 border-right: 1px solid rgba(0,0,0,.3);
  25.                         }
  26.                         */
  27.                         article:nth-child(2){
  28.                                
  29.                                 border-top:1px solid rgba(0,0,0,0.3);
  30.                                 border-right:1px solid rgba(0,0,0,0.3);
  31.                         }

  33.                         article:nth-child(1){
  34.                                 height:666px;
  35.                                 padding-top:200px;/*使金元宝居中*/
  36.                                 border-top:1px solid rgba(0,0,0,0.3);
  37.                         }

  39.                         article:last-child{
  40.                                 #margin-top:-333px;
  41.                                 border-right:1px solid rgba(0,0,0,0.3);
  42.                         }

  44.                         article h1{
  45.                                 font-size: 33px;
  46.                                 margin:10px 0;
  47.                                 color:#F08;
  48.             }
  49.                         article p{
  50.                                         font-size: 20px;
  51.                                         background-color: #F33;
  52.                                         color: #FFF;
  53.                                         font-family: "NSimSun";
  54.                         }
  55.                        
  56.         </style>
  57. </head>
  58. <body>
  59.         <section>
  60.                 <article>
  61.                         <h1>招财树</h1>
  62.                         <p>招财进宝，日入斗金</p>
  63.                         <img src="招财树.png" alt="Fortune tree">
  64.                 </article>
  65.                 <article>
  66.                         <h1>金元宝</h1>
  67.                         <p>敛福生财，兴隆大业</p>
  68.                         <img src="金元宝.png" alt="Gold ingot">
  69.                 </article>
  70.                 <article>
  71.                         <h1>锦绣狮</h1>
  72.                         <p>心想事成,吉祥如意</p>
  73.                         <img src="锦绣狮.png" alt="Splendid lion">
  74.                 </article>
  75.                 <!--<article>
  76.                         <h1>八卦图</h1>
  77.                         <p>日转千阶,源源不断</p>
  78.                         <img src="八卦图.png" alt="Eight Diagrams">
  79.                 </article>-->
  80.         </section>
  81. </body>
  82. </html>
复制代码


360截图20180619083839627.png

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2018-6-19 08:57

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 鱼C有你更精彩^_^

查看全部评分

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

STmove
发表于 2018-7-20 16:11:35 | 显示全部楼层
发现给右边这块设置float：right，就不会把下面那个挤下去了：
  1.         <style type="text/css">
  2.                 section
  3.                 {
  4.                         width:666px;
  5.                 }
  6.                 article
  7.                 {
  8.                         box-sizing:border-box;
  9.                         width:333px;
  10.                         height:333px;
  11.                         padding:20px;
  12.                         text-align:center;
  13.                         float:left;
  14.                         border-bottom:1px solid rgba(0,0,0,.3);
  15.                         border-right:1px solid rgba(0,0,0,.3);
  16.                 }
  17.                 article:nth-child(odd)
  18.                 {
  19.                         border-left:1px solid rgba(0,0,0,.3);
  20.                 }
  21.                 article:nth-child(1)
  22.                 {
  23.                         border-top:1px solid rgba(0,0,0,.3);
  24.                 }
  25.                 article:nth-child(2)
  26.                 {
  27.                         border-top:1px solid rgba(0,0,0,.3);
  28.                         height:666px;
  29.                         float:right;
  30.                         padding-top:200px;
  31.                 }
  32.                 article h1
  33.                 {
  34.                         font-size: 33px;
  35.                         margin:10px 0;
  36.                         color:#F08;
  37.                 }
  38.                 article p
  39.                 {
  40.                         font-size: 20px;
  41.                         background-color: rgba(255,45,45,.9);
  42.                         color: #FFF;
  43.                         font-family: "NSimSun";
  44.                 }
  45.         </style>
复制代码

1.png

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2018-8-6 13:41

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 鱼C有你更精彩^_^

查看全部评分

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

floride
发表于 2018-8-6 10:50:48 | 显示全部楼层
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

你在意在便在
发表于 2019-11-1 16:04:15 | 显示全部楼层
积累~

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <style type="text/css">
  7. section {
  8.         width:666px;
  9. }
  10. article {
  11.         box-sizing:border-box;
  12.         width:333px;
  13.         height:333px;
  14.         padding:20px;
  15.         text-align:center;
  16.         float:left;
  17.         border-left: 1px solid rgba(0,0,0,.3);
  18.         border-bottom: 1px solid rgba(0,0,0,.3);
  19. }
  20. article:nth-child(even) {
  21.         border-right: 1px solid rgba(0,0,0,.3);
  22. }
  23. article:nth-child(1) {
  24.         border-top:1px solid rgba(0,0,0,.3)
  25. }
  26. article:nth-child(2) {
  27.         border-top:1px solid rgba(0,0,0,.3);
  28.         height: 666px;
  29.         padding-top:200px;
  30. }
  31. article:nth-child(3) {
  32.         /* border-right: 1px solid rgba(0,0,0,.3); */
  33.         /* width: 100%; */
  34.         margin-top:-333px;
  35. }      
  36. img {
  37.         height: 200px;
  38.         width: 200px;
  39. }
  40. h1 {
  41.         font-size:33px;
  42.         margin:10px 0;
  43.         color:#e74c3c;
  44. }
  45. p {
  46.         font-size:16px;
  47.         background:#e67e22;
  48.         color:white;
  49.         font-family: "NSimSun";
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <section>
  55.         <article>
  56.                 <h1>招财树</h1>
  57.                 <p>招财进宝，日入斗金</p>
  58.                 <img src="1.png" alt="Fortune tree">
  59.         </article>
  60.         <article>
  61.                 <h1>金元宝</h1>
  62.                 <p>敛福生财，兴隆大业</p>
  63.                 <img src="2.png" alt="Gold ingot">
  64.         </article>
  65.         <article>
  66.                 <h1>锦绣狮</h1>
  67.                 <p>心想事成,吉祥如意</p>
  68.                 <img src="3.png" alt="Splendid lion">
  69.         </article>
  70. <!--         <article>
  71.                 <h1>八卦图</h1>
  72.                 <p>日转千阶,源源不断</p>
  73.                 <img src="4.png" alt="Eight Diagrams">
  74.         </article> -->
  75. </section>
  76. </body>
  77. </html>
复制代码
hhhh.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

suweixuan1998
发表于 2020-1-9 11:53:16 | 显示全部楼层
  1. <!doctype html>
  2. <html>
  3. <head>
  4.                 <meta charset="utf-8">
  5.                 <title>无题</title>
  6.                 <style type="text/css">
  7.                         section{
  8.                                         width: 666px;
  9.                                        
  10.                                 }
  11.                         article{
  12.                                         box-sizing: border-box;
  13.                                         width: 333px;
  14.                                         height: 333px;
  15.                                         padding: 20px;
  16.                                         text-align: center;
  17.                                         float: left;
  18.                                         border-bottom: 1px solid rgba(0,0,0,.3);
  19.                                         border-left: 1px solid rgba(0,0,0,.3);
  20.                                         border-top: 1px solid rgba(0,0,0,.3);       
  21.                         }
  22.                 /*        article:nth-child(even){
  23.                                         border-right: 1px solid rgba(0,0,0,.3);
  24.                        
  25.                         }*/
  26.                         /*article:nth-child(1){
  27.                                         border-top: 1px solid rgba(0,0,0,.3);
  28.                        
  29.                         }*/
  30.                         article:nth-child(2){
  31.                                         height: 666px;
  32.                                         padding-top: 200px;
  33.                                         border-right: 1px solid rgba(0,0,0,.3);
  34.                         }
  35.                          article:nth-child(3){
  36.                                         margin-top: -333px;
  37.                        
  38.                         }
  39.                         article h1{
  40.                                         font-size: 33px;
  41.                                         margin: 10px 0;
  42.                                         color: #F08;                       
  43.                         }
  44.                         article p{
  45.                                         font-size: 20px;
  46.                                         background-color: #F33;
  47.                                         color: #FFF;
  48.                                         font-family:"NSimSun";               
  49.                         }
  50.                         img{
  51.                                         width: 200px;
  52.                        
  53.                         }
  54.                 </style>
  55. </head>
  56. <body>
  57.                 <section>
  58.                                 <article>
  59.                                                 <h1>高胖红灯笼</h1>
  60.                                                 <p>随风飘荡，喜庆</p>
  61.                                                 <img src="./img/img/1.png" alt="灯笼">
  62.                                 </article>
  63.                                 <article>
  64.                                                 <h1>胖红灯笼</h1>
  65.                                                 <p>随风飘荡，喜庆</p>
  66.                                                 <img src="./img/img/2.png" alt="灯笼">
  67.                                 </article>
  68.                                 <article>
  69.                                                 <h1>高瘦红灯笼</h1>
  70.                                                 <p>随风飘荡，喜庆</p>
  71.                                                 <img src="./img/img/3.png" alt="灯笼">
  72.                                 </article>
  73.                 <!--        <article>
  74.                                                 <h1>矮胖红灯笼</h1>
  75.                                                 <p>随风飘荡，喜庆</p>
  76.                                                 <img src="./img/img/4.png" alt="灯笼">
  77.                                 </article>-->
  78.                
  79.                
  80.                 </section>

  82. </body>
  83. </html>
复制代码
1.jpg
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

小脑斧
发表于 2020-3-15 14:51:44 | 显示全部楼层

撸鉄.png
撸鉄2.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

红tea少年
发表于 2022-2-14 16:08:04 | 显示全部楼层
本次学习印象非常深刻
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-6-8 10:13

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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