求教大佬这个图形是怎么实现的?
是用border、padding、margin还是table嵌套完成的?始终不太明白
宝慕林2497579
2019-04-13
7 回答
<!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>
差不多这个意思吧
我能做到这<!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/150
提交
取消
