Четири различни начина за създаване на HTML
В тази статия искам да разгледам четири различни начина за създаване на оформления с много колони. Всеки метод има своите плюсове и минуси. За да демонстрирам как тези оформления работят и изглеждат, създадох прост сайт, който използва HTML таблици, CSS float свойство, CSS рамка и flexbox.
Първият ден от нов живот
В тази статия използваме четири различни метода за оформление на уебсайта:
Сега е време да опитате всеки един.
Методи за създаване
Това е моят дизайн на сайта:
За да създам заглавката на сайта, използвах свойството position: relative. Нека се опитаме да го направим от нулата, като използваме оформление на таблица.
Ето моя HTML:
И ето какво получих:
Както можете да видите, това не е същата шапка. Изглежда позната, но позицията й леко се е променила. И ето защо. Знаете, че таблиците са чудесни за симетрично позициониране. Но за други цели те не са толкова подходящи. Също така обърнете внимание колко тромав е кодът. Но таблиците имат една полезна функция. Ето един трик, който можем да направим:
И ще видите, че оформлението изглежда така:
По този начин можете лесно да определите какво е къде, ако се объркате.
Сега за лошите новини. Погледнете още веднъж HTML кода. Това е проста таблица, но представете си как би изглеждала с десетки клетки. Ето изходния код, който имам:
В този случай трябва да използвате блоково оформление на сайта, използвайки CSS. Чрез прилагане на нещо подобно:
Посочвате да се движите
Свойството float се използва широко в блоковото оформление на сайта. Ще използваме това свойство, за да покажем основната област на съдържанието. Малък пример ще ви помогне да разберете по-добре как работи:
Той има три различни цветни елемента
И ето какво получихме:
Когато разлагате на слоеве, вие посочвате чрез свойството float, към което искате вашият елемент
Следващият поплавък ще се движи, докато не срещне първия и т.н. Елементът до плаващия елемент ще тече около него като вода! Но ако не искате да изпращате всичките си обекти "във водата", можете да използвате свойството clear. Той определя кои страни на даден елемент не трябва да се движат около плаващи елементи.
Ето как изглежда част от оформлението ми за основното съдържание:
Сега нека го накараме да плава:
Добавихме няколко стила и завършихме с нещо подобно:
Имаме голям блок за статии и по-малък блок за новини. Използвахме свойството float: left и за изображения. Забележете как са опаковани с етикет
. Това оформление изглежда като вашето любимо списание.
CSS рамки
Ако сте малко мързеливи
Ако нямате време да се забърквате с CSS оформлението, можете да използвате една от CSS рамките. В нашия пример използваме Bootstrap. За да направите това, трябва да го изтеглите и свържете в HTML файл .
Bootstrap съдържа мрежа от 12 еднакви по размер колони. HTML елементите са подредени да обхващат различен брой колони. По този начин се създават персонализирани оформления. Всяко парче съдържание е подравнено спрямо тази решетка през посочения брой колони, за да го разтегнете.
В този пример създадохме низ. След това поставихме две еднакви по размер колони в него. Всяка от тях обхваща шест от дванадесетте налични колони.
След това създаваме раздел „Очаквайте скоро“. Той ще съдържа четири филмови плаката. Използвайки прости математически изчисления, определяме, че всеки от тях ще обхваща три колони.