五子棋棋盘布局 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标签,很容易能够布局出棋盘。
posted @ 2019-01-06 08:18  当当和瓶瓶  阅读(538)  评论(0编辑  收藏  举报