Как сделать шахматную доску в html
БлогNot. Шахматная доска на HTML5
Шахматная доска на HTML5
Просто шаблончик, например, для простой главной страницы сайта, только разметка и стиль. Жалко удалять в свете того, что сегодня, наконец, точно закончится серия бесконечных ничьих у Каруаны с Карлсеном, подробней вот здесь.
Доска центрируется относительно своего родительского контейнера box , текст внутри полей доски, если его туда вписать, тоже будет центрироваться. Полям доски уже даны «правильные» id , то есть, a1 , b1 и т.д.
Ниже показано, как выглядит в браузере шахматная доска HTML5 и приводится листинг файла, который может быть сохранён в документ типа .html с кодировкой UTF-8:
шахматная доска HTML5 и CSS, скриншот
Chess Board HTML5 .box < text-align: center; background-color: #eeeeee; >.centered < display: inline-block; margin: 0; >.chess-board < border-spacing: 0; border-collapse: collapse; >.chess-board th < padding: .5em; >.chess-board td < border: 1px solid; width: 5em; height: 5em; text-align: center; vertical-align: middle; >.chess-board .white < background: #f0d9b5; >.chess-board .blacka b c d e f g h 8 7 6 5 4 3 2 1 Вот пример файла доски, где подписи столбцов перенесены вниз, а клетки заполнены.
Chess Board HTML5 .body < background-color: #eeeeee; >.box < text-align: center; >.centered < display: inline-block; margin: 0; >.chess-board < border-spacing: 0; border-collapse: collapse; >.chess-board th < padding: .5em; >.chess-board td < border: 1px solid; width: 5em; height: 5em; text-align: center; vertical-align: middle; >.chess-board .white < background: #f0d9b5; >.chess-board .black < background: #b58863; >a:link,a:active < text-decoration: none; color : #006699; >a:visited < text-decoration: none; color : #003399; >a:hover8 7 6 5 4 3 2 1 a b c d e f g h И, таки да, есть люди, по мнению которых это эф-фиктивней:
Chess Board HTML5 .body < background-color: #eeeeee; >.box < text-align: center; background-color: #eeeeee; >.centered < display: inline-block; margin: 0; >.chess-board < border-spacing: 0; border-collapse: collapse; >.chess-board tr td < border: 1px solid; width: 5em; height: 5em; text-align: center; vertical-align: middle; background: #b58863; >.chess-board tr:nth-child(odd) td:nth-child(even) < background: #f0d9b5; >.chess-board tr:nth-child(even) td:nth-child(odd)8 7 6 5 4 3 2 1 a b c d e f g h 28.11.2018, 14:36 [28022 просмотра]
Как сделать шахматную доску в html
Программирование на C++ в Unreal Engine 5
Данный курс научит Вас созданию игр на C++ в Unreal Engine 5. Курс состоит из 12 разделов, в которых Вас ждёт теория и практика. Причём, в качестве практики будет создан весьма крупный проект объёмом свыше 5000 строк качественного кода, который уже на практике познакомит Вас с принципами создания игр на C++ в Unreal Engine 5.
Параллельно с курсом Вы также будете получать домашние задания, результатом которых станет, в том числе, полноценная серьёзная работа для портфолио.
Помимо самого курса Вас ждёт ещё и очень ценный Бонус: «Тестирование Unreal-проектов на Python», в рамках которого Вы научитесь писать очень полезные тесты для тестирования самых разных аспектов разработки игр.
Уроки и статьи
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписаться
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Подписаться
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт Моя группа
Какая тема Вас интересует больше?
Бесплатный курс
Основы Unreal Engine 5
Пройдя курс:
— Вы получите необходимую базу по Unreal Engine 5
— Вы познакомитесь с множеством инструментов в движке
— Вы научитесь создавать несложные игры
Общая продолжительность курса 4 часа, плюс множество упражнений и поддержка!
Чтобы получить Видеокурс,
заполните формуБесплатный онлайн-семинар
5 шагов и профессиональный сайт готов
После семинара:
— Вы будете иметь чёткий план действий.
— Вы сможете начать создавать сайт.
— Вы сможете легко ориентироваться в информации по созданию сайтов.
Шахматное поле на CSS
Приемы как сделать шахматную сетку на псевдо-свойстве :nth-child() .
Табличная верстка
.chess tr:nth-child(odd) td:nth-child(odd) < background: orange; >.chess tr:nth-child(even) td:nth-child(even)Display table
Такой метод работает и на вёрстке блоками с display: table , table-row , table-cell .
.chess < display: table; >.chess-tr < display: table-row; >.chess-tr div < display: table-cell; >.chess .chess-tr:nth-child(odd) div:nth-child(odd) < background: Gold; >.chess .chess-tr:nth-child(even) div:nth-child(even)Верстка на плавающих блоках
C элементами с float: left или display: inline-block сложнее т.к. из CSS не узнать какой элемент начинается с новой строки.
.chess < width: 500px; margin: 0 auto; padding: 0; list-style: none; >.chess li < float: left; width: 19%; border: 1px solid #ddd; margin: -1px -1px 0 0; /* Уберем двойную рамку */ padding: 40px 0; text-align: center; >Если количество элементов по горизонтали нечетное, все просто – достаточно добавить фон только нечетным:
.chess li:nth-child(odd)С четным количеством задача усложняется, придется писать стили для каждого элемента по отдельности т.к. чередование меняется с каждой новой строкой.
.chess li:nth-child(1), .chess li:nth-child(3), .chess li:nth-child(6), .chess li:nth-child(8), .chess li:nth-child(9), .chess li:nth-child(11)/* 1-я строка - нечетные элементы с 1 по 4 */ .chess li:nth-child(-n+4):nth-child(odd) < background: SkyBlue; >/* 2-я строка - четные элементы с 5 по 8 */ .chess li:nth-child(n+5):nth-child(-n+8):nth-child(even) < background: SkyBlue; >/* 3-я строка - нечетные элементы с 9 по 12 */ .chess li:nth-child(n+9):nth-child(-n+12):nth-child(odd)Для очистки потока элементов с float: left поможет Clearfix.
Пример: список брендов
В жизни такая «шахматная доска» хорошо подходит для списка брендов:
Как сделать шахматную доску HTML?
Используя селекторы :first-child, :last-child, :nth-child(odd) и :nth-child(even) создайте шахматную доску в новом документе
Подскажите, как исправить?
Лучший ответ
Создаешь правило для чётный строк, нечётных строк, чётных столбцов, нечётных столбцов.
tr:nth-child(even) th:nth-child(even)Алексей ПотаповичУченик (94) 2 года назад
Столбцы будут перекрывать строки
Если есть возможность, напишите кодМаксим Искусственный Интеллект (189207) Алексей Потапович, в смысле перекрывать строки? Ты правило задаёшь: чётный столбец внутри чётной строки, чётный столбец внутри нечётной строки, нечётный столбец внутри чётной строки, .. Строкам ты стили не задаёшь.
Остальные ответы
Например, вот так: https://jsfiddle.net/czb4ehvw/
Саня СоловьевГуру (3047) 2 года назад
Можно ещё циклом на php шлифануть, чтобы поменьше кода было) .
