想要在页面布局以上棋盘,可以用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. C# Monitor实现

    Monitor的code如下,非常简单: public static class Monitor { public static extern void Enter(Object obj); publ ...

  2. Spring Core Programming(Spring核心编程) - AOP Concepts(AOP基本概念)

    1. What is aspect-oriented programming?(什么是面向切面编程?) Aspects help to modularize cross-cutting concern ...

  3. 【C++】C++中的函数

    目录结构: contents structure [-] 简介 可变形参的函数 initializer_list形参 省略符形参 main函数处理命令行选项 函数指针与函数引用 inline内联函数 ...

  4. [转]Docker中的镜像

    引言 这篇文章中我们主要来探讨下Docker镜像,它是用来启动容器的构建基石,本文的所用到的Dcoker版本是17.1,API版本是1.33,Go的版本是1.9.2,OS是基于Arch Linux的M ...

  5. ip代理优化

    如何保证可用ip不低于2000个,代理ip池优化策略 第一:获得大量ip: 第二:验证可用ip: 第三:监控可用ip: 第三:保证可用ip不低于3000或者5000: 截图是实时可用ip数量 心得:不 ...

  6. Java Socket 通信实例 - 转载

    基于Tcp协议的简单Socket通信实例(JAVA)   好久没写博客了,前段时间忙于做项目,耽误了些时间,今天开始继续写起~ 今天来讲下关于Socket通信的简单应用,关于什么是Socket以及一些 ...

  7. Android 开发笔记

    11.android使用全局变量 定义Data类继承Application 在manifest.xml中声明 http://blog.csdn.net/feiyangxiaomi/article/de ...

  8. Gorm使用详解

    1.什么是Gorm go语言编写的orm框架 特点: 1)全功能ORM 2)关联(包含一个,包含多个,属于,多对多) 3)Callbacks(创建/保存/更新/删除/查找前后回调) 4)预加载 5)事 ...

  9. java 查看SOAP请求报文

    log.info("ESB 请求URL = " + cachedEndpoint.toString());//打印SOAP请求报文 add by LinJC on 20170120 ...

  10. JQuery DataTables Selected Row

    获取单行选中的值 $('#MonitoringTypeTable tbody').on('click', 'tr', function () { if ($(this).hasClass('selec ...