Финский флаг в HTML
Поэтому, если я нигде не просчитался, получается так:
html, body < height: 100%; margin: 0; >html < background: linear-gradient(135deg, antiquewhite, silver); padding: 1em 32%; box-sizing: border-box; >div:before < content: ""; display: block; padding-top: 61.111%; >div
Отслеживать
ответ дан 3 сен 2018 в 17:53
123k 24 24 золотых знака 126 126 серебряных знаков 303 303 бронзовых знака
мне нужно было именно таблицами )) пока чтот не понимаю, текст ваш вставляяу в редактор и не получается
3 сен 2018 в 18:04
@alex, про таблицы в вопросе не сказано. Переделай селектор с div’а на какой-нибудь класс (и не забудь его на div поставить). Не может не получаться, потому что тут всё работает — сам же видишь в сниппете. И обрати внимание, что перед white нет запятой.
3 сен 2018 в 18:05
ладно парни не запаривайтесь я просто туплю ))) начинающий, про таблицы забыл сказать извените (( ещё раз большое вам спасибо
Британский флаг
Попробуем нарисовать британский флаг при помощи CSS без графических рисунков.
Сначала выводим контейнер для флага:
.flag
Далее определяем позицию для верхнего белого прямоугольника:
.topw
Задаем позицию для левого белого прямоугольника:
Затем для правого белого прямоугольника:
Код смотрите в исходниках.
Нижний белый прямоугольник:
Теперь задаем позицию для синих треугольников (верхнего, левого, правого и нижнего):
Флаг Японии
Сделайте страницу с изображением флага Японии, как показано на рис. 1. Размер 300х200 пикселов, диаметр круга 120 пикселов. Любые картинки применять запрещено, всё надо сделать с помощью CSS. Страница должна корректно отображаться во всех современных браузерах.
Рис. 1. Флаг Японии
Флаг Японии .japan Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные задачи
- TEX
- Отступы между блоков
- Андроид в тени
- Ссылка как кнопка
- Вложенные списки
- Форма регистрации
- Объединение ячеек таблицы
- Обязательные поля формы
- Цвет и фон в таблице
- Асуанская плотина
- Батарейка
- Заголовки
CSS3
Придумайте четыре способа создания фигуры, показанной на рис. 1, с помощью CSS, без дополнительных изображений и символов.
Флаг Японии
Сделайте страницу с изображением флага Японии, как показано на рис. 1. Размер 300х200 пикселов, диаметр круга 120 пикселов. Любые картинки применять запрещено, всё надо сделать с помощью CSS. Страница должна корректно отображаться во всех современных браузерах.
Рис. 1. Флаг Японии
Шаг 4
Сделайте страницу, как показано на рис. 1. Все размеры заданы в пикселах и не меняются при расширении окна браузера. Отображаться страница должна правильно во всех современных браузерах.
Ход конём
Сделайте таблицу 3х3 с фиксированной шириной и высотой ячеек. При щелчке по любой ячейке в ней выводится изображение коня (рис. 1). Повторный щелчок по ячейке убирает в ней коня. Код должен работать во всех современных браузерах.
Эквалайзер
Сделайте страницу, как показано на рис. 1. Ориентируйтесь на последние версии браузеров, использовать стилевые префиксы не обязательно.
Индикатор прогресса
Сделайте индикатор прогресса, как показано на рис. 1. Ширина самого элемента 100%, высота 20px. Значение индикатора должно легко задаваться через ширину, как в процентах, так и пикселах.
Для наглядности увеличенный фрагмент индикатора показан на рис. 2. Обратите внимание на градиенты, рамки и небольшую тень справа.
Круговая диаграмма
Сделайте круговую диаграмма, показанную на рис. 1. Как либо меняться или управляться через JavaScript она не должна, нужен только внешний вид.
Хостинг
Создайте страницу, показанную на рис. 1. Ширина блока фиксирована. Постарайтесь обойтись одним изображением, добавляя его как фоновый рисунок.
Ссылка как кнопка
Сделайте ссылку, которая при наведении на неё курсора мыши меняла свой вид, как показано на рис. 1.
Андроид в тени
Выведите изображение так, чтоб вокруг него была тень, как показано на рис. 1.