1.先上代码
1.1 html代码
<body>
<div id="painting">
<div id="top-row">
<div id="big" class="red right"></div>
<div id="border1" class="black right"></div>
<div class="medium yellow"></div>
<div id="border2" class="black small-border"></div>
<div id="blankbox" class="medium"></div>
</div>
<div id="bottom-row">
<div id="border3" class="black"></div>
<div id="bottom-left" class="blue left"></div>
<div id="border4" class="black left"></div>
<div id="bottom-box" class="left"></div>
<div class="border5 black left"></div>
<div id="bottom-small" class="yellow left"></div>
<div class="border5 black left"></div>
<div id="bot-right-col">
<div id="smallest"></div>
<div id="border6" class="black right"></div>
<div id="last" class="blue right"></div>
</div>
</div>
</div>
</body>
1.2 CSS代码
body {
background-color: #f6f6f6;
}
#painting {
height: 400px;
width: 400px;
background-color: #fff4db;
margin: 30px auto 0 auto;
box-shadow: 10px 10px 0px #8d8d8d;
}
#top-row {
height: 290px;
}
#big {
width: 290px;
height: 290px;
}
#border1 {
width: 10px;
height: 290px;
}
.medium {
width: 100px;
height: 140px;
}
.small-border {
width: 100px;
height: 10px;
}
#border3 {
height: 10px;
width: 400px;
}
#bottom-left {
height: 100px;
width: 100px;
}
#border4 {
height: 100px;
width: 10px;
}
#bottom-box {
height: 100px;
width: 140px;
}
.border5 {
height: 100px;
width: 10px;
}
#bottom-small {
height: 100px;
width: 100px;
}
#smallest {
height: 45px;
width: 20px;
}
#border6 {
height: 10px;
width: 30px;
}
#last {
height: 45px;
width: 30px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.black {
background-color: black;
}
.blue {
background-color: blue;
}
.right {
float: right;
}
.left {
float: left;
}
2.效果图
2872
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
