CSS оформлението изисква да мислите за оформлението на уебсайта си като цяло, след което да вземете парчетата и да ги сглобите. Научете как да създадете опростено оформление с 3 колони с CSS.
01 от 09
Изчертайте оформлението си
Можете да изготвите оформлението си на хартия или графична програма . Ако вече имате предвид телена рамка или дори по-обширен дизайн, опростете я до основните кутии, които съставят сайта. Този дизайн, който придружава тази статия, има три колони в основната област на съдържанието, както и заглавка и долен колонтитул. Ако погледнете отблизо, можете да видите, че трите колони не са равни по ширина.
След като извадите оформлението си, можете да започнете да мислите за размерите. Този пример ще има следните основни размери:
- Не повече от 900 пиксела
- 20 px жлеб вляво
- 10 px между колони и редове
- Колони с ширина 250px, 300px и 300px
- Най-горният ред е висок 150px
- Долният ред е висок 100px
02 от 09
Напишете основни HTML / CSS и създайте контейнер
Тъй като тази страница ще бъде валиден HTML документ, започнете с празен HTML контейнер
Добавете в основния CSS стилове нулевите страници, граници и подложки . Въпреки че съществуват други стандартни стилове на CSS за нови документи, тези стилове са минималният, който ви трябва, за да получите чисто оформление. Добавете ги в главата на вашия документ: