Оформление на уебсайт по методи на колони и тяхното изпълнение
Как могат да се правят колони
Първо, нека просто разгледаме няколко начина, по които можете да направите колони, а след това нека разгледаме няколко примера.
С плаващи блокове. Днес това е най-популярният начин за създаване на високоговорители, въпреки че flexbox бавно започва да го тълпи. По подразбиране два блока в нормален поток не могат да бъдат на една линия, но това поведение може лесно да бъде променено чрез задаване на двете свойства float: left | нали. Те ще започнат да се притискат към левия или десния ръб. За да може блокът, който ги следва, да възприеме плаващи блокове и да го постави правилно, трябва да бъде написано ясно: и двете.
Плувките често се използват за направата на 2 или 3 колони. Оформление на сайт с плаващи блокове не е много трудно, просто трябва да знаете някои от нюансите на тяхното поведение. Например, ако трябва да направите зона за показване на статии, а вдясно - странична лента с меню, тогава плаващите блокове много лесно изпълняват тази подредба.
Използване на таблици. Таблиците обикновено се създават, за да показват голям брой клетки и колони, така че да се правят колони в тях е лесно. Таблицата може да има поне 20 колони. Цялата му структура е зададена в html-код, така че кодът се оказва доста тромав.
Практически курс за оформление на адаптивен уебсайт от нулата!
Вземете курс и научете как да подреждате модерни уебсайтове в HTML5 и CSS3
Тъй като клетките в таблицата могат да бъдат зададени на всякакъв размер, почти всички сайтове са били използвани за оформление. Например, за да се приложи най-простото оформление (заглавна част, съдържание, странична лента, долен колонтитул), в таблицата са направени три реда (ред на таблица се формира от маркера tr). Всеки ред съдържа две клетки, защото съдържанието и страничната лента трябва да се държат отделно една от друга. И в горния и долния колонтитул тези клетки бяха просто свързани с помощта на атрибута colspan на маркера td, ако е необходимо.
Можете лесно да премахнете границата от клетките, което позволи на уеб разработчиците доста лесно да набират шаблони със сложна структура.
С flexbox. Това е модерна технология, която започва да се разпространява през 2014 г., въпреки че е съществувала и преди това. Същността му е следната: създава се един общ блок контейнер, в който се поставят други блокове, които ще трябва да бъдат направени под формата на колони, след което този контейнер трябва да бъде написан display: flex.