求教大佬這個圖形是怎么實現(xiàn)的?
是用border、padding、margin還是table嵌套完成的?始終不太明白
寶慕林2497579
2019-04-13
7 回答
舉報
0/150
提交
取消
2019-04-13
可以了解一下flex不哭
2020-06-16
<!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>
差不多這個意思吧?
2019-09-04
2019-09-04
<!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>
2019-05-27
float浮動加設置margin就行，不用太復雜，解決的方式多種。
2019-05-23
不需要盒子 就是頁面的標簽定義
2019-04-13
flex布局