求教大佬这个图形是怎么实现的?-慕课网

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

来源：12-13 距离产生美 - 使用margin为盒子设置外边距（边界）

宝慕林2497579

2019-04-13 16:06

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

写回答关注

7回答

慕斯6265260

2019-04-13 19:59:53

已采纳

可以了解一下flex不哭

1 1

宝慕林249...

虽然我不懂但是谢谢你的解答

2019-04-18 19:09:07

共 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>
差不多这个意思吧

0 1
慕圣2206865

2019-09-04 16:13:59

我能做到这

0 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>

0 1
_Doogie

2019-05-27 11:47:26

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

0 1
慕腻抹473213456

2019-05-23 15:22:24

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

0 1
慕斯6265260

2019-04-13 20:00:06

flex布局

0 1