"Төмөнкү колонтитул" адатта веб баракчасынын макетинин эң төмөнкү бөлүгү болуп саналат. Бул колонтитулду жайгаштырууда эң көп кездешкен кыйынчылык - барактын толуктугуна же браузердин түрүнө карабастан, аны ар дайым терезенин ылдый жагына жайгаштыруу. Блокторду жайгаштырууга массалык түрдө өткөн мезгилден бери көйгөйдү чечүүнүн бир нече жолу болгон, алардын бири төмөндө келтирилген.
Ал зарыл
CSS жана HTML боюнча негизги билим
Нускамалар
1 кадам
Негизги бет катары жайылган схеманы алалы - үч блок бири-биринин үстүнө жайгаштырылды. Үстү (башы) ар дайым терезенин үстүңкү чек арасына, асты (колонтитулу) - төмөнкү чек арасына дал келиши керек, ал эми негизги (тулку) алардын ортосундагы бардык боштукту ар дайым толтурушу керек. Баштапкы код XHTML 1.0 Transitions спецификациясына шилтемени камтышы керек жана стилдердин сүрөттөлүшү тышкы CSS файлына жайгаштырылышы керек (Opera 9. XX менен көйгөйлөрдү болтурбоо үчүн). Түзүмдүн HTML сүрөттөмөсү негизги тилкеде жайгаштырылышы керек барактын тулку бөлүгү. Бул, албетте, жогорку блоктон башталат, анын маанисине идентификатор атрибутун коюу керек, мисалы, divHead:
Header block.
Негизги блок жуп салынган блоктордон турушу керек. Сырткысына divOut идентификатору берилет, ал эми ички бөлүгүнө - divContent:
Негизги мазмуну.
Колонтитул divFoot деп коюлган:
Барактын колонтитулу.
2-кадам
Беттин толук HTML коду төмөнкүдөй болушу керек:
Үч блок
@import "style.css";
Бул баш блок.
Негизги мазмуну.
Бул барактын колонтитулу.
3-кадам
Стилдин сүрөттөлүшү төмөнкү жайгаштыруу механизмин ишке ашырат: ортоңку блок (divOut) 100% бийиктикке коюлган, жогорку блок (divHead) абсолюттук жайгаштырууга ээ, ал эми төмөнкү - салыштырмалуу. Негизги мазмун блогунда (divContent), барактын негизги мазмунуна кайчылашпашы үчүн, башында блок блогунун бийиктигине барабар бош орун болушу керек. Ал эми төмөнкү блок (колонтитул) жогору жагында ушул блоктун бийиктигине барабар терс чекке ээ болушу керек. Бул браузер терезесинин төмөнкү чек арасынан жогору көтөрүлөт. Бул механизмди төмөнкү мазмундагы css файлын колдонуу менен ишке ашырса болот: * {margin: 0; толтуруу: 0}
html, тулку {бой: 100%;} тулку {
кызмат: салыштырмалуу;
color: # 000;
}
#divOut {
margin: 0;
мин бийиктиги: 100%;
background: #FFF;
color: # 000;
}
* html #divOut {бийиктик: 100%;}
#divHead {
абалы: абсолюттук;
left: 0;
top: 0;
туурасы: 100%;
бийиктиги: 80px;
background: # 2F5000;
толуп кетүү: жашырылган;
текстке тегиздөө: борбор;
color: #FFF;
} #divFoot {
кызмат: салыштырмалуу;
ачык: экөө тең;
margin-top: -60px;
бийиктиги: 60px;
туурасы: 100%;
background-color: # 2F5000;
текстке тегиздөө: борбор;
color: #FFF;
}
.divContent {
туурасы: 100%;
калкуу: сол;
padding-top: 81px;
} Сиз HTML стилиндеги стилдик баракча үчүн көрсөткөн атыңыз style.css.
