Какво е блоково оформление Как сами да направите проста страница на уебсайт

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

Основни съвети

Видове оформление на уебсайт

Има няколко вида оформление:

Ние се интересуваме от блоково оформление. Как се различава от електронната таблица? Блоковете за оформление, използващи етикета DIV, имат определени предимства:

1. Зареждането с блоков дизайн е по-бързо.
2. Съдържанието на блоковете се показва (за разлика от таблиците), докато се зареждат. Както можете да видите, данните от таблицата ще се появят само след като цялата таблица бъде показана.
3. Кодът с div се чете по-лесно.

Това не са всички предимства, с които блоковото оформление е известно.

Как да променя позицията на div?

Float ще ни помогне с това - това е свойство, което може да приема следните стойности:

1. Ляво подравняване - ляво.
2. За дясно подравняване - дясно.
3. Елементът остава там, където е бил, не се мести никъде, ако никой не е зададен. Тази стойност ще бъде по подразбиране.

Друго основно свойство, което ще ви бъде полезно, е ясно. Може да има 4 стойности:

1. За да инсталирате елемент под предишния, преместен вдясно, блок - вдясно.
2. Left задава елемента под предишния, който е преместен наляво.
3. И двете - монтаж под предишния преместен блок.
4. Няма означава, че няма ограничения за позицията на блока спрямо онези части, които се преместват.

Пример

Да видим как ще изглеждаблоково оформление div. Ние пишем нашия код:

Под кода виждате общата сума. По този начин, въз основа на няколко параметъра, можете да контролирате местоположението на блоковете по желание. Да преминем към следващия момент. Приложихме text-align:center за центриране на всеки блок за всеки браузър.

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

Нещо важно

Има едно популярно свойство, което се използва в оформлението - позиция, то се използва за позициониране.

Стойности за характеристиката на позицията:

1. Относително - задава позицията на частите спрямо началните им позиции. Прилагането отляво, отгоре, отдясно, отдолу измества елемента в определена посока.
2. Статично - нормалното показване на елемента. Няма смисъл да използвате дясно/ляво, горе/долу - няма да доведе до нищо.
3. Абсолютно - абсолютното разположение на елемента.
4. Фиксиран - подобен на абсолютния. Елементът е привързан към определена точка на дисплея, но не променя позицията си дори в този случай, ако страницата се обърне.

Много дизайнери на оформление са забелязали, че когато се използва фиксирано, абсолютно или относително позициониране, блоковете се припокриват. Тогава е любопитно да се знае кой от блоковете е по-нисък, кой е по-висок. За да отговорим на този въпрос, се нуждаем от свойството z-index. Това изведе блоковото оформление на съвсем ново ниво. Това прави възможно поставянето не само на равнината, но и с помощта на третата ос Z. Стойността на тази характеристика може да бъде положителна и отрицателна.

Нека направим 3 блока. След това ще експериментираме сабсолютно позициониране.

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

---