Как да си направим гумена капачка

Съдържание:

Как да си направим гумена капачка
Как да си направим гумена капачка

Видео: Как да си направим гумена капачка

Видео: Как да си направим гумена капачка
Видео: Как да си направим писалка за телефон 2024, Може
Anonim

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

Как да си направим гумена капачка
Как да си направим гумена капачка

Необходимо

имате собствен уебсайт

Инструкции

Етап 1

За да направите гумена капачка, първо я нарисувайте във Photoshop. След това отделете 3 части на картината: 2 страни и средата. Тези парчета трябва да са с ширина около 10-20 пиксела и около височината на заглавката, която искате. Запазете всеки елемент, така че да имате 3 различни файла: 1.gif, 2.gif, 3.gif. Изпратете тези изображения на сайта.

Стъпка 2

След това създайте таблица, която ще съдържа елементите в горната част на сайта. За целта напишете в HTML кода:

Таблица с ширина 100% ще се разтегне или свие в зависимост от размера на екрана на потребителя.

Стъпка 3

Направете ред в таблицата, в клетката на който поставете лявата страна на заглавката на сайта 1.gif:

Стъпка 4

Създайте средна секция на заглавката на сайта, състояща се от повтарящо се 2

.header {background-image: url ('images / 2.gif');}

Стъпка 5

Сега, в един ред на таблицата, създайте друга клетка и поставете средния елемент от горната част на сайта в нея, сочейки заглавката на нейното име в CSS кода:

Име на сайта

>

Стъпка 6

След като сте създали третата клетка в реда на таблицата, поставете дясната страна на заглавката на сайта 3

Име на сайта

Препоръчано: