棋盘 - 仅限HTML(5)

时间:2014-10-17 19:52:28

标签: html html5 chess

我是HTML新手,我参加了练习,我只能用HTML制作棋盘。我在谷歌搜索了很多,我找到了很多Canvas和CSS的解决方案,但是我想用HTML做,然后写出行和列的名称(在两侧)。 你能给我一些建议怎么做吗?

谢谢!

4 个答案:

答案 0 :(得分:2)

使用表格元素。

每个方块用td元素表示。每个行和列元素都用th表示。

在示例中,我还添加了CSS来设置棋盘的样式。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <style>
            .chess-board { border-spacing: 0; border-collapse: collapse; }
            .chess-board th { padding: .5em; }
            .chess-board td { border: 1px solid; width: 2em; height: 2em; }
            .chess-board .light { background: #eee; }
            .chess-board .dark { background: #000; }
        </style>
    </head>
    <body>
        <table class="chess-board">
            <tbody>
                <tr>
                    <th></th>
                    <th>a</th>
                    <th>b</th>
                    <th>c</th>
                    <th>d</th>
                    <th>e</th>
                    <th>f</th>
                    <th>g</th>
                    <th>h</th>
                </tr>
                <tr>
                    <th>8</th>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                </tr>
                <tr>
                    <th>7</th>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                </tr>
                <tr>
                    <th>6</th>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                </tr>
                <tr>
                    <th>5</th>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                </tr>
                <tr>
                    <th>4</th>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                </tr>
                <tr>
                    <th>3</th>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                </tr>
                <tr>
                    <th>2</th>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                </tr>
                <tr>
                    <th>1</th>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                    <td class="dark"></td>
                    <td class="light"></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

enter image description here

答案 1 :(得分:1)

这个怎么样:

<html>
<body>
    <table>
        <tbody>
            <tr>
                <td></td>
                <td>a</td>
                <td>b</td>
                <td>c</td>
                <td>d</td>
                <td>e</td>
                <td>f</td>
                <td>g</td>
                <td>h</td>
                <td></td>
            </tr>
            <tr>
                <td>8</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>8</td>
            </tr>
            <tr>
                <td>7</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>7</td>
            </tr>
            <tr>
                <td>6</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>6</td>
            </tr>
            <tr>
                <td>5</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>5</td>
            </tr>
            <tr>
                <td>4</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>4</td>
            </tr>
            <tr>
                <td>3</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>3</td>
            </tr>
            <tr>
                <td>2</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>2</td>
            </tr>
            <tr>
                <td>1</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>&#9632;</td>
                <td>&#9633;</td>
                <td>1</td>
            </tr>
            <tr>
                <td></td>
                <td>a</td>
                <td>b</td>
                <td>c</td>
                <td>d</td>
                <td>e</td>
                <td>f</td>
                <td>g</td>
                <td>h</td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

结果:

                                                            一个                 b                 C                 d                 Ë                 F                 G                 H                              
                             8                 □                 ■                 □                 ■                 □                 ■                 □                 ■                 8             
                             7                 ■                 □                 ■                 □                 ■                 □                 ■                 □                 7             
                             6                 □                 ■                 □                 ■                 □                 ■                 □                 ■                 6             
                             五                 ■                 □                 ■                 □                 ■                 □                 ■                 □                 五             
                             4                 □                 ■                 □                 ■                 □                 ■                 □                 ■                 4             
                             3                 ■                 □                 ■                 □                 ■                 □                 ■                 □                 3             
                             2                 □                 ■                 □                 ■                 □                 ■                 □                 ■                 2             
                             1                 ■                 □                 ■                 □                 ■                 □                 ■                 □                 1             
                                              一个                 b                 C                 d                 Ë                 F                 G                 H                                            

答案 2 :(得分:0)

你可以用81平方div填充一个div,所有div都向左浮动。

查看jsfiddle here

CSS:

.board{
    border: 10px solid red;
    width: 450px;
    height: 450px;
}
.tile{
    float: left;
    width: 50px;
    height: 50px;
    background-color: #eee;
}
.tile:nth-child(even){
    background-color: black;
}

Html:

<div class="board">
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <!-- and so on... -->  


</div>

答案 3 :(得分:0)

你可以试试这个:

<div class="chessboard">
    <div>
        <div></div><div>a</div><div>b</div><div>c</div><div>d</div><div>e</div><div>f</div><div>g</div><div>h</div>
    </div>
    <div>
        <div>8</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    <div>
        <div>7</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    <div>
        <div>6</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    <div>
        <div>5</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    <div>
        <div>4</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    <div>
        <div>3</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    <div>
        <div>2</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    <div>
        <div>1</div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
</div>

css样式:

.chessboard{
 width: 450px; height:450px;
  border-style:solid; 
 font-size:20px; line-height:2.5; 
 text-align:center;}

.chessboard>div{height:11.11%;}

.chessboard>div>div{
 width:11.11%; height:100%;
 display:inline-block; vertical-align:top;}

.chessboard>div:nth-child(odd)>div:nth-child(even),
.chessboard>div:nth-child(even)>div:nth-child(odd)
 {background-color:black; color:white;}

.chessboard>div:nth-child(1),.chessboard>div>div:nth-child(1)
 {background-color:black; color:white; }