Фиксирана шаблон с една колона, безплатни уроци и CSS оформление

Фиксирана шаблон с една колона, безплатни уроци и CSS оформление

В тази и следващите три урока ние ще създадем шаблони, състоящи се от един, два и три колони. На първо място, примери, за да правят определен оформление.

Създаване на десктоп отделна папка за фиксиран оформление с една колона, това име fix1.

Създаване тази папка са два файла: index.html и style.css.

Файлът index.html, напиши следния код:

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

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

Ние се обръщаме към досието на стилове. Първо изчисти всички маржове:

Сега пиша свойствата на блока с идентификатор обвивка:

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

За горния и долния колонтитул определите височината:

За да изберете цвета на всеки блок, нека да добавите фон-цвят имот за следните опции:

Запазете промените и да отвори файла index.html в браузъра.

Не е достатъчно облицовка на блоковете. Съдържанието на файловете блокове index.html затворени между таговете

с класа на съдържание. Един пример за шапки:

Файлът с стилове за този клас, за да добавите запълване използване на свойствата на запълване:

Как да победим в мазето до дъното на страницата?

Много често клиентите изискват мазето бил прикован към долната част на страницата. Това може да бъде постигнато чрез написването на няколко имоти за следните единици:

  1. Селектори за HTML и тялото трябва да зададете, височина, равна на 100%.
  2. За да се установи минимална височина селектор #wrap мин-височина: 100%;. както и относителното позициониране на позиция: относителна.
  3. В мазето, за да инсталирате абсолютно положение позициониране: абсолютна. долната граница на долния: 0. и ширината на ширината на блок: 100%.

Сега, в мазето ще бъде прикован към долната част на страницата. Запазете промените и да обновите страницата в браузъра.

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

. За да избегнете това, добавете към последния долното поле, равно на височината на мазето, т.е. 50px:

Шаблонът е готова. В резултат на браузъра може да бъде видяна тук. CSS за шаблона, представена тук.