今天在公司没事,把九宫格写出来了.还是费了一番功夫的,虽然成功了,但感觉代码冗余,圆角用到的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;}