1. 程式人生 > >五子棋棋盤佈局 table和ul哪個好

五子棋棋盤佈局 table和ul哪個好

想要在頁面佈局以上棋盤,可以用ul li 佈局,但卻有明顯的缺點:

1.兩行兩列:ul li 下面如果再放li 會出錯,只能是放其他的,比如div。

                     或者放li *行*列;

           但是這樣有兩個明顯缺陷:

           border得考慮用邏輯調節:相鄰的liborder會疊加,大於邊框的border

           落子後的設計:li不能設定成border-radius:50%;因為會出現下面現象-----border變圓了;

所以,用table標籤最合適;

table下的td設定完border後,可以將table的屬性

     border-collapse: collapse;//合併border        border-spacing: 0px; //防止出現間隙; 並且設定給 td設定border-radius後,外層的border還是方形,但是背景會變圓形,這點讓我驚訝-----可以看出,border沒發生變形!!!!!

 

利用table標籤,很容易能夠佈局出棋盤。