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

Как да си направим гумена капачка
Как да си направим гумена капачка
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

Име на сайта

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