我是HTML新手,我参加了练习,我只能用HTML制作棋盘。我在谷歌搜索了很多,我找到了很多Canvas和CSS的解决方案,但是我想用HTML做,然后写出行和列的名称(在两侧)。 你能给我一些建议怎么做吗?
谢谢!
答案 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>
答案 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>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>8</td>
</tr>
<tr>
<td>7</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>7</td>
</tr>
<tr>
<td>6</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>6</td>
</tr>
<tr>
<td>5</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</td>
<td>■</td>
<td>□</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; }