Як на сайті додати блок
Існує два типи верстки сайтів: таблична і блокова. І якщо перша зручніша для створення простих html-сторінок, друга ідеально підходить в тому випадку, якщо необхідно додати окремі елементи у вигляді блоків.
1
Є два прийоми, які дозволять вам самостійно розробити дизайн блоку: з впровадженням каскадних таблиць стилів в документ або з підключенням їх з зовнішнього ресурсу. І той, і інший дає один і той же результат, тому принципової різниці між ними немає. У першому випадку вставте в будь-яке місце файлу style.css наступний код:
.block1 {
}
Block1 - назва блоку, можна написати будь-яке інше. Між фігурними дужками задайте параметри в форматі: найменування атрібутаgt; двоеточіеgt; значеніеgt; крапка з комою (в т.ч. ставиться перед фігурною дужкою). Зазвичай використовуються такі елементи:
- width - ширина (500px, 100% і ін.);
- height - висота (200px, 25% та ін.);
- background - колір фону (Yellow, Red, # 000000);
- padding - відступи навколо вмісту всередині блоку (0px, 20%);
- margin - зовнішні відступи від блоку (15px, 40%);
- border - рамка (border: solid 0px black-);
- float - вирівнювання (left, right);
- border-radius - обрізка кутів (border-radius: 10px;).
.block1 {
}
Block1 - назва блоку, можна написати будь-яке інше. Між фігурними дужками задайте параметри в форматі: найменування атрібутаgt; двоеточіеgt; значеніеgt; крапка з комою (в т.ч. ставиться перед фігурною дужкою). Зазвичай використовуються такі елементи:
- width - ширина (500px, 100% і ін.);
- height - висота (200px, 25% та ін.);
- background - колір фону (Yellow, Red, # 000000);
- padding - відступи навколо вмісту всередині блоку (0px, 20%);
- margin - зовнішні відступи від блоку (15px, 40%);
- border - рамка (border: solid 0px black-);
- float - вирівнювання (left, right);
- border-radius - обрізка кутів (border-radius: 10px;).
2
У другому варіанті використання CSS, пропишіть стиль між тегами і :
І додайте потрібні параметри.
3
Вставте блок в потрібне місце на сайті за допомогою команди:
блок 1
Збережіть і обновіть сторінку, він повинен з`явитися. Майте на увазі, що вирівнювання по висоті може залежати від ступеня наповненості вмістом. Наприклад, якщо ви задали 300px, а прописали всього один рядок тексту, він буде відображатися в повному обсязі. Виправити це можна, наприклад, за допомогою таблиці з потрібними параметрами, яку слід помістити всередину блоку, тобто між тегами
і
. А щоб кордони не була видна, вставте атрибут border ="0" Статті за темою "Як на сайті додати блок"
Оцініть, будь ласка статтю