最近在写后台，自己手写布局练习一下哈哈哈
实现：
1. 每行2-3个元素居中排列（小中号控制面板）
2. 左侧大号元素（后期可能方数据分析图啥的） + 右侧两个小方格（小号数据面板）
废话不多说，直接上效果图 + 源码
源码
1.css
body {
width: 1400px;
margin: 0 auto;
}
.out-box {
width: 100%;
left: 0;
right: 0;
margin: 0 auto;
background-color: #3a3a3a;
}
.inner-box--mid-2 {
width: 48.5%;
height: 350px;
float: left;
margin: 1% 0 0 1%;
background-color: #d7c513;
display: inline-block;
}
.inner-box-mid-3 {
width: 32%;
height: 250px;
float: left;
margin: 1% 0 0 1%;
background-color: #ce6f0f;
display: inline-block;
}
.inner-box-left-2 {
width: 65%;
height: 514px;
float: left;
margin: 1% 0 0 1%;
background-color: #96897c;
display: inline-block;
}
.inner-box-right-2 {
width: 32%;
height: 250px;
float: left;
margin: 1% 0 0 1%;
background-color: #0e8bbd;
display: inline-block;
}2.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div class="out-box">
<div class="inner-box--mid-2"></div>
<div class="inner-box--mid-2"></div>
</div>
<div class="out-box">
<div class="inner-box-mid-3"></div>
<div class="inner-box-mid-3"></div>
<div class="inner-box-mid-3"></div>
</div>
<div class="out-box">
<div class="inner-box-left-2"></div>
<div class="inner-box-right-2"></div>
<div class="inner-box-right-2"></div>
</div>
<div class="out-box">
<div class="inner-box--mid-2"></div>
<div class="inner-box--mid-2"></div>
</div>
</body>
</html>
744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
