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

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › Web密训营 › 0 0 4 4 - Web最常用布局之#格子布局 | 【入门】
123下一页
返回列表 发新帖
楼主: 不二如是

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

[复制链接]
charles_2268
发表于 2018-8-25 20:05:06 | 显示全部楼层
当只设置一个值时，上下左右都是1px，两幅图中间就会重叠在一起变为2px。。。

怎么办呢？

很简单先设置每幅图的上面和左面有框线：  这里写错了，应该是下面

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2018-8-26 09:09

评分

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

查看全部评分

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

使用道具 举报

小丸子hjm
发表于 2018-11-5 09:46:23 | 显示全部楼层
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

莫希
发表于 2019-1-12 10:48:48 | 显示全部楼层
RE: 0 0 4 4 - Web最常用布局之#格子布局 | 【入门】 [修改]
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

不需要排面
发表于 2019-6-28 10:01:35 | 显示全部楼层
11111111111111
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

你在意在便在
发表于 2019-11-1 11:30:13 | 显示全部楼层
以后还是附个图好了   继续学习~

  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. }
  29. img {
  30.         height: 200px;
  31.         width: 200px;
  32. }
  33. h1 {
  34.         font-size:33px;
  35.         margin:10px 0;
  36.         color:#e74c3c;
  37. }
  38. p {
  39.         font-size:16px;
  40.         background:#e67e22;
  41.         color:white;
  42.         font-family: "NSimSun";
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <section>
  48.         <article>
  49.                 <h1>招财树</h1>
  50.                 <p>招财进宝，日入斗金</p>
  51.                 <img src="1.png" alt="Fortune tree">
  52.         </article>
  53.         <article>
  54.                 <h1>金元宝</h1>
  55.                 <p>敛福生财，兴隆大业</p>
  56.                 <img src="2.png" alt="Gold ingot">
  57.         </article>
  58.         <article>
  59.                 <h1>锦绣狮</h1>
  60.                 <p>心想事成,吉祥如意</p>
  61.                 <img src="3.png" alt="Splendid lion">
  62.         </article>
  63.         <article>
  64.                 <h1>八卦图</h1>
  65.                 <p>日转千阶,源源不断</p>
  66.                 <img src="4.png" alt="Eight Diagrams">
  67.         </article>
  68. </section>
  69. </body>
  70. </html>
复制代码
1112.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

suweixuan1998
发表于 2020-1-5 10:42:06 | 显示全部楼层
谢谢老师，老师加油，我也加油。
  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.                        
  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.                                         border-top: 1px solid rgba(0,0,0,.3);
  32.                        
  33.                         }
  34.                         article h1{
  35.                                         font-size: 33px;
  36.                                         margin: 10px 0;
  37.                                         color: #F08;                       
  38.                         }
  39.                         article p{
  40.                                         font-size: 20px;
  41.                                         background-color: #F33;
  42.                                         color: #FFF;
  43.                                         font-family:"NSimSun";               
  44.                         }
  45.                         img{
  46.                                         width: 200px;
  47.                        
  48.                         }
  49.                 </style>
  50. </head>
  51. <body>
  52.                 <section>
  53.                                 <article>
  54.                                                 <h1>高胖红灯笼</h1>
  55.                                                 <p>随风飘荡，喜庆</p>
  56.                                                 <img src="./img/img/1.png" alt="灯笼">
  57.                                 </article>
  58.                                 <article>
  59.                                                 <h1>胖红灯笼</h1>
  60.                                                 <p>随风飘荡，喜庆</p>
  61.                                                 <img src="./img/img/2.png" alt="灯笼">
  62.                                 </article>
  63.                                 <article>
  64.                                                 <h1>高瘦红灯笼</h1>
  65.                                                 <p>随风飘荡，喜庆</p>
  66.                                                 <img src="./img/img/3.png" alt="灯笼">
  67.                                 </article>
  68.                                 <article>
  69.                                                 <h1>矮胖红灯笼</h1>
  70.                                                 <p>随风飘荡，喜庆</p>
  71.                                                 <img src="./img/img/4.png" alt="灯笼">
  72.                                 </article>
  73.                
  74.                
  75.                 </section>

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

使用道具 举报

小脑斧
发表于 2020-3-15 11:34:24 | 显示全部楼层
撸鉄.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

287187056
头像被屏蔽
发表于 2020-4-1 05:08:18 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

1041556532
发表于 2020-5-28 21:45:34 | 显示全部楼层
什么小技巧阿
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

tianyuan
发表于 2020-5-30 21:18:29 | 显示全部楼层
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

1428375758
发表于 2020-6-6 16:41:06 | 显示全部楼层
我爱小甲鱼
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

kmq116
发表于 2020-7-19 15:19:56 | 显示全部楼层
1111111111111111111
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

qiuwanzi
发表于 2020-7-20 09:42:11 | 显示全部楼层
属性加框线的方法
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

红tea少年
发表于 2020-8-16 23:57:49 | 显示全部楼层
想看
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

败者食尘
发表于 2020-9-19 21:49:17 | 显示全部楼层
1111111
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

以梦喂马
发表于 2021-1-13 13:20:56 | 显示全部楼层
111
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

宇治松千夜
发表于 2021-1-23 00:07:36 | 显示全部楼层
有图片吗
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

宇治松千夜
发表于 2021-1-23 00:24:12 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style type="text/css">
  8.         img{
  9.             width: 160px;
  10.         }
  11.         section{
  12.             width: 666px;
  13.         }
  14.         article{
  15.             box-sizing: border-box;
  16.             width: 333px;
  17.             height: 333px;
  18.             padding: 20px;
  19.             text-align: center;
  20.             float: left;
  21.             border: 1px solid rgba(0,0,0,0.3);
  22.         }
  23.         article:nth-child(2n){
  24.             border-left: 0;
  25.         }
  26.         article:nth-child(-n+2){
  27.             border-bottom: 0;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <section>
  33.         <article>
  34.                 <h1>招财树</h1>
  35.                 <p>招财进宝，日入斗金</p>
  36.                 <img src="img1.gif" alt="Fortune tree">
  37.         </article>
  38.         <article>
  39.                 <h1>金元宝</h1>
  40.                 <p>敛福生财，兴隆大业</p>
  41.                 <img src="img1.gif" alt="Gold ingot">
  42.         </article>
  43.         <article>
  44.                 <h1>锦绣狮</h1>
  45.                 <p>心想事成,吉祥如意</p>
  46.                 <img src="img1.gif" alt="Splendid lion">
  47.         </article>
  48.         <article>
  49.                 <h1>八卦图</h1>
  50.                 <p>日转千阶,源源不断</p>
  51.                 <img src="img1.gif" alt="Eight Diagrams">
  52.         </article>
  53. </section>
  54. </body>
  55. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

ainz42
发表于 2021-3-24 21:44:30 From FishC Mobile | 显示全部楼层
学习
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

omg123460
发表于 2021-5-29 22:43:16 | 显示全部楼层
1
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2025-7-1 05:42

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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