“So verwenden Sie HTML und CSS, um eine Schachbrett zu entwerfen” Code-Antworten

So verwenden Sie HTML und CSS, um eine Schachbrett zu entwerfen

<html>
<head>
<meta charset="UTF-8"> 
<title>Chessboard using Pure CSS and HTML</title>
<link rel="stylesheet" href="chess.css" type="text/css">
</head>
<body>
<div class="chessboard">
<!-- 1st -->
<div class="white">&#9820;</div>
<div class="black">&#9822;</div>
<div class="white">&#9821;</div>
<div class="black">&#9819;</div>
<div class="white">&#9818;</div>
<div class="black">&#9821;</div>
<div class="white">&#9822;</div>
<div class="black">&#9820;</div>
<!-- 2nd -->
<div class="black">&#9821;</div>
<div class="white">&#9821;</div>
<div class="black">&#9821;</div>
<div class="white">&#9821;</div>
<div class="black">&#9821;</div>
<div class="white">&#9821;</div>
<div class="black">&#9821;</div>
<div class="white">&#9821;</div>
<!-- 3th -->
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<!-- 4st -->
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<!-- 5th -->
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<!-- 6th -->
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<div class="black"></div>
<div class="white"></div>
<!-- 7th -->
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<div class="white">&#9817;</div>
<div class="black">&#9817;</div>
<!-- 8th -->
<div class="black">&#9814;</div>
<div class="white">&#9816;</div>
<div class="black">&#9815;</div>
<div class="white">&#9813;</div>
<div class="black">&#9812;</div>
<div class="white">&#9815;</div>
<div class="black">&#9816;</div>
<div class="white">&#9814;</div>
</div>
</body>
</html>
Sonola Moyosoluwalorun Odunayo

So verwenden Sie HTML und CSS, um eine Schachbrett zu entwerfen

body {
    background: #e8e7de;
    font-family: 'Montserrat', sans-serif;
  }
  .chessboard {
      width: 640px;
      height: 640px;
      margin: 20px;
      border: 10px solid #000;
      border-radius: 4px;
  background: #e59110;
  box-shadow:  5px 5px 8px #bebdb6,
               -5px -5px 8px #ffffff;
  }
  .black {
      float: left;
      width: 80px;
      height: 80px;
      background-color: #e59110;
        font-size:50px;
      text-align:center;
      display: table-cell;
      vertical-align:middle;
  }
  .white {
      float: left;
      width: 80px;
      height: 80px;
      background-color: #ffcfb6;
      font-size:50px;
      text-align:center;
      display: table-cell;
      vertical-align:middle;
  }
Sonola Moyosoluwalorun Odunayo

Ähnliche Antworten wie “So verwenden Sie HTML und CSS, um eine Schachbrett zu entwerfen”

Fragen ähnlich wie “So verwenden Sie HTML und CSS, um eine Schachbrett zu entwerfen”

Weitere verwandte Antworten zu “So verwenden Sie HTML und CSS, um eine Schachbrett zu entwerfen” auf CSS

Durchsuchen Sie beliebte Code-Antworten nach Sprache