求九宫格html代码

html-css04

求九宫格html代码,第1张

<!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:0padding:0} .xttblog{width: 1200px height: 170px margin-top:50px margin-left: auto margin-right: auto } .box{margin-left: 5pxmargin-top: 5pxlist-style-type:none} .box:after{content: "." display: block line-height: 0 width:0 height: 0 clear: both visibility: hidden overflow: hidden } .box li{float:leftline-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: #f00z-index: 2} </style> </head> <body> <div class="xttblog"> <ul class="box"> <li><a href="#" title="1"><img src="sh.jpg"/></a></li> <li><a href="#" title="2"><img src="bd.jpg"/></a></li> <li><a href="#" title="3"><img src="tb.jpg"/></a></li> <li><a href="#" title="4"><img src="fh.jpg"/></a></li> <li><a href="#" title="5"><img src="tb.jpg"/></a></li> <li><a href="#" title="6"><img src="tb.jpg"/></a></li> <li><a href="#" title="7"><img src="tb.jpg"/></a></li> <li><a href="#" title="8"><img src="tb.jpg"/></a></li> <li><a href="#" title="9"><img src="tb.jpg"/></a></li> </ul> </div> </body> </html> 源码,有些不一样,自己改下,html+css不懂得话,得自学下,这个是很简单的了,可以看下php中文网的一些课程,我自己也是自学的,网楼主采纳!

<!DOCTYPE <html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" /> 

<title>无标题</title>

<style type="text/css">

td {

height:30px

width:30px

border: solid 1px

}

table {

border:solid 1px

}

</style>

</head>

<body>

<table>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

</body>

</html>

这样子很萌有没有- -

【奇阶幻方】

一、Merzirac法生成奇阶幻方:

【1 居上行正中央,依次斜填切莫忘,上出框界往下写,右出框时左边放,重复便在下格填,出角重复一个样。】

即在第一行居中的方格内放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

3阶幻方又叫九宫格,中国古代九宫格的填法口诀是:

【九宫之义,法以灵龟,二四为肩,六八为足,左三右七,戴九履一,五居中央。】

4 9 2

3 5 7

8 1 6

或,

2 9 4

7 5 3

6 1 8

二、loubere法生成奇阶幻方:

【1 居中央上方格,依次斜填切莫忘,上出框界往下写,右出框时左边放,重复上移两格填,出角重复一个样。】

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

23  6  19   2   15

10 18  1   14  22

17  5   13  21  9

4   12   25  8   16

11  24   7  20   3

【偶阶幻方】

  当n为偶数时,我们称幻方为偶阶幻方。当n可以被4整除时,我们称该偶阶幻方为双偶幻方,如4阶、8阶、12阶、16阶等;当n不可被4整除时,我们称该偶阶幻方为单偶幻方,如6阶、10阶、14阶等。

一、Spring法生成双偶幻方:

【顺序填数,以中心点对称互换数字。】

4阶幻方是最简单的双偶幻方,其方法:

第一步,顺序填数,先把1放在4阶幻方4个角的任意一个角格,按同一个方向按顺序依次填写其余数。如下所示:

1   2   3   4

5   6   7   8

9   10 11 12

13 14 15 16

第二步,以中心点对称互换数字。(有两种对称交换的方法)

方法一:以中心点对称交换对角线上的数(即1-16、4-13、6-11、7-10互换),完成幻方,幻和值34。

16  2   3   13

5   11  10  8

9    7    6  12

4   14  15  1

方法二:以中心点对称交换非对角线上的数(即2-15、3-14、5-12、8-9互换),完成幻方,幻和值34。

1   15  14  4

12  6    7   9

8   10  11  5

13  3    2   16

二、用Strachey法生成单偶幻方:

【四分天下,化偶为奇,强弱互换,势均力敌】

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

A C

D B

如,6阶单偶幻方表示为(4*1+2)阶幻方,那么m就是1。A、B、C、D四个就是2m+1阶(3阶)奇数幻方。

A C

D B

用奇阶幻方的Merzirac法完成的A、B、C、D四个3阶幻方。A用1至9填写成3阶幻方;B用10至18填写成3阶幻方;C用19至27填写成3阶幻方;D用27至36填写成3阶幻方。

8   1   6   26 19 24

3   5   7   21 23 25

4   9   2   22 27 20

35 28 33 17 10 15

30 32 34 12 14 16

31 36 29 13 18 11

第二步,在A每行取m个小格(中心格及一侧对角线格为必换格,其余m-1格只要不是另一侧对角线格即可),简单地说,就是说在A中间一行取包括中心格在内的m个小格,其他行左侧边缘取m个小格,将其与D相应方格内交换;B与C在最右侧取m-1列相互交换。

6阶幻方就是4*1+2,那么m就是1。在A中间一行取中心格1个小格,其他行左侧边缘取1个小格,将其与D相应方格内交换;即可完成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

每一行,每一列,对角线的和值(称为幻和值)为111。

单偶幻方的方法比较麻烦,详情请参阅我的回答:

http://zhidao.baidu.com/question/309617635.html?oldq=1

http://zhidao.baidu.com/question/374489504.html?oldq=1

http://zhidao.baidu.com/question/418933531.html?oldq=1&nbsp

问题补充:

9阶幻方

1、Merzirac法生成的9阶幻方:

2、loubere法生成的9阶幻方:

3、跳马法生成的9阶幻方:

若把1放在(1,5)、(4,8)、(7,2)红色格,向左走1步,下走2步以跳马步,如果落步格已有数字,向下移一格继续填写,完成幻方。

若把1放在其余格,用此法填写,则两条对角线数字和不等于369。

4、集团方阵法生成的9阶幻方: