Блокове в CSS или сайт, без маси
Блокове в CSS или на уебсайта без таблици:
Ние сме свикнали да се създаде уеб сайт, ние използваме масата. Всички други методи да ни изглежда неудобно, нередовен, и т.н. Днес ще ви покажа как да се направи пълноправен уеб страница, без да се използват всякакви таблици.
Основната идея в тази saitostroitel'stva ще бъде концепцията на блок в CSS. За да се разбере това, което е необходимо да се обърнете към модела на визуален форматиране. Тук е линията от официалния наръчник W3C.
"Според модела на визуален форматиране, всеки елемент от дърво документ генерира произволен брой (евентуално нула) на блокове в съответствие с модела представяне на документ под формата на блокове."
Може би сега това звучи малко объркващо, но в края на статията ще разберете всичко.
Като единица, ние представяме елемент
където идентификатор block_1 включва всички функции на блока.
Основните свойства на блок - е разбира дължината и височината (ширина и височина), който може да бъде определен в пиксели или като процент.
Тогава трябва да вземе решение по схема за позициониране блок. Три от тях: нормалния поток, местят предмети или абсолютно позициониране. Описание на първите две може да видите в официалния ръководството на CSS, те са за нас сега, за да няма нищо. За създаване на уеб-страница е най-добре да се използва абсолютно позициониране - така че нашите блокове навсякъде "няма да оставят" за всяка резолюция на екрана. За да зададете такъв позициониране е необходимо да се ползва имота позиция, с определения абсолютен имота. Необходимо е също така да се създаде изместване на блок чрез най-добрите свойства, наляво, надясно и отдолу. Изместването може да се зададе и като пиксели или в проценти.
За да разберете как изместването, представете си, че ние създаваме HTML документ, както следва:
Ако създадете документ, че сте в горния ляв ъгъл ще видите сива кутия с надпис "Това е нашата единица."
Сега, как да го прилага по отношение на създаването на интерфейса на сайта. За това ние трябва само 4 блокове: първата ще бъде логото, а вторият - в менюто отляво, а третият - дясното меню, а четвъртият - на централното звено. Използване на свойствата на предишния пример, за да създадете такава страница не е трудно. Ето един пример: