0 0 4 4 - Web最常用布局之#格子布局 | 【入门】

charles_2268 · 发表于 2018-8-25 20:05:06

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

怎么办呢？

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

小丸子hjm · 发表于 2018-11-5 09:46:23

莫希 · 发表于 2019-1-12 10:48:48

RE: 0 0 4 4 - Web最常用布局之#格子布局 | 【入门】 [修改]

不需要排面 · 发表于 2019-6-28 10:01:35

11111111111111

你在意在便在 · 发表于 2019-11-1 11:30:13

以后还是附个图好了

继续学习~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section {
        width:666px;
}
article {
        box-sizing:border-box;
        width:333px;
        height:333px;
        padding:20px;
        text-align:center;
        float:left;
        border-left: 1px solid rgba(0,0,0,.3);
        border-bottom: 1px solid rgba(0,0,0,.3);
}
article:nth-child(even) {
        border-right: 1px solid rgba(0,0,0,.3);
}
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);
}
img {
        height: 200px;
        width: 200px;
}
h1 {
        font-size:33px;
        margin:10px 0;
        color:#e74c3c;
}
p {
        font-size:16px;
        background:#e67e22;
        color:white;
        font-family: "NSimSun";
}
</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>

suweixuan1998 · 发表于 2020-1-5 10:42:06

谢谢老师，老师加油，我也加油。

<!doctype html>
<html>
<head>
                <meta charset="utf-8">
                <title>无题</title>
                <style type="text/css">
                        section{
                                        width: 666px;
                                        
                                }
                        article{
                                        box-sizing: border-box;
                                        width: 333px;
                                        height: 333px;
                                        padding: 20px;
                                        text-align: center;
                                        float: left;
                                        border-bottom: 1px solid rgba(0,0,0,.3);
                                        border-left: 1px solid rgba(0,0,0,.3);
                        
                        }
                        article:nth-child(even){
                                        border-right: 1px solid rgba(0,0,0,.3);
                        
                        }
                        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);
                        
                        }
                        article h1{
                                        font-size: 33px;
                                        margin: 10px 0;
                                        color: #F08;                        
                        }
                        article p{
                                        font-size: 20px;
                                        background-color: #F33;
                                        color: #FFF;
                                        font-family:"NSimSun";                
                        }
                        img{
                                        width: 200px;
                        
                        }
                </style>
</head>
<body>
                <section>
                                <article>
                                                <h1>高胖红灯笼</h1>
                                                <p>随风飘荡，喜庆</p>
                                                <img src="./img/img/1.png" alt="灯笼">
                                </article>
                                <article>
                                                <h1>胖红灯笼</h1>
                                                <p>随风飘荡，喜庆</p>
                                                <img src="./img/img/2.png" alt="灯笼">
                                </article>
                                <article>
                                                <h1>高瘦红灯笼</h1>
                                                <p>随风飘荡，喜庆</p>
                                                <img src="./img/img/3.png" alt="灯笼">
                                </article>
                                <article>
                                                <h1>矮胖红灯笼</h1>
                                                <p>随风飘荡，喜庆</p>
                                                <img src="./img/img/4.png" alt="灯笼">
                                </article>
                
                
                </section>

</body>
</html>

小脑斧 · 发表于 2020-3-15 11:34:24

287187056 · 发表于 2020-4-1 05:08:18

提示: 作者被禁止或删除内容自动屏蔽

1041556532 · 发表于 2020-5-28 21:45:34

什么小技巧阿

tianyuan · 发表于 2020-5-30 21:18:29

1428375758 · 发表于 2020-6-6 16:41:06

我爱小甲鱼

kmq116 · 发表于 2020-7-19 15:19:56

1111111111111111111

qiuwanzi · 发表于 2020-7-20 09:42:11

属性加框线的方法

红tea少年 · 发表于 2020-8-16 23:57:49

想看

败者食尘 · 发表于 2020-9-19 21:49:17

1111111

以梦喂马 · 发表于 2021-1-13 13:20:56

宇治松千夜 · 发表于 2021-1-23 00:07:36

有图片吗

宇治松千夜 · 发表于 2021-1-23 00:24:12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        img{
            width: 160px;
        }
        section{
            width: 666px;
        }
        article{
            box-sizing: border-box;
            width: 333px;
            height: 333px;
            padding: 20px;
            text-align: center;
            float: left;
            border: 1px solid rgba(0,0,0,0.3);
        }
        article:nth-child(2n){
            border-left: 0;
        }
        article:nth-child(-n+2){
            border-bottom: 0;
        }
    </style>
</head>
<body>
    <section>
        <article>
                <h1>招财树</h1>
                <p>招财进宝，日入斗金</p>
                <img src="img1.gif" alt="Fortune tree">
        </article>
        <article>
                <h1>金元宝</h1>
                <p>敛福生财，兴隆大业</p>
                <img src="img1.gif" alt="Gold ingot">
        </article>
        <article>
                <h1>锦绣狮</h1>
                <p>心想事成,吉祥如意</p>
                <img src="img1.gif" alt="Splendid lion">
        </article>
        <article>
                <h1>八卦图</h1>
                <p>日转千阶,源源不断</p>
                <img src="img1.gif" alt="Eight Diagrams">
        </article>
</section>
</body>
</html>

ainz42 · 发表于 2021-3-24 21:44:30

学习

omg123460 · 发表于 2021-5-29 22:43:16

账号		自动登录	找回密码
密码			立即注册

287187056 287187056 当前离线 UID 104738 日志相册贡献荣誉积分 128 狗仔卡头像被屏蔽	发表于 2020-4-1 05:08:18 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报显身卡

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

点评

评分