Структура блокової верстки
Відео: Урок 2. Структура проекту. HTML верстка для початківців
Найбільш часто зустрічається верстка - блокова. Однак, не всі правильно верстають блоками, в основному, це ті, хто робить це вперше. Як показує практика, такі новачки довго мучаться з першої блокової версткою, а вже наступні їм даються набагато легше, так як вони вже знають структуру блокової верстки. І щоб полегшити трохи життя новачкам, я в даній статті покажу вже готову структуру блокової верстки.
наводжу HTML-код:
xmlns="Http://w3.org/1999/xhtml"gt;
заголовок сторінки
http-equiv="Content-Type"content="Text / html- charset = utf-8"/ Gt;
name="Description"content="Опис сторінки."/ Gt;
name="Keywords"content="Ключові слова сторінки"/ Gt;
href="Css / styles.css"rel="Stylesheet"type="Text / css"/ Gt;
id="Header"gt;Шапка сайту
id="Content"gt;
id="Left"gt;ліві блоки
id="Right"gt;праві блоки
id="Center"gt;Центральна частина
class="Clear"gt;
id="Footer"gt;вміст підвалу
І CSS-код:
#left {
float: left-// Ліві блоки розміщуємо зліва
width:200px-// Установка ширини 200 пікселів
}
#right {
float: right-// Праві блоки розміщуємо справа
width:200px-// Установка ширини 200 пікселів
}
#center {
margin-left:200px-// Лівий відступ 200 пікселів
margin-right:200px-// Відступ справа 200 пікселів
}
.clear {
clear: both-// Скасовуємо позиціонування (вплив float)
}
Цю структуру Ви можете сміливо копіювати на свій сайт. Безумовно, деякі елементи можна міняти. Наприклад, розміри лівих і правих блоків. Відповідно, треба буде поміняти і відступи у центрального блоку. Також якщо верстка фіксована, або вона не повинна розтягуватися на всю сторінку, то необхідно все блоки додати в інший, самий верхній, у якого задати фіксовану ширину в пікселях (фіксована верстка) або у відсотках (гумова, але не на всю сторінку).
Відео: Web Junior 2016 - урок 4. Блокова модель HTML і СSS
Сподіваюся, дана структура блокової верстки допоможе новачкам з мінімальною кількістю проблем зверстати свою першу сторінку блоками.
- Вийшов відеокурс "верстка сайту з нуля"
- Як притиснути футер до низу
- Як зробити div зі 100% height
- Як зробити блоки зі слайдер ефектом на чистому css3.
- Як притиснути футер до низу сторінки (табличний спосіб).
- Як зробити автообновление сторінки
- Що таке сніппети?
- Новий безкоштовний курс по верстці сайтів
- Двоколонковому верстка з однаковою висотою колонок
- Nodejs. Навігація по сторінках.
- Мета-теги для сторінки в html
- Html 5 структурні елементи
- Адаптивна верстка через jquery
- Таблична верстка vs блокова верстка
- Clearfix на css
- Верстка й її критерії якості
- Мета-теги для пошукових систем в html
- Структура і призначення файлів і папок в андроїд
- Мета-теги для браузера в html
- Адаптивна верстка
- Часткова відміна float в css