Зробити таблицю 3х3 з фіксованою шириною і висотою комірок. При натисканні на будь-якій комірці в ній виводиться зображення коня як показано на малюнку. Повторне клацання по комірці прибирає в ній коня. Код повинен працювати у всіх сучасних браузерах.
Символ коня можна скопіювати звідси: ♘
Результат:
файл *.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример страницы</title>
</head>
<body>
<div id="tablitsya">
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
<div id="tab4"></div>
<div id="tab5"></div>
<div id="tab6"></div>
<div id="tab7"></div>
<div id="tab8"></div>
<div id="tab9"></div>
</div>
</body>
</html>
файл *.css
/*початок сітки 3 на 3 tablitsya*/
#tablitsya {
outline: 1px solid #000000;
width: 300px;
height: 300px;
}
#tab1 {
outline: 1px solid #000000;
width: 100px;
height: 100px;
}
#tab2 {
outline: 1px solid #000000;
width: 100px;
height: 100px;
left: 100px;
position: relative;
}
#tab3 {
outline: 1px solid #000000;
width: 100px;
height: 100px;
}
#tab4 {
outline: 1px solid #000000;
width: 100px;
height: 100px;
}
/*кінець сітки 3 на 3 tablitsya*/
Результат:
файл *.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример страницы</title>
</head>
<body>
<div id="tablitsya">
<div id="tab1"></div>
<div id="tab2"></div>
<div id="tab3"></div>
<div id="tab4"></div>
<div id="tab5"></div>
<div id="tab6"></div>
<div id="tab7"></div>
<div id="tab8"></div>
<div id="tab9"></div>
</div>
</body>
</html>
файл *.css
/*початок сітки 3 на 3 tablitsya*/
#tablitsya {
outline: 1px solid #000000;
width: 300px;
height: 300px;
}
#tab1 {
outline: 1px solid #000000;
width: 100px;
height: 100px;
}
#tab2 {
outline: 1px solid #000000;
width: 100px;
height: 100px;
left: 100px;
position: relative;
}
#tab3 {
outline: 1px solid #000000;
width: 100px;
height: 100px;
}
#tab4 {
outline: 1px solid #000000;
width: 100px;
height: 100px;
}
/*кінець сітки 3 на 3 tablitsya*/
Немає коментарів:
Дописати коментар