Kuidas panna jalus veebilehele

Kuidas panna jalus veebilehele Sean Gallup / Getty Images Uudised / Getty Images

Enamik veebisaidid sisaldavad jaluste informatsiooni nagu autoriõigus kuupäev, "meist" info- ja karjäärivõimalusi.Kuigi tundub, nagu oleks see peaks olema piisavalt lihtne panna punkte lehe all, sageli teave liigub sõltuvalt suurusest brauser ja teksti hulk.Kasutades CSS CSS (CSS) ja divs saab luua lihtsa jalus, mis jäävad allosas lehekülge sõltumata akna suurus ja sisu kogusest.

, mida te vajate

  • Stylesheet
  • veebilehe kirjutatud CSS

juhised

  1. Set keha kõrgus ja konteiner klassi omadused.CSS stiili lehed seada "html" ja "keha" klassi 100 protsenti kõrgus.Lisa "konteiner" klassi ja seada min-height 100 protsenti, kõrgus kuni auto! Oluline, kõrgus kuni 100 protsenti ja margin 0 auto negatiivne (footer kõrgus).

    Näiteks "html, keha {kõrgus: 100%;}" ja ".container {min-height: 100%;kõrgus: auto! olulisem;kõrgus: 100%;margin 0 auto -35px. "

  2. Lisa kahte klassi jalus.Üks klass sisaldab tegelikku jalus sam

    as kui teine ​​klass laiendab marginaalid väljaspool lehekülge, et teha ruumi jalus.Vaid nii nende klasside samale kõrgusele.Näiteks ".footer {kõrgus: 35px;}" ja ".extender {kõrgus: 35px;}"

  3. lugege järgmisi CSS stiili lehed näiteks.Kopeeri ja kleebi järgmine kood oma stiili lehel.Muuda nimed ja jalus kõrgus vastavalt soovile.

    {margin: 0;}
    html, keha {kõrgus: 100%;}
    .wrapper {min-height: 100%;kõrgus: auto! olulisem;kõrgus: 100%; margin: 0 auto -35px;}
    .footer {kõrgus: 35px;}
    .extender {kõrgus: 35px;}

  4. Lisa need klassid arvesse veebilehel.Sisesta div mahuti jaoks tag vahel avamise ja sulgemise silte keha.Sisestage sisu veebilehel pärast konteineri avamist silt.Lisa div jaoks extender klassi pärast "sisu lõpusildiga.Seejärel suletakse mahuti tag pärast extender sulgemise tag.Lisa div jalus pärast konteineri lõpusildiga.Sisesta sisu jalus.Seejärel sulgege jalus tag.

  5. lugege järgmisi HTML kood.Kopeeri ja kleebi järgmine kood oma veebilehele.Muuda nimed kajastada oma tegelikku klasside ja lisage sisuelemente vastavalt soovile.

    & lt; html & gt;

    & amp; lt; head & gt;
    & amp; lt; link rel = & amp; quot; laaditabeli & amp; quot;href = & amp; quot; layout.css & amp; quot;... / & Gt;
    & amp; lt; / head & gt;
    & amp; lt; body & gt;
    & amp; lt; div class = & amp; quot; konteiner & amp; quot; & gt;
    & amp; lt; p & gt; Web Content & amp; lt; / p & gt;
    & amp; lt; div class = & amp; quot; extender & amp; quot; & gt; & amp; lt; / div & gt;
    & amp; lt; / div & gt;
    & amp; lt; div class = & amp; quot; jalus & amp; quot; & gt;
    & amp; lt; p & gt; jalus Content & amp; lt; / p & gt;
    & amp; lt; / div & gt;
    & amp; lt; / body & gt;

    & lt; / html & gt;

802
0
1
Html