不二如是 发表于 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

{:7_146:}

你在意在便在 发表于 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

本次学习印象非常深刻
页: [1]
查看完整版本: 0 0 4 5 - 格子布局【进阶】