Тази статия обяснява как да изградите оформление с 3 колони в CSS. Инструкциите важат за CSS3 и по-стари.

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

Можете да нарисувате оформлението си на хартия или в a графична програма. Ако вече имате предвид телена рамка или дори по-обширен дизайн, опростете го до основните полета, които съставляват сайта. Този дизайн, придружаващ тази статия, има три колони в основната област на съдържанието, както и горен и долен колонтитул. Ако се вгледате внимателно, можете да видите, че трите колони не са еднакви по ширина.

След като изтеглите оформлението си, можете да започнете да мислите за размерите. Този примерен дизайн ще има следните основни размери:

• Широчина не повече от 900 пиксела
• 20 px улук вляво
instagram viewer
• 10 px между колони и редове
• Колони с ширина 250px, 300px и 300px
• Горният ред е висок 150px
• Долният ред е висок 100px

Напишете основния HTML / CSS и създайте елемент на контейнер

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

Добавете основните CSS стилове към нулирайте полетата на страницата, границите и подложките. Докато има и други стандартни CSS стилове за новите документи тези стилове са минимумът, от който се нуждаете, за да получите чисто оформление. Добавете ги в главата на вашия документ.

За да започнете да изграждате оформлението, поставете елемент на контейнер. Понякога се случва да можете да се отървете от контейнера по-късно, но за повечето оформления с фиксирана ширина наличието на контейнерния елемент улеснява управлението в различни уеб браузъри.

Оформете контейнера

Контейнерът определя колко широка ще бъде съдържанието на уеб страницата, както и всякакви полета от външната страна и подплънки от вътрешната страна. За този документ контейнерът е широк 870px с 20 пиксела улей вляво. Улукът е настроен със стил на поле, но подложката на контейнера е нулирана, за да се предотврати разширяване на елементите като контейнера.

Ако запишете документа си сега, ще бъде трудно да видите контейнера, защото в него няма нищо. Ако добавите текст на заместител, ще можете да видите елемента на контейнера по-ясно.

Използвайте таг на заглавието за заглавката

Начинът, по който решите да оформите заглавния ред, зависи много от това, което е в него. Ако заглавният ред просто ще има лого и заглавие, тогава с помощта на таг на заглавието (

) има повече смисъл от използването на

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

HTML за заглавния ред върви в горната част на контейнера и изглежда така:

След това, за да зададете стиловете върху него, беше добавена червена граница отдолу, за да можете да видите къде свършва, полетата и подплънките бяха нулирани, ширината зададена на 100% и височината на 150px.

Не забравяйте да плавате този елемент с плувката: left; Имот. Ключът към писането на CSS оформления е да плава всичко, дори неща, които са със същата ширина като контейнера. По този начин винаги знаете къде елементите ще лежат на страницата.

A CSS низходящ селектор приложени стилове само към елементи H1, които са вътре в елемента #container.

За да получите три колони, започнете с изграждането на две колони

Когато изграждате оформление с три колони с CSS, трябва да разделите оформлението си на групи от две. Така че за това оформление с три колони, средната и дясната колона и групирани и поставени до лявата колона в оформление с две колони където лявата колона е широка 250px, а дясната колона е широка 610px (по 300 за двете колони, плюс 10px за улука между тях).

Колоната вляво се плува вляво, докато другата се плува вдясно. Тъй като общата ширина на двете колони е 860px, между тях има улей 10px.

Добавете две колони вътре в широката втора колона

За да създадете трите колони, добавете два div в по-широката втора колона, точно както сте добавили 2 div в колоната на контейнера в последната стъпка.

Тъй като тези две кутии с ширина 300px са вътре в кутия с ширина 610px, между тях отново ще има улей с 10px.

Добавете в долния колонтитул

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

Добавете в личните си стилове и съдържание

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