利用CSS控制田字格布局

360 查看

html代码:

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

css代码:

<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>