JSFiddle - React, Tailwind, and code Playground

by camnpr

HTML

<!--三行三列border-width:5px,每个格子50*50，格子hover边框变红（兼容ie6+，考虑语义化的结构-->

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>

<table border="1" cellspacing="0" cellspacing="0">
    <tr><td>1</td><td>2</td><td>3</td></tr>
    <tr><td>4</td><td>5</td><td>6</td></tr>
    <tr><td>7</td><td>8</td><td>9</td></tr>
</table>

CSS

ul{padding:0;list-style:none;width:170px;border:solid 1px yellow;float:left;}
ul li{border:solid 5px blue;   
    width:50px;height:50px;text-align:center;line-height:50px;
    float:left;margin:0 -5px -5px 0;z-index:1;position:relative;
}
ul li:hover{border-color:red;z-index:2;}


table{border-color:blue;}
table td{text-align:center;width:50px;height:50px;line-height:50px;}
table td:hover{border-color:red;}