0 0 4 5 - 格子布局【进阶】

不二如是 · 发表于 2017-2-8 10:41:03

购买主题 已有 12 人购买 本主题需向作者支付 2 鱼币 才能浏览

shishunfu · 发表于 2017-5-2 15:17:38

布局

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Layout</title>
        <style type="text/css">
                section{
                        width: 600px;
                }
                article{
                        box-sizing: border-box;
                        width: 300px;
                        height: 300px;
                        padding: 20px;
                        text-align: center;
                        float: left;
                        border-top: 1px solid rgba(0,0,0,.3);
                        border-right:1px solid rgba(0,0,0,.3);
                }
                article:nth-child(odd){        
                        border-left: 1px solid rgba(0,0,0,.3);
                }
                article:nth-child(2){
                        height: 600px;
                        border-bottom: 1px solid rgba(0,0,0,.3);
                        padding-top: 150px;
                }
                article:nth-child(3){
                        border-bottom: 1px solid rgba(0,0,0,.3);
                        margin-top: -300px;
                        /*margin-top: -300px; 相当于在第三个格子上面开了一个黑洞空间，吸收了300px像素高度。*/
                }
                article h1{
                        font-size: 33px;
                        margin:10px 0;
                        color:#F08;
                }
                article p{
                        font-size: 20px;
                        background-color: #F33;
                        color: #FFF;
                        font-family: sans-serif ;
                }
        </style>
</head>
<body>
<section>
        <article>
                <h1>招财树</h1>
                <p>招财进宝，日入斗金</p>
                <img src="p1.png" alt="Fortune tree">
        </article>
        <article>
                <h1>金元宝</h1>
                <p>敛福生财，兴隆大业</p>
                <img src="p2.png" alt="Gold ingot">
        </article>
        <article>
                <h1>锦绣狮</h1>
                <p>心想事成,吉祥如意</p>
                <img src="p3.png" alt="Splendid lion">
        </article>
</section>
</body>
</html>

aswyamato1989 · 发表于 2017-7-25 03:07:06

交作业！

隨鈊乄鎍慾 · 发表于 2018-6-19 08:38:11

交作业：

<!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,0.3);
                                border-left:1px solid rgba(0,0,0,0.3);
                                #border-top:1px solid rgba(0,0,0,0.3);
                                
                        }
                        /*这种方法是不二用的可把右边线一次全部补齐，
                        article:nth-child(even){
                                border-right: 1px solid rgba(0,0,0,.3);
                        }
                        */
                        article:nth-child(2){
                                
                                border-top:1px solid rgba(0,0,0,0.3);
                                border-right:1px solid rgba(0,0,0,0.3);
                        }

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

                        article:last-child{
                                #margin-top:-333px;
                                border-right:1px solid rgba(0,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";
                        }
                        
        </style>
</head>
<body>
        <section>
                <article>
                        <h1>招财树</h1>
                        <p>招财进宝，日入斗金</p>
                        <img src="招财树.png" alt="Fortune tree">
                </article>
                <article>
                        <h1>金元宝</h1>
                        <p>敛福生财，兴隆大业</p>
                        <img src="金元宝.png" alt="Gold ingot">
                </article>
                <article>
                        <h1>锦绣狮</h1>
                        <p>心想事成,吉祥如意</p>
                        <img src="锦绣狮.png" alt="Splendid lion">
                </article>
                <!--<article>
                        <h1>八卦图</h1>
                        <p>日转千阶,源源不断</p>
                        <img src="八卦图.png" alt="Eight Diagrams">
                </article>-->
        </section>
</body>
</html>

STmove · 发表于 2018-7-20 16:11:35

发现给右边这块设置float：right，就不会把下面那个挤下去了：

        <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-right:1px solid rgba(0,0,0,.3);
                }
                article:nth-child(odd)
                {
                        border-left: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);
                        height:666px;
                        float:right;
                        padding-top:200px;
                }
                article h1
                {
                        font-size: 33px;
                        margin:10px 0;
                        color:#F08;
                }
                article p
                {
                        font-size: 20px;
                        background-color: rgba(255,45,45,.9);
                        color: #FFF;
                        font-family: "NSimSun";
                }
        </style>

floride · 发表于 2018-8-6 10:50:48

你在意在便在 · 发表于 2019-11-1 16:04:15

积累~

<!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);
        height: 666px;
        padding-top:200px;
}
article:nth-child(3) {
        /* border-right: 1px solid rgba(0,0,0,.3); */
        /* width: 100%; */
        margin-top:-333px;
}       
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-9 11:53:16

<!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);
                                        border-top: 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){
                                        height: 666px;
                                        padding-top: 200px;
                                        border-right: 1px solid rgba(0,0,0,.3);
                        }
                         article:nth-child(3){
                                        margin-top: -333px;
                        
                        }
                        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 14:51:44

红tea少年 · 发表于 2022-2-14 16:08:04

本次学习印象非常深刻

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

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 56916 狗仔卡	发表于 2017-2-8 10:41:03 \| 显示全部楼层 \|阅读模式购买主题已有 12 人购买本主题需向作者支付 2 鱼币才能浏览本帖被以下淘专辑推荐: · HTML5 & CSS3 - 庖丁解牛\|主题: 205, 订阅: 36
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

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

本帖被以下淘专辑推荐:

点评

点评

评分

点评

评分