Блок DIV оформление с CSS свойства - създаване на сайт на базата на Разделение блокове

Div Layout е действителен модел на създаване на сайтове.

В мрежата винаги има нови обекти - новинарски портали, блогове и лични страници. Почти всеки един от тях е създаден на базата на модела на блок, който се основава на блокове DIV. Днес ние ще се занимава в тази технология, помислете основните нюансите на DIV оформление.

Потокът на HTML документ

Ако си спомним, че на езика HTML ви позволява да структурираме хипертекстова информация, става ясно, че всеки сайт, по своята същност, е набор от единици: изображения, текст, връзки, и така нататък. Ние не говорим конкретно за блоковете DIV, но тя е тясно свързана с теми.

Така че, ние имаме поток от данни, от които става и HTML страница. В момента има два типа на структурни елементи: блок и малки букви. Блок, в нормален HTML поток са разположени един зад друг във вертикална ред. В този случай, ширината по подразбиране на блока заема цялото налично пространство, по отношение на страница или родител елемент. На свой ред, малки елементи са разположени един зад друг по хоризонтален начин.

Блок DIV оформление с CSS свойства - създаване на сайт на базата на Разделение блокове

Съответно, ако това е нормално HTML поток, всички елементи Разделение са поставени под един от друг, и по линията на педя.

DIV оформление на сайт

Така че, за да отбележи мястото започва да използва DIV блокове. С тях можете да raschertit е основен оформление, както и създаване на допълнителни единици за всички съответни типове съдържание.

Да видим този процес като пример за стандартна страница, включително шапка, съдържанието блок, лента и долната част на страницата.

Както можете да видите на снимката, за оформлението на оформлението сме използвали следните основни компоненти:

Основен модул се използва като контейнер за цялото съдържание. Заглавието - банер. Nav - навигационно устройство. Съдържание - Обща информация и съдържание. Footer - изба сайт.

Всеки един от тези блокове е DIV контейнер. Но на теория, на блоковете трябва да отидат, след като един от друг. Ние също трябва да отида на обсъдено по-горе, че блоковете да има следната структура разпределение:

И плюс за всички, ще бъде поставен в страницата по същия начин, както видяхме в шаблона. Как да се постигне това? За тази цел, ние ще използваме свойствата на блоковете DIV, които ще ни позволят да ги подредите по желание, една спрямо друга, както и на страницата като цяло.

Но за начало, нека създадем самата основа на нашата HTML оформление, и да даде името на блоковете, за да могат да работят чрез стилове.

HTML рамка

Ако пропуснете всички етикети на услуги, скелета на сайта ще изглежда така.

За всеки блок ние назначен клас. С него ние ще определи стила на устройството - това ще ни помогне да постигнем желаното място на страницата.

Това е време да се запознаят със стиловете и свойства, които се използват, за да DIV оформление на сайта.

Ако някой не знае, в строителна площадка вече използват CSS стилове. С тяхна помощ, можете да промените и да е елемент на страницата. Това се отнася както за визуален дизайн на блока, и неговото местоположение и размер.

За начало, нека да се запознаят с имота, който ви позволява да позиционирате DIV блок на дясната или лявата част на страницата или на родителския контейнер.

Малко отклонение. Винаги, когато ние ще присвои стил към блок, тя ще се промени неговите свойства (размер, местоположение), в сравнение с родителския контейнер.

Имотът поплавък има четири стойности: никой, надясно, наляво, наследяват.

Ние сме заинтересовани от стойността на "ляво" и "дясно".

стойност Float се посочва от коя страна ще покаже нашия блок. Всички други блокове ще се влеят около него от другата страна.

В този случай, за навигация единица, ние трябва да се определя стойността си тръгна. стойност за първичната, така че съдържанието. Ето как ще изглежда в преписката по стил:

Между другото, можете да зададете на имота само за навигация единица. Блокиране на съдържание ще бъде автоматично настроена на правото на навигация. Това ще бъде постигнато благодарение на амбалаж, който се получава чрез определяне на свойствата на плувка.

Допълване на CSS: марж и уплътнение

Сега нека да обясня две важни свойства, използвани в оформлението на базата Разделение блокове. Те са отговорни за запълване. За да се разбере същността на работата си по най-лесния пример.

Да си представим, че ние трябва да направим така, че нашата основна единица ОСНОВНА. имаше малко изместване от заглавната част на сайта. Това може да стане като се отделят блока с главния Разделение клас. марж собственост. Той е отговорен за външната облицовка блок.

Марж имот има следните стойности: [стойност | интерес | авто] | наследи.

По този начин, можете да укажете на пълнежа в пиксели, процента, последователно от всяка страна.

Възможно е да се уточни само определен отстъп, например от горната страна. Точно това е нашия случай. Ето как ще се осъществява:

Сега основната ни звено ще има горен отстъп 10 пиксела.

Сега нека да се направи блок с навигация и съдържание. Представете си, че вече имате уеб сайт. Всички връзки в навигацията тясно съседство с ляв ъгъл на страницата. А текст в съдържанието блок напротив, в непосредствена близост до дясната страна. Не съвсем хубав дизайн. Ние трябва да направим пълнежа.

Защото е в подложка имота. има следните стойности: [стойност | интерес] | наследят

Тук на същия принцип като при марж на имот - можете да настроите тире, за всяка страна поотделно.

Нека първите otodvinem навигационни връзки от левия край на 15 пиксела. След това, текстът в съдържанието блок е 20 пиксела от дясната страна. В резултат на това нашата CSS код малко се добавя:

С помощта на тези основни свойства, можете да постигнете желаните DIV оформления. В резултат на това да се приготвим оформление на обекта, и ще трябва само да го напълни с необходимата информация.

заключение