曾梦垚

导航

好玩的盒子布局

<! DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>

<style type="text/css">
.a{
background-color: red;
}
.b{
background-color: orange;
}
.c{
background-color: green;
}
.d{
background-color: cyan;
}
.e{
background-color: blue;
}
.f{
background-color: purple;
}

.g{
background-color: gray;
}
.h{
background-color: pink;
}
.i{
background-color: yellow;
}


</style>
</head>
<body>

<table>
<tr>
<td class="a" rowspan="2">1</td>
<td class="b">2</td>
<td class="c" colspan="2">3</td>
<td class="d" rowspan="2">4</td>
</tr>

<tr>
<td class="e" colspan="2">5</td>
<td class="f" rowspan="2">6</td>

</tr>

<tr>
<td class="g" colspan="2">7</td>
<td class="h">8</td>
<td class="i">9</td>

</tr>

</table>


</body>
</html>

posted on 2016-10-25 19:52  曾梦垚  阅读(122)  评论(0编辑  收藏  举报