棋盘-仅限HTML（5）
我是HTML新手，我参加了这个练习，在那里我只能用HTML制作棋盘。我在谷歌上搜索了很多，发现了很多使用Canvas和CSS的解决方案，但我想用HTML来完成，然后写下行和列的名称（在边上）。 你能给我一些建议怎么做吗棋盘-仅限HTML（5）,html,chess,Html,Chess,我是HTML新手，我参加了这个练习，在那里我只能用HTML制作棋盘。我在谷歌上搜索了很多，发现了很多使用Canvas和CSS的解决方案，但我想用HTML来完成，然后写下行和列的名称（在边上）。 你能给我一些建议怎么做吗 谢谢 您可以用81个方形div填充一个div，所有div都向左浮动 查看jsfiddle CSS: Html: <div class="board"> <div class="tile"></div> <div class
谢谢 您可以用81个方形div填充一个div，所有div都向左浮动 查看jsfiddle CSS: 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>
<!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>
.chess board{边框间距：0；边框折叠：折叠；}
.chess board th{padding:.5em；}
.chess board td{边框：1px实心；宽度：2米；高度：2米；}
.chess board.light{背景：#eee；}
.chess board.深色{背景：#000；}
A.
B
C
D
E
F
G
H
8.
7.
6.
5.
4.
3.
2.
1.
<!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 th + th { border-bottom: 1px solid #000; }
.chess-board th:first-child,
.chess-board td:last-child { border-right: 1px solid #000; }
.chess-board tr:last-child td { border-bottom: 1px solid; }
.chess-board th:empty { border: none; }
.chess-board td { width: 1.5em; height: 1.5em; text-align: center; font-size: 32px; line-height: 0;}
.chess-board .light { background: #eee; }
.chess-board .dark { background: #aaa; }
</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>
.chess board{边框间距：0；边框折叠：折叠；}
.chess board th{padding:.5em；}
.棋盘th+th{边框底部：1px实心#000；}
.棋盘第十名：第一个孩子，
.chess board td:最后一个孩子{右边框：1px实心#000；}
.chess board tr:最后一个子td{边框底部：1px实心；}
.棋盘th:空{边框：无；}
.chess board td{宽度：1.5em；高度：1.5em；文本对齐：中心；字体大小：32px；线条高度：0；}
.chess board.light{背景：#eee；}
.chess board.深色{背景：#aaa；}
A.
B
C
D
E
F
G
H
8.
♜
♞
♝
♛
♚
♝
♞
♜
7.
♟
♟
♟
♟
♟
♟
♟
♟
6.
5.
4.
3.
2.
♙
♙
♙
♙
♙
♙
♙
♙
1.
♖
♘
♗
♕
<!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 th + th { border-bottom: 1px solid #000; }
.chess-board th:first-child,
.chess-board td:last-child { border-right: 1px solid #000; }
.chess-board tr:last-child td { border-bottom: 1px solid; }
.chess-board th:empty { border: none; }
.chess-board td { width: 1.5em; height: 1.5em; text-align: center; font-size: 32px; line-height: 0;}
.chess-board .light { background: #eee; }
.chess-board .dark { background: #aaa; }
</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>
<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>
<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>
.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; }