想要在页面布局以上棋盘,可以用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. HRMS(人力资源管理系统)-SaaS架构设计-概要设计实践

    一.开篇 前期我们针对架构准备阶段及需求分析这块我们写了2篇内容<HRMS(人力资源管理系统)-从单机应用到SaaS应用-架构分析(功能性.非功能性.关键约束)-上篇><HRMS(人 ...

  2. 每天一个linux命令:find

    1.命令简介         find(find) 命令用来在指定目录下查找文件.任何位于参数之前的字符串都将被视为欲查找的目录名.如果使用该命令时,不设置任何参数,则find命令将在当前目录下查找子 ...

  3. linux下 彻底修改python的包/模块导入路径

    python模式下,有时候需要导入  import某些模块或者包.明明这个模块/包是存在的,却提示导入错误,比如,“ImportError: No module named lxml”. 但是当你在命 ...

  4. Linux下通过server-status监控性能

    Linux下通过server-status监控性能 前提:安装好Apache,在opt/路径下 查看Apache的工作模式 可以知道是 prefork.c模式 配置server-status 性能 进 ...

  5. Android Glide 源码分析系列(待完成)

    参考:https://jekton.github.io/2018/06/08/glide-disk-cache/ 参考:https://jekton.github.io/2018/06/20/glid ...

  6. why deep learning works

    https://medium.com/towards-data-science/deep-learning-for-object-detection-a-comprehensive-review-73 ...

  7. 【原创 深度学习与TensorFlow 动手实践系列 - 4】第四课:卷积神经网络 - 高级篇

    [原创 深度学习与TensorFlow 动手实践系列 - 4]第四课:卷积神经网络 - 高级篇 提纲: 1. AlexNet:现代神经网络起源 2. VGG:AlexNet增强版 3. GoogleN ...

  8. python多线程应用——DB2数据库备份

    前言:DB2一个实例下,可以存在多个数据库,之前使用shell备份脚本,但是同一时刻只能备份一个数据库,对于几百G的备份文件,这个速度显然太慢,今天学习了Python多线程,刚好应用一下. 分析:1. ...

  9. 从零开始搭建FAQ引擎--基于ES的字面匹配

    从零开始搭建FAQ引擎--基于ES的字面匹配

  10. halcon之NCC匹配

    NCC匹配 基于Normalized cross correlation(NCC)用来比较两幅图像的相似程度已经是一个常见的图像处理手段.在工业生产环节检测.监控领域对对象检测与识别均有应用.NCC算 ...