想要在页面布局以上棋盘,可以用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的Databinding-资源绑定

    databinding还能对布局的资源文件进行绑定. <data class="ResourceBinding"> <variable name="la ...

  2. flink 有状态udf 引起血案一

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/rlnLo2pNEfx9c/article/details/83422587 场景 近期在做一个画像的 ...

  3. Activity class {com.../com....MainActivity} does not exist.

    报错信息如上图所示,解决步骤: 1. 首先是检查这个MainActivity.java是不是真的存在,且包名和路径无误: 2. 如果文件存在,且包名和路径没有问题,那么就打开你项目所在的/androi ...

  4. Nginx 反向代理504 Gateway Time-out

    location /ssfwpt { proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_ ...

  5. intellj idea 跑覆盖率

  6. unbuntu系统( PC机 )中安装360wifi步骤

    少说废话,每一步都经过验证: 1.  首先查看一下当前使用的linux版本: gxjun@gxjun:~$ uname -r 4.8.0-59-generic 2. 将360wifi插入PC的USB中 ...

  7. HDU2082母函数模板题

    找单词 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submis ...

  8. 星云STS 常用配置

    STS4  下载地址:https://spring.io/tools    (这个版本没有tomcat插件) STS3  下载地址:https://spring.io/tools3/sts/all ( ...

  9. 【原创 Hadoop&Spark 动手实践 6】Spark 编程实例与案例演示

     [原创 Hadoop&Spark 动手实践 6]Spark 编程实例与案例演示 Spark 编程实例和简易电影分析系统的编写 目标: 1. 掌握理论:了解Spark编程的理论基础 2. 搭建 ...

  10. curl模拟访问已经存在的cookie

    curl 'http://i.meituan.com/brunch/order?status=2' -H 'Pragma: no-cache' -H 'Accept-Encoding: gzip, d ...