问答详情
源自：12-13 距离产生美 - 使用margin为盒子设置外边距（边界）

求教大佬这个图形是怎么实现的?


https://img4.mukewang.com/5cb197b60001a55b06000400.jpg

是用border、padding、margin还是table嵌套完成的?始终不太明白


提问者：宝慕林2497579 2019-04-13 16:06

个回答

  • 慕斯6265260
    2019-04-13 19:59:53
    已采纳

    可以了解一下flex不哭

    1
  • Ottff
    2020-06-16 17:14:00

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>边框</title>

    <style type="text/css">

            .zuida {

                     width:502px;

                     height:302px;

                     background-color:purple;

                     padding:1px ;

            }

            div {

                    color:white

            }

             #header {

                     margin-left:20px;

                     margin-right:20px;

                     margin-top:10px;

                     margin-bottom:10px;

                     color:red;

                     background-color:yellow;

                     padding-left:20px;

             }

             .mainContent {

                     margin-left:20px;

                     margin-right:20px;

                     height:220px;

                     margin-bottom:10px;

                     background-color:green;

                     padding-left:18px;

             }

             #footer {

                     margin-left:20px;

                     margin-right:20px;

                     margin-bottom:10px;

                     background-color:red;

                     padding-left:20px;

             }

             span {

                     display:inline-block;

                     width:120px;

                     height:160px;

                     line-height:160px;

                    text-align:center;

             }

             #sidebar {

                     background-color:grey;

                     margin-left:22px

             }

             #content {

                     background-color:brown;

                     margin-left:12px;

             }

             #sidebar2 {

                     background-color:orange;

                     margin-left:12px;

             }

    </style>

    </head>

    <body>

        <div class="zuida">

                 <div id="header">#header</div>

                 <div class="mainContent"><p>#mainContent<p>

                         <span id="sidebar">#sidebar</span>

                         <span id="content">#content</span>

                         <span id="sidebar2">#sidebar2</span>

                 </div>

                 <div id="footer">#footer</div>

        </div>

    </body>

    </html>

    http://img2.mukewang.com/5ee88d1400011da205020304.jpg

    差不多这个意思吧 


    1
  • 慕圣2206865
    2019-09-04 16:13:59

    http://img2.mukewang.com/5d6f723600019a1b08590821.jpg我能做到这

    1
  • 慕圣2206865
    2019-09-04 16:11:56

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>边距</title>

    <style type="text/css">

    #box1{width:700px;height:800px;border:1px solid red;padding:50px;background:purple;}

    #box1 #box2{width:600px;height:100px;border:1px solid green;margin:50px;background:yellow;}

    #box1 #box3{width:600px;height:400px;border:1px solid purple;margin:50px;background:green;}

    #box1 #box4{width:600px;height:100px;border:1px solid green;margin:50px;background:red;}

    span{display:block;width:130px;height:350px;border:1px solid pink;margin:25px;float:left;}

    #box3 #box5{background:gray;}

    #box3 #box6{background:red;}

    #box3 #box7{background:orange;}

    </style>

    </head>

    <body>

        <div id="box1">box1

        <p id="box2">box2</p> <p id="box3">box3<span id="box5">box5</span><span id="box6">box6</span><span id="box7">box7</span></p> <p id="box4">box4</p>

        </div>

          

    </body>

    </html>


    1
  • _Doogie
    2019-05-27 11:47:26

    float浮动加设置margin就行，不用太复杂，解决的方式多种。

    1
  • 慕腻抹473213456
    2019-05-23 15:22:24

    不需要盒子 就是页面的标签定义

    1
  • 慕斯6265260
    2019-04-13 20:00:06

    flex布局

    1