想要在页面布局以上棋盘,可以用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标签,很容易能够布局出棋盘。

五子棋棋盘布局 table和ul哪个好的更多相关文章

  1. Android表格布局(Table Layout)

    Android表格布局(Table Layout) 先来看布局管理器之间继承关系图: 图1 可知TableLayout继承了LinearLayout,所以表格布局本质上依然是线性管理器. 表格布局采用 ...

  2. 有间距的表格布局 table布局

    1.先看有间距的布局效果: 2.少说多做,直接看代码(代码中有注释) <!DOCTYPE html> <html lang="zh"> <head&g ...

  3. 网页布局——table布局

    table 的特性决定了它非常适合用来做布局,并且表格中的内容可以自动居中,这是之前用的特别多的一种布局方式 而且也加入了 display:table;dispaly:table-cell 来支持 t ...

  4. ExtJS 布局-Table布局(Table layout)

    更新记录: 2022年6月1日 开始. 2022年6月10日 发布. 1.说明 table布局类似表格,通过指定行列数实现布局. 2.设置布局方法 在父容器中指定 layout: 'table' la ...

  5. Qt中绘制五子棋棋盘

    一个需要做大作业的同学问我相关内容,就顺手写了一个,贴出来. 项目包含头文件 mainwindowh,源文件mainwindow.cpp和主函数main.cpp. 如下: mainwindow.h # ...

  6. js如何获取table或者ul中鼠标点的行号和内容

    <html> <head> <script language="javascript"> function doclick() { var td ...

  7. 浅谈ul布局以及table布局

    我个人对于某些言论说要注重html语义化在布局中的应用,我反而不怎么感冒,试试兼容IE7&&项目期相对较赶的情况下,我还是推荐快速开发为主,兼容性强为主. 如果布局中需要用户边框,推荐 ...

  8. 关于css布局的记录(一) --table和flex布局

    1.table方式布局 效果图: 直接用table等标签布局,table布局自动垂直居中 亦可用 display:table == <table>.display:table-cell = ...

  9. 为什么要使用ul li布局网站导航条?使用ul li布局网站网页导航必要性

    会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. ...

随机推荐

  1. Android CollapsingToolbarLayout使用介绍

    我非常喜欢Material Design里折叠工具栏的效果,bilibili Android客户端视频详情页就是采用的这种设计.这篇文章的第二部分我们就通过简单的模仿bilibili视频详情页的实现来 ...

  2. 图解 Git

    https://juejin.im/entry/5917c463da2f60005de84195

  3. JSONObject、JSONArray、Map、JavaBean的相互转换

    1,JSONObject json对象,就是一个键对应一个值,使用的是大括号{ },如:{key:value} 2,JSONArray json数组,使用中括号[ ],只不过数组里面的项也是json键 ...

  4. 每天一个linux命令(17):whereis

    1.命令简介         whereis (whereis) 命令用来定位指令的二进制程序.源代码文件和man手册页等相关文件的路径.         whereis命令只能用于程序名的搜索,而且 ...

  5. P Invoke struct结构

    一.获取Struct CHCNetSDK.NET_DVR_PTZPOS pos = new CameraTest.CHCNetSDK.NET_DVR_PTZPOS(); int size = Mars ...

  6. html5利用websocket完成的推送功能(tomcat)

    html5利用websocket完成的推送功能(tomcat) 利用websocket和java完成的消息推送功能,服务器用的是tomcat7.0.42,一些东西是自己琢磨的,也不知道恰不恰当,不恰当 ...

  7. Effective Java 第三版——68. 遵守普遍接受的命名约定

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  8. 爬取 Caused by SSLError(SSLError("bad handshake: Error

    在爬虫中遇到如下报错: Traceback (most recent call last): File "C:/Users/xuchunlin/PycharmProjects/A9_25/h ...

  9. js常用加解密函数汇总

    1. JS自定义加密解密函数,及用法 function compile(code) { )+code.length); ;i<code.length;i++){ c+=String.fromCh ...

  10. input 呼起数字键盘

    1. Android,定义 type="number" 2. iOS,定义 style="ime-mode: disabled;" 注,呼起数字键盘后,用户输入 ...