发表于: 2016-05-11 14:47:29
1 1408
今天在公司没事,把九宫格写出来了.还是费了一番功夫的,虽然成功了,但感觉代码冗余,圆角用到的css3,这个记住了....上代码
<div id="a2">
<div class="a1">
<dd class="s1"></dd>
<dd class="s2"></dd>
<dd class="s3"></dd>
</div>
<div class="a3">
<dd class="s4"></dd>
<dd class="s5"></dd>
<dd class="s6"></dd>
</div>
<div class="a4">
<dd class="s7"></dd>
<dd class="s8"></dd>
<dd class="s9"></dd>
</div>
/..........css............../
/* CSS Document */
#a2{ width:400px; height:400px;}
.s1{ width:120px; height:120px; background-color:#e8830d; float:left; margin-left:5px;border-radius:7px;}
.s2{ width:120px; height:120px; background-color:#e8830d; float:left; margin-left:5px;border-radius:7px;}
.s3{ width:120px; height:120px; background-color:#e8830d; float:left; margin-left:5px;border-radius:7px;}
.a1{ width:400px; height:120px;}
.a3{ width:400px; height:120px; margin-top:5px;}
.s4{ width:120px; height:120px; background-color:#e8830d; float:left; margin-left:5px;border-radius:7px;}
.s5{ width:120px; height:120px; background-color:#e8830d; float:left; margin-left:5px;border-radius:7px;}
.s6{ width:120px; height:120px; background-color:#e8830d; float:left; margin-left:5px;border-radius:7px;}
.a4{ width:400px; height:120px; margin-top:5px; }
.s7{ width:120px; height:120px; background-color:#e8830d; float:left; margin-left:5px;border-radius:7px;}
.s8{ width:120px; height:120px; background-color:#e8830d; float:left; margin-left:5px;border-radius:7px;}
.s9{ width:120px; height:120px; background-color:#e8830d; float:left; margin-left:5px;border-radius:7px;}
评论