Урок "Створення веб-сайтів з викостанням CSS"
- É«º¼_α¿ í½«¬_ó.é_ñßΓπ»¿.pptx pptx
- çáóñá¡¡∩_3.docx docx
Розміри блоків. Відступи
З допомогою CSS можна задавати ширину та висоту. Наприклад Результат:.block { width: 140px; height: 40px; background-color: yellow;}
Також можна задавати відступи від країв блокуpadding - задає відступи всередині блоку. Наприклад: Результат:.block { width: 140px; padding: 20px; Ось самі відступи: background-color: yellow;}
Внутрішний відступpadding - задає відступи однакові з усіх сторін. Також можна задавати відступ з кожної сторони блоку окремо:padding-bottom: 10px; - відступ знизуpadding-left: 15px; - відступ зліваpadding-right: 50px; - відступ зправаpadding-top: 20px; - відступ зверху
Зовнішній відступ. Без відступу: Додамо зовнішній відступ: Результат: .block { width: 140px; height: 40px; background-color: yellow; margin: 30px;}Як видно, до жовтого блоку додались відступи з усіх сторін. Тому він перемістився вниз і вліво
Зовнішній відступmargin - задає відступи однакові з усіх сторін. Також можна задавати відступ з кожної сторони блоку окремо:margin-bottom: 10px; - відступ знизуmargin-left: 15px; - відступ зліваmargin-right: 50px; - відступ зправаmargin-top: 20px; - відступ зверху
Завдання
1. Зайти на https://codepen.io/pen/ (можна з мобільних пристроїв)
2. У розділі HTML та CSS створити розмітку, щоб результат був як на картинці:
Текст потрібно додати свій, інший ніж на зразку. Головне, щоб був заголовок та 2 блоки з якоюсь інформацією. Кольори на вибір, блоки повинні бути відмежовані один від одного та від країв.
Результат надіслати у вигляді скріншоту сайту codepen з виконаним завданням (код HTML, CSS і результат).
P.S. ЗВЕРНІТЬ УВАГУ!!! Скріншот можна зробити кнопкою prtsc на клавіатурі або кнопками блокування + звуку на телефоні.
про публікацію авторської розробки
Додати розробку