CSS (width,height,float) – szachownica

Klasy selektorów

CSS: float, width, height

  • float: left;
  • text-align: center;
  • line-height: 100px;
  • height: 100px;
  • width: 100px;
  • margin: auto;

Przykłady:

Budowa strony:

<html>
<head>
 <title>tabelka</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body><!--tutaj treść strony--></body>
</html>

Przykładowy div:

<div style="background-color: green; height: 200px; width: 200px;  float: left; line-height: 200px; text-align: center; color: #FFF; font-size: 50px;">srodek</div>

Tabelka w div (margin: auto; – wyśrodkowuje):

<div style="width: 600px; margin: auto">
 <div style="width: 200px; height: 500px; float: left; background-color: green;">
 lewa kolumna
 </div>
 <div style="width: 300px; height: 700px; float: left; background-color: blue;">
 środek
 </div>
 <div style="width: 100px; height: 400px; float: left; background-color: red;">
 prawa kolumna
 </div>
</div>

Wykorzystywanie klas:

<html>
<head>
 <title>tabelka</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style type="text/css">
 .czarne{
 width: 200px;
 height: 200px;
 line-height: 200px;
 text-align: center;
 font-size: 50px;
 float: left;
 color: green; 
 background-color: black; 
 }
 .biale{
 width: 200px;
 height: 200px;
 line-height: 200px;
 text-align: center;
 font-size: 50px;
 float: left;
 color: green; 
 background-color: white;
 }
 </style>
</head>
<body>
<div style="width: 600px; margin: auto">
 <div class="biale">a1</div>
 <div class="czarne">a2</div>
 <div class="biale">a3</div>
 <div class="czarne">b1</div>
 <div class="biale">b2</div>
 <div class="czarne">b3</div>
 <div class="biale">c1</div> 
 <div class="czarne">c2</div>
 <div class="biale">c3</div> 
</div>
</body>
</html>

Klasy:

.pole{
 width: 200px;
 height: 200px;
 line-height: 200px;
 text-align: center;
 font-size: 50px;
 float: left;
 color: green; 
 }
.biale{
background-color: white;
}
.czarne{
background-color: black;
}
<div class="pole biale">a1</div>
<div class="pole czarne">a2</div>

Zadanie:

Stwórz szachownice tak jak na obrazku niżej.

wrzuć to do katalogu szachownica:

http://twojlogin.8hp.pl/szachownica/index.html