html5九宫格,html5九宫格网页设计代码

谁知道九宫格的巧妙解法?

宫格只要不是2和6的都可以填出！！！

奇阶幻方

当n为奇数时，我们称幻方为奇阶幻方。可以用Merzirac法与loubere法实现，根据我的研究，发现用国际象棋之马步也可构造出更为神奇的奇幻方，故命名为horse法。

偶阶幻方

当n为偶数时，我们称幻方为偶阶幻方。当n可以被4整除时，我们称该偶阶幻方为双偶幻方；当n不可被4整除时，我们称该偶阶幻方为单偶幻方。可用了Hire法、Strachey以及YinMagic将其实现，Strachey为单偶模型，我对双偶（4m阶）进行了重新修改，制作了另一个可行的数学模型，称之为Spring。YinMagic是我于2002年设计的模型，他可以生成任意的偶阶幻方。

在填幻方前我们做如下约定：如填定数字超出幻方格范围，则把幻方看成是可以无限伸展的图形，如下图：

Merzirac法生成奇阶幻方

在第一行居中的方格内放1，依次向左上方填入2、3、4…，如果左上方已有数字，则向下移一格继续填写。如下图用Merziral法生成的5阶幻方：

17 24 1 8 15

23 5 7 14 16

4 6 13 20 22

10 12 19 21 3

11 18 25 2 9

loubere法生成奇阶幻方

在居中的方格向上一格内放1，依次向左上方填入2、3、4…，如果左上方已有数字，则向上移两格继续填写。如下图用Louberel法生成的7阶幻方：

30 39 48 1 10 19 28

38 47 7 9 18 27 29

46 6 8 17 26 35 37

5 14 16 25 34 36 45

13 15 24 33 42 44 4

21 23 32 41 43 3 12

22 31 40 49 2 11 20

horse法生成奇阶幻方

先在任意一格内放入1。向左走1步，并下走2步放入2(称为马步)，向左走1步，并下走2步放入3，依次类推放到n。在n的下方放入n+1（称为跳步），再按上述方法放置到2n，在2n的下边放入2n+1。如下图用Horse法生成的5阶幻方：

77 58 39 20 1 72 53 34 15

6 68 49 30 11 73 63 44 25

16 78 59 40 21 2 64 54 35

26 7 69 50 31 12 74 55 45

36 17 79 60 41 22 3 65 46

37 27 8 70 51 32 13 75 56

47 28 18 80 61 42 23 4 66

57 38 19 9 71 52 33 14 76

67 48 29 10 81 62 43 24 5

一般的，令矩阵[1,1]为向右走一步，向上走一步，[-1,0]为向左走一步。则马步可以表示为2X+Y，{X∈{[1,0], [-1,0]},Y∈{[0,1], [0,-1]}}∪{Y∈{[1,0], [-1,0]},X∈{[0,1], [0,-1]}}。对于2X+Y相应的跳步可以为2Y,-Y,X,-Y,X,3X,3X+3Y。上面的的是X型跳步。Horse法生成的幻方为魔鬼幻方。

Hire法生成偶阶幻方

将n阶幻方看作一个矩阵，记为A，其中的第i行j列方格内的数字记为a(i,j)。在A内两对角线上填写1、2、3、……、n，各行再填写1、2、3、……、n，使各行各列数字之和为n*(n+1)/2。填写方法为:第1行从n到1填写，从第2行到第n/2行按从1到进行填写(第2行第1列填n，第2行第n列填1)，从第n/2+1到第n行按n到1进行填写，对角线的方格内数字不变。如下所示为6阶填写方法：

1 5 4 3 2 6

6 2 3 4 5 1

1 2 3 4 5 6

6 5 3 4 2 1

6 2 4 3 5 1

1 5 4 3 2 6

如下所示为8阶填写方法（转置以后）：

1 8 1 1 8 8 8 1

7 2 2 2 7 7 2 7

6 3 3 3 6 3 6 6

5 4 4 4 4 5 5 5

4 5 5 5 5 4 4 4

3 6 6 6 3 6 3 3

2 7 7 7 2 2 7 2

8 1 8 8 1 1 1 8

将A上所有数字分别按如下算法计算，得到B，其中b(i,j)=n×（a(i,j)－1）。则AT＋B为目标幻方

（AT为A的转置矩阵）。如下图用Hire法生成的8阶幻方：

1 63 6 5 60 59 58 8

56 10 11 12 53 54 15 49

41 18 19 20 45 22 47 48

33 26 27 28 29 38 39 40

32 39 38 36 37 27 26 25

24 47 43 45 20 46 18 17

16 50 54 53 12 11 55 9

57 7 62 61 4 3 2 64

Strachey法生成单偶幻方

将n阶单偶幻方表示为4m+2阶幻方。将其等分为四分，成为如下图所示A、B、C、D四个2m+1阶奇数幻方。

A C

D B

A用1至2m+1填写成(2m+1)2阶幻方；B用(2m+1)2+1至2*(2m+1)2填写成2m+1阶幻方；C用2*(2m+1)2+1至3*(2m+1)2填写成2m+1阶幻方；D用3*(2m+1)2+1至4*(2m+1)2填写成2m+1阶幻方；在A中间一行取m个小格，其他行左侧边缘取m-1列，将其与D相应方格内交换；B与C接近右侧m-1列相互交换。如下图用Strachey法生成的6阶幻方：

35 1 6 26 19 24

3 32 7 21 23 25

31 9 2 22 27 20

8 28 33 17 10 15

30 5 34 12 14 16

4 36 29 13 18 11

Spring法生成以偶幻方

将n阶双偶幻方表示为4m阶幻方。将n阶幻方看作一个矩阵，记为A，其中的第i行j列方格内的数字记为a(i,j)。

先令a(i,j)=(i-1)*n+j，即第一行从左到可分别填写1、2、3、……、n；即第二行从左到可分别填写n+1、n+2、n+3、……、2n；…………之后进行对角交换。对角交换有两种方法：

方法一；将左上区域i+j为偶数的与幻方内以中心点为对称点的右下角对角数字进行交换；将右上区域i+j为奇数的与幻方内以中心点为对称点的左下角对角数字进行交换。（保证不同时为奇或偶即可。）

方法二；将幻方等分成m*m个4阶幻方，将各4阶幻方中对角线上的方格内数字与n阶幻方内以中心点为对称点的对角数字进行交换。

如下图用Spring法生成的4阶幻方：

16 2 3 13

5 11 10 8

9 7 6 12

4 14 15 1

YinMagic构造偶阶幻方

先构造n-2幻方，之后将其中的数字全部加上2n-2，放于n阶幻方中间，再用本方法将边缘数字填写完毕。本方法适用于n4的所有幻方，我于2002年12月31日构造的数学模型。YinMagic法可生成6阶以上的偶幻方。如下图用YinMagic法生成的6阶幻方：

10 1 34 33 5 28

29 23 22 11 18 8

30 12 17 24 21 7

2 26 19 14 15 35

31 13 16 25 20 6

9 36 3 4 32 27

魔鬼幻方

如将幻方看成是无限伸展的图形，则任何一个相邻的n*n方格内的数字都可以组成一个幻方。则称该幻方为魔鬼幻方。

用我研究的Horse法构造的幻方是魔鬼幻方。如下的幻方更是魔鬼幻方，因为对于任意四个在两行两列上的数字，他们的和都是34。此幻方可用YinMagic方法生成。

15 10 3 6

4 5 16 9

14 11 2 7

1 8 13 12

[img]

九宫格的算法

九宫格的计算公式或者口诀有很多种。比如：

1、二四为肩， 六八为足， 上九下一， 左七右三。

2、一居上行正中央，依次斜填切莫忘；上出框时向下放，右出框时向左放；排重便在下格填，右上排重一个样。

口诀不仅适用于九宫，也适用于推广的奇数九宫，如五五图，七七图等等。

扩展资料

九宫格游戏对人们的思维锻炼有着极大的作用，从古时起人们便意识到九宫的教育意义。千百年来影响巨大，在文学、影视中都曾出现过。九宫格最早叫“洛书”，现在也叫“幻方” 。

在《射雕英雄传》中黄蓉曾破解九宫格，口诀：戴九履一，左三右七，二四有肩，八六为足，五居中央。

还有口诀：“一居上行正中央，依次斜填切莫忘；上出框时向下放，右出框时向左放；排重便在下格填，右上排重一个样。” 这口诀不仅适用于九宫，也适用于推广的奇数九宫，如五五图，七七图等等。

参考资料来源：百度百科-九宫格

求九宫格html代码

!DOCTYPE html

html

head

meta charset="utf-8"

title全兼容的HTML九宫格布局/title

meta http-equiv="X-UA-Compatible" content="IE=edge"

/head

body

html

head

style type="text/css"

/** 重置浏览器默认标签样式 */

body,ul,li{margin:0;padding:0;}

.xttblog{

width: 1200px;

height: 170px;

margin-top:50px;

margin-left: auto;

margin-right: auto;

}

.box{margin-left: 5px;margin-top: 5px;list-style-type:none;}

.box:after{

content: ".";

display: block;

line-height: 0;

width:0;

height: 0;

clear: both;

visibility: hidden;

overflow: hidden;

}

.box li{float:left;line-height: 230px;}

.box li a,.box li a:visited{

display:block;

border: 5px solid #ccc;

width: 380px;

height: 230px;

text-align: center;

margin-left: -5px;

margin-top: -5px;

position: relative;

z-index: 1;

}

.box li a:hover{border-color: #f00;z-index: 2;}

/style

/head

body

div class="xttblog"

ul class="box"

lia href="#" title="1"img src="sh.jpg"//a/li

lia href="#" title="2"img src="bd.jpg"//a/li

lia href="#" title="3"img src="tb.jpg"//a/li

lia href="#" title="4"img src="fh.jpg"//a/li

lia href="#" title="5"img src="tb.jpg"//a/li

lia href="#" title="6"img src="tb.jpg"//a/li

lia href="#" title="7"img src="tb.jpg"//a/li

lia href="#" title="8"img src="tb.jpg"//a/li

lia href="#" title="9"img src="tb.jpg"//a/li

/ul

/div

/body

/html

源码，有些不一样，自己改下，html+css不懂得话，得自学下，这个是很简单的了，可以看下php中文网的一些课程，我自己也是自学的，网楼主采纳！

html中怎么给九宫格添加边框

写CSS3选择器，设置td的边框样式即可。

例如：

.sudoku tr:nth-child(3) td, .sudoku tr:nth-child(6) td {

border-bottom: solid black 1px;

}

可以设置下边框线颜色大小

.sudoku tr td:nth-child(3), .sudoku tr td:nth-child(6) {

border-right: solid black1px;

}

可以设置右边框线颜色大小

九宫格规则是什么？

有两种规则玩法：

第一种是在在3×3方格盘上，是把1至8八个小木块随意摆放，每一空格其周围的数字可移至空格。玩者要将小木块按12345678的顺序重新排好，以最少的移动次数拼出结果者为胜。

第二种玩法如九宫格算术游戏玩法，推动木格中8个数字排列，横竖都有3个格，使每行、每列两个对角线上的三数之和都等于15。在计算的同时，还必须思考怎么把数字方块推动到相对应的位置上，这个游戏不仅仅考验人的数字推理能力，也同时考验了人的思维逻辑能力。

演变过程

河图上，排列成数阵的黑点和白点，蕴藏着无穷的奥秘；洛书上的图案正好对应着从1到9九个数字，并且无论是纵向、横向、斜向、三条线上的三个数字其和皆等于15；

当时人们并不知道，这就是现代数学中的三阶幻方，他们把这个神秘的数字排列称为九宫图。对此，中外学者作了长期的探索研究，认为这是中国先民心灵思维的结晶，是中国古代文明的第一个里程碑。