想要在页面布局以上棋盘,可以用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. .net core使用数据库

    .net core使用数据库 .net core 通过可以通过ef core或其它ORM框架进行数据访问.此处使用EF和Dapper作为示例. 使用EF Core访问数据库 与 .NET Framew ...

  2. Linux出现Read-only file system错误的解决方法

    造成这个问题的解决办法大多数是由于非正常关机后导致文件系统受损引起的,在系统重新启动之后,受损分区就会被Linux自己主动挂载为仅仅读.解决办法是通过fsck来修复文件系统,然后重新启动就可以,下面是 ...

  3. EasyMock 简单使用

    参考案例:(本位使用markdown编写)https://www.ibm.com/developerworks/cn/opensource/os-cn-easymock/https://www.yii ...

  4. Android_编程开发规范

     Android编程开发规范         原文地址 http://www.jianshu.com/p/9b8aeca9b281 一.约定 Activity.onCreate(),Fragment. ...

  5. 分布式架构探索 - 1. RPC框架之Java原生RMI

    1. 什么是RPC RPC(Remote Procedure Call)即远程过程调用,指的是不同机器间系统方法的调用,这和 同机器动态链接库(DLL)有点类似,只不过RPC是不同机器,通过网络通信来 ...

  6. iOS ReplayKit实时录制屏幕实现方案的细节记录

    项目有个需求,需要把ios设备上的操作画面实时传输出去,也就是类似推流手机直播画面的方案. 一番调研后发现在ios中,我们可以通过ios自带ReplayKit框架实现. 关于ReplayKit的讲解, ...

  7. 雅克比迭代算法(Jacobi Iterative Methods) -- [ mpi , c++]

    雅克比迭代,一般用来对线性方程组,进行求解.形如: \(a_{11}*x_{1} + a_{12}*x_{2} + a_{13}*x_{3} = b_{1}\) \(a_{21}*x_{1} + a_ ...

  8. Django Http请求生命周期

    day54 请求响应Http 1.发送Http请求 2.服务器接收,根据请求头中的的url在路由关系表中进行匹配(从上到下) 3.匹配成功后,执行指定的views函数 4.业务处理 URL----&g ...

  9. 【原创 Hadoop&Spark 动手实践 13】Spark综合案例:简易电影推荐系统

    [原创 Hadoop&Spark 动手实践 13]Spark综合案例:简易电影推荐系统

  10. GCC:/usr/lib/libstdc++.so.6: version GLIBCXX_3.4.15 not found

    源码编译升级安装了gcc后,编译程序或运行其它程序时,有时会出现类似/usr/lib64/libstdc++.so.6: version `GLIBCXX_3.4.15' not found的问题.这 ...