Двойная рамка

Живая практика по HTML и CSS

Выбрать другой урок из курса

Как выполнять практику

Обсуждение

пример codebra

ваш результат

Пример codebra

Ваш результат

HTML

CSS

Вернуть расположение блоков

Код HTML

Восстановить HTML код

Код CSS

Восстановить CSS код

Задание

Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков), вам нужно авторизоваться

Сделайте рамку вокруг блока, как показано в "Пример Codebra". Рамка должна корректно отображаться во всех современных браузерах.

Ваш результат похож на пример?
Если да, то нажмите кнопку «Выполнено?» и переходите к следующему уроку!

– Практика отлично работает в браузерах Chrome, Opera и Yandex.Browser. В браузерах Mozilla и IE практика не работает!

– Не знаете как сделать? Нажмите на кнопку Обсуждение и задайте вопрос!

– Возможно, вам это будет интересно: Значки для листания фотографий

– Возможно, вам это будет интересно: Ширина таблицы

Проверить задание

Сходство на 0%

Практика отлично работает в браузерах Chrome, Opera и Yandex.Browser. В браузерах Mozilla и IE практика работает либо частично, либо вообще не работает!

1. Как выполнять живую практику на сайте codebra.ru?

Хорошо продумайте вашу последовательность действий
Пишите код
Чтобы сравнить ваш результат с тем, что должно получиться, быстро нажимайте по очереди на вкладки «пример codebra» и «ваш результат», так вы сможете найти различия

2. Какие инструменты помогут вам выполнить практику?

Чтобы быстро и легко выполнять практику, вам возможно понадобятся следующие расширения для браузера.

Расширение для определения цвета (для Chrome, Yandex Browser) - ColorPick Eyedropper
Расширение для определения размера (линейка) (для Chrome, Yandex Browser) - MeasureIt
Так же рекомендую прочитать здесь о других полезных расширениях

Курс «Практика с htmlbook.ru»

☓

Урок 1.1. TEX

☓

Урок 2.1. Андроид в кружке

☓

Урок 3.1. Вложенные списки

Урок 6.1. Многочлен степени n

☓

Урок 7.1. Объединение ячеек

☓

Урок 8.1. Отступы между блоков

☓

Урок 9.1. Поле для ввода чисел

☓

Урок 10.1. Поле для поиска

☓

Урок 11.1. Работа с абзацами

☓

Урок 12.1. Разноцветные ссылки

☓

Урок 13.1. Рисованная рамка

☓

Урок 14.1. Создание веб-страницы

☓

Урок 15.1. Создание ссылок

☓

Урок 16.1. Создание таблицы

☓

Урок 17.1. Стиль для печати

☓

Урок 18.1. Стихотворение

☓

Урок 19.1. Флаг Японии

☓

Урок 20.1. Цвет и фон в таблице

☓

Урок 21.1. Цвет фона и текста документа

☓

Урок 22.1. Чередующиеся квадраты

☓

Урок 23.1. Ширина таблицы

☓

Урок 24.1. Батарейка

☓

Урок 25.1. Вырезанные уголки

☓

Урок 26.1. Гламурная кнопка

☓

Урок 27.1. Градиентные кнопки в Safari

☓

Урок 28.1. Граница вокруг формы

☓

Урок 30.1. Значки для листания фотографий

☓

Урок 31.1. Индикатор прогресса

☓

Урок 32.1. Квадратный корень

☓

Урок 33.1. Квадраты

☓

Урок 34.1. Круговая диаграмма

☓

Урок 35.1. Наложение слоев

☓

Урок 36.1. Нумерация

☓

Урок 37.1. Нумерация страниц

☓

Урок 38.1. Обязательные поля формы

☓

Урок 39.1. Отступ под изображением

☓

Урок 40.1. Поле для игры в гомоку

☓

Урок 41.1. Последняя линия справа

☓

Урок 42.1. Прогноз погоды

☓

Урок 43.1. Рамка с поворотом

Другие курсы

≡

Курс 1. Знакомство с HTML

≡

Курс 2. Разметка текста

Курс 9. Знакомство с CSS

≡

Курс 10. Селекторы в CSS

≡

Курс 11. Структура и каскад

≡

Курс 12. Единицы измерения

≡

Курс 13. Шрифт

≡

Курс 14. Свойства текста

≡

Курс 15. Форматирование

≡

Курс 16. Отступы, рамки, поля

≡

Курс 17. Цвета и фон

≡

Курс 18. Позиционирование

≡

Курс 19. Верстка таблиц

Курс 23. Элементы сайта

Не публикуйте свой код прямо в комментариях. Во-первых, он плохо отображается. Во-вторых, он может содержать для кого-то «спойлеры», т.е. ответы на практику. Воспользуйтесь специальными сервисами: cssdeck.com или jsfiddle.net.
Комментарии, содержащие код (пару строк не считается), будут безжалостно удаляться.