Witam, mam zrobione szachy, a raczej staram się je wykonać.Proszę jednak o pomoc w pokolorowaniu planszy tak, jak jest to w rzeczywistości w szachach. Proszę o użycie załączonego kodu.
Pozdrawiam.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{margin:0;padding:0;}
#board ul{height:40px;width:340px;position:relative;background-color:rgba(255,255,255,0.5);color:#222;font-size:14pt;margin:0;}
#board ul li{display:inline;float:left;position:relative;height:38px;width:38px;border:1px solid silver;}
.piece { cursor: move; margin-left: 10px; }
body { text-align: center; }
div { width: 500px; margin: 0 auto; text-align: left; }
</style>
</head>
<body>
<div id="board">
<ul class="row">
<li id="A8"><span class="piece">♜</span></li>
<li id="B8"><span class="piece">♞</span></li>
<li id="C8"><span class="piece">♝</span></li>
<li id="D8"><span class="piece">♛</span></li>
<li id="E8"><span class="piece">♚</span></li>
<li id="F8"><span class="piece">♝</span></li>
<li id="G8"><span class="piece">♞</span></li>
<li id="H8"><span class="piece">♜</span></li>
</ul>
<ul class="row">
<li id="A7"><span class="piece">♙</span></li>
<li id="B7"><span class="piece">♙</span></li>
<li id="C7"><span class="piece">♙</span></li>
<li id="D7"><span class="piece">♙</span></li>
<li id="E7"><span class="piece">♙</span></li>
<li id="F7"><span class="piece">♙</span></li>
<li id="G7"><span class="piece">♙</span></li>
<li id="H7"><span class="piece">♙</span></li>
</ul>
<ul class="row">
<li id="A6"></li>
<li id="B6"></li>
<li id="C6"></li>
<li id="D6"></li>
<li id="E6"></li>
<li id="F6"></li>
<li id="G6"></li>
<li id="H6"></li>
</ul>
<ul class="row">
<li id="A5"></li>
<li id="B5"></li>
<li id="C5"></li>
<li id="D5"></li>
<li id="E5"></li>
<li id="F5"></li>
<li id="G5"></li>
<li id="H5"></li>
</ul>
<ul class="row">
<li id="A4"></li>
<li id="B4"></li>
<li id="C4"></li>
<li id="D4"></li>
<li id="E4"></li>
<li id="F4"></li>
<li id="G4"></li>
<li id="H4"></li>
</ul>
<ul class="row">
<li id="A3"></li>
<li id="B3"></li>
<li id="C3"></li>
<li id="D3"></li>
<li id="E3"></li>
<li id="F3"></li>
<li id="G3"></li>
<li id="H3"></li>
</ul>
<ul class="row">
<li id="A2"><span class="piece">♙</span></li>
<li id="B2"><span class="piece">♙</span></li>
<li id="C2"><span class="piece">♙</span></li>
<li id="D2"><span class="piece">♙</span></li>
<li id="E2"><span class="piece">♙</span></li>
<li id="F2"><span class="piece">♙</span></li>
<li id="G2"><span class="piece">♙</span></li>
<li id="H2"><span class="piece">♙</span></li>
</ul>
<ul class="row">
<li id="A1"><span class="piece">♖</span></li>
<li id="B1"><span class="piece">♘</span></li>
<li id="C1"><span class="piece">♗</span></li>
<li id="D1"><span class="piece">♕</span></li>
<li id="E1"><span class="piece">♔</span></li>
<li id="F1"><span class="piece">♗</span></li>
<li id="G1"><span class="piece">♘</span></li>
<li id="H1"><span class="piece">♖</span></li>
</ul>
</div>
</body>
</html>
