Барактын колонтитул бөлүгүн ("колонтитул") терезенин ылдыйкы чек арасына жабыштырууга кантип жасаш керек - бул сайт баракчаларын жайгаштырууда эң көп кездешкен көйгөй болсо керек. Албетте, чечимдер бар, жана алардын бир нечеси бар. Төмөндө, мазмунунун көлөмүнө жана браузердин түрүнө карабастан, колонтитул ар дайым барактын ылдый жагына басылып турарын текшерүүнүн бир жолу келтирилген.
Ал зарыл
CSS жана HTML боюнча негизги билим
Нускамалар
1 кадам
Мисал катары типтештирилген баракчалоо схемаларынын бирин алалы - анын чердак (баш), негизги блок жана колонтитул болот. Албетте, эгер зарыл болсо, негизги блокко бир нече тилкени койсо болот, бирок биз бул жерде мындай кылбайбыз, колонтитулду жайгаштырбоого гана көңүл бурабыз. Беттин HTML коду спецификация жарыялангандан кийин башталат:
Тегдердин арасына жана барактын аталышынан тышкары, биз кодировканын көрсөтмөсүн жайгаштырабыз: Ошондой эле стилдердин сүрөттөмөсүн камтыган тышкы CSS файлына шилтеме: @import "styles.css"; Биз аларды жайгаштырбайбыз Тогузунчу версиядагы Opera браузери менен кыйынчылыктарды болтурбоо үчүн стилдерди түздөн-түз барактын HTML-кодуна сүрөттөө, баракчанын блок структурасын жайгаштыруу. Биринчиси, албетте, титулдук блок. Бул блок үчүн стилдерди орнотуу үчүн, ага баш идентификаторун беребиз:
Бул баш сөз ар дайым терезенин жогору жагында болот.
Андан кийин - барактын негизги блогу. Ал эки уячадан турат - сырткы (идентификатор - тышкы) жана ички (идентификатор - сырткы ором):
Бул негизги бөлүгү.
Акыры, колонтитул:
Бул колонтитул - ар дайым терезенин түбүндө!
Толугу менен барак төмөнкүдөй болот:
Төмөнкү колонтитулга кантип басуу керек
@import "styles.css";
Бул баш сөз ар дайым терезенин жогору жагында болот.
Бул негизги бөлүгү.
Бул колонтитул - ар дайым терезенин түбүндө!
2-кадам
Эми стиль таблицасынын мазмунуна өтөлү. Ал төмөнкү схеманы ишке ашырат: негизги барактын блогу 100% бийиктикке орнотулат, аталышы абсолюттук жайгаштырылат жана колонтитул салыштырмалуу болот. Баракчанын негизги мазмунун кайталап кетпеши үчүн, бул негизги мазмунун негизги кутучанын ичиндеги кошумча уячага жайгаштырат жана бул кошумча кутуча аталыш кутучасынын бийиктигине барабар жогорку чекке орнотулат. Ал эми колонтитулга анын бийиктигине барабар болгон терс жогорку чек аралыгы берилет - ушундай жол менен ал терезенин ылдый жагынан толук бойуна көтөрүлөт. CSS файлынын толук мазмуну: * {margin: 0; толтуруу: 0}
html, тулку {бой: 100%;} тулку {
Кара түс;
кызмат: салыштырмалуу;
}
#outer {
мин бийиктиги: 100%;
margin: 0;
фон: ак;
Кара түс;
} * html #outer {бийиктик: 100%;}
#header {
абалы: абсолюттук;
top: 0;
left: 0;
туурасы: 100%;
бийиктиги: 70px;
background: # 304a00;
толуп кетүү: жашырылган;
Ак түс;
текстке тегиздөө: борбор;
} #footer {
кызмат: салыштырмалуу;
margin-top: -50px;
ачык: экөө тең;
туурасы: 100%;
бийиктиги: 50px;
background-color: # 304a00;
Ак түс;
текстке тегиздөө: борбор;
}
.outerwrap {
калкуу: сол;
туурасы: 100%;
padding-top: 71px;
} Бул файлды барактын html-кодунда көрсөткөн ат менен сактоо керек - styles.css.
