Kuinka laittaaalatunnisteWeb-sivu

Kuinka laittaaalatunnisteWeb-sivu Sean Gallup / Getty Images Uutiset / Getty Images

Useimmat sivustot sisältävät alatunnisteet tietoja, kuten tekijänoikeudet päivämääriä, "meistä" tiedot ja uramahdollisuuksia.Vaikka näyttää siltä, ​​sen pitäisi olla tarpeeksi yksinkertainen sijoittaa kohteita sivun alaosassa, usein tiedot siirtyy koosta riippuen selaimen ja määrän tekstiä.Käyttämällä CSS (CSS) ja divs, voit luoda yksinkertaisen alatunniste joka pysyy alareunassa sivun riippumatta ikkunan koon ja sisällön määrä.

mitä tarvitset

  • -tyylisivueditorin
  • Web-sivun kirjoitettu CSS

Ohjeet

  1. Aseta maavaraa ja säiliöluokan ominaisuuksia.CSS tyylitiedosto asettaa "html" ja "ruumiin" luokkiin 100 prosenttiin korkeuteen.Lisää "kontti" luokka ja aseta min-height 100 prosenttiin, korkeus auto! Tärkeää, korkeus 100 prosenttia ja marginaali 0 auto negatiivinen (alatunniste korkeus).

    Esimerkiksi "html, body {height: 100%;}" ja ".container {min-height: 100%;korkeus: auto! tärkeää;korkeus: 100%;marginaali

    0 auto -35px. "

  2. Lisää kaksi luokkaa varten alatunnisteen.Yksi luokka sisältää varsinaisen alatunnisteen kun taas toinen luokka ulottuu marginaalit yli sivun tehdä tilaa alatunnisteen.Asettaa molemmat näistä luokista samalle korkeudelle.Esimerkiksi ".footer {height: 35px;}" ja ".extender {height: 35px;}"

  3. Katso seuraavasta CSS tyylisivu esimerkki.Kopioi ja liitä seuraava koodi tyylisivu.Muuta nimet ja alatunnisteen korkeus halutulla tavalla.

    {margin: 0;}
    html, body {height: 100%;}
    .wrapper {min-height: 100%;korkeus: auto! tärkeää;korkeus: 100%; margin: 0 auto -35px;}
    .footer {korkeus: 35px;}
    .extender {korkeus: 35px;}

  4. Lisää nämä luokat osaksi web-sivun.Anna div kontti tag avaavan ja loppumerkinnät kehon.Anna sisällön sivun jälkeen säiliönaukko tunnisteen.Lisää div jatke luokan jälkeen sisältö "sulkeminen tag.Sitten astia suljetaan tunnisteen jälkeen jatke päätöskurssi tag.Lisää div alatunnisteen jälkeen säiliön sulkeminen tag.Anna sisällön alatunnisteen.Sulje sitten footer tag.

  5. Katso seuraava HTML-koodia.Kopioi ja liitä seuraava koodi Web-sivuston.Muuta nimet heijastavat todellista luokat ja lisää sisältöä halutulla tavalla.

    & lt; html & gt;

    & amp; lt; head & gt;
    & amp; lt; link rel = & amp; quot; tyylitaulukkoa & amp; quot;href = & amp; quot; layout.css & amp; quot;... / & Gt;
    & amp; lt; / head & gt;
    & amp; lt; body & gt;
    & amp; lt; div class = & amp; quot; kontti & amp; quot; & gt;
    & amp; lt; p & gt; Web Content & amp; lt; / p & gt;
    & amp; lt; div class = & amp; quot; jatke & amp; quot; & gt; & amp; lt; / div & gt;
    & amp; lt; / div & gt;
    & amp; lt; div class = & amp; quot; footer & amp; quot; & gt;
    & amp; lt; p & gt; Footer Content & amp; lt; / p & gt;
    & amp; lt; / div & gt;
    & amp; lt; / body & gt;

    & lt; / html & gt;

830
0
1
Html