利用CSS控制田字格布局

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

<style>

• { margin:0px;padding:0px;}
  ul { width:399px;height:399px;border:1px solid #000;overflow:hidden;margin:50px;}
  ul li { width:199px;height:199px;float:left;list-style:none;text-align:center;line-height:199px;}
  ul li:nth-child(1) {background-color:#f00;border-bottom:1px solid #000;}
  ul li:nth-child(2) {background-color:#007832;border-bottom:1px solid #000; }
  ul li:nth-child(3) {background-color:#0c9fe0;}
  ul li:nth-child(4) {background-color:#c4a809;}
  ul li:nth-child(2n+1) { border-right:1px solid #000;}
  </style>