HTML opetusohjelma lisääminen vasemmassa

Ottaa vasemmassa palkissa sivuston avulla käyttäjä voi palataedelliselle sivulle ja helpottaa navigointia . internet - eingabefeld internet http: // www kuva PM Valokuvan Fotolia.com

kyky siirtyä edellisen Web-sivun vallitsee kaikki selaimet oletusarvoisesti.Kuitenkin tarjoamalla osa, joka mahdollistaa pääsyn useita sivuja koko sivuston One kätevä valikosta web-suunnittelija voi yksinkertaistaa navigointia käyttäjille.

mitä tarvitset

  • tekstieditorissa (kuten Muistiossa)
  • Web-selain

Ohjeet

  1. Avaa Muistio, ja perusti HTML-tiedoston seuraava koodi:

    & lt; html & gt;
    & lt; head & gt;

    & lt; / tyyli & gt;
    & lt; / head & gt;

    & lt; body & gt;
    & lt; div id = \ "navigointi \" & gt;

    & amp; lt; a href = \ & amp; quot; \ & amp; quot; & gt; navigointialkioiden 1 & amp; lt; / a & gt;
    & amp; lt; a href = \ & amp; quot; \ & amp; quot; & gt; navigointialkioiden 2 & amp; lt; / a & gt;
    & amp; lt; a href = \ & amp; quot; \ & amp; quot; & gt; navigointialkioiden 3 & amp; lt; / a & gt;
    & amp; lt; a href = \ & amp; quot; \ & amp; quot; & gt; navigointialkioiden 4 & amp; lt; / a
    & gt;

    & lt; / div & gt;
    & lt; / body & gt;

    & lt; / html & gt;

    & lt; div id = \ "navigointi \" & gt; & lt; / div & gt;tagit erottaa navigointi kohdat erityistä sisältöä, joka putoaa siirtymisruudussa.

  2. Lisää tyylitiedoston koodi & lt; head & gt; & lt; / head & gt;tunnisteita, kuten seuraavat:

    & lt; style rel = \ "stylesheet \" type = \ "text / css \" & gt;
    div # navigointi {
    float: left
    GO
    leveys: 100px
    GO
    korkeus: 100%
    GO
    väri: #FFFFFF
    GO
    background-color: # 666
    GO
    padding: 5px
    GO
    }
    & lt; / tyyli & gt;

    tyylisivu tiedot sanelee miten tiedot navigointi & lt; div & gt; & lt; / div & gt;tunnisteet näkyvät.Pohjimmiltaan tyylisivun koodin luo \ "laatikko \", joka sisältää mitään navigointi tunnisteet.Joten, kaikki tiedot näissä tunnisteet mukaiseksi tyyliin tyylisivun tiedot annetaan ulos.\ "Float \" määrite tyylisivun kertoo selaimelle, että navigointi osio \ "float \" vasemmalla puolella muuta sisältöä.\ "Width \" ominaisuus varmistaa, että laatikon ympärillä navigointi kohteet yöpyä 100-pikseliä leveä.

  3. Tallenna tiedosto HTML-tiedosto valitsemalla \ "Tiedosto \" sitten \ "Tallenna nimellä ... \" Vuonna tiedostonimi -tekstiruutuun nimi tiedoston html laajennus.Tiedoston pitäisi näyttää tältä:

    & lt; html & gt;
    & lt; head & gt;
    & lt; title & gt; & lt; / title & gt;
    & lt; meta http-ekv = \ "Content-Type \" content = \ "text / html; charset = iso-8859-1 \" & gt;
    & lt; style rel = \ "stylesheet \" type = \ "text / css \" & gt;
    div # navigointi {
    float: left
    GO
    leveys: 100px
    GO
    korkeus: 100%
    GO
    väri: #FFFFFF
    GO
    background-color: # 666
    GO
    padding: 5px
    GO
    }

    & lt; / tyyli & gt;
    & lt; / head & gt;

    & lt; body & gt;
    & lt; div id = \ "navigointi \" & gt;

    & amp; lt; a href = \ & amp; quot; \ & amp; quot; & gt; navigointialkioiden 1 & amp; lt; / a & gt;
    & amp; lt; a href = \ & amp; quot; \ & amp; quot; & gt; navigointialkioiden 2 & amp; lt; / a & gt;
    & amp; lt; a href = \ & amp; quot; \ & amp; quot; & gt; navigointialkioiden 3 & amp; lt; / a & gt;
    & amp; lt; a href = \ & amp; quot; \ & amp; quot; & gt; navigointialkioiden 4 & amp; lt; / a & gt;

    & lt; / div & gt;
    & lt; / body & gt;

    & lt; / html & gt;

  4. Avaa tiedosto Web-selaimessa.Navigointi kohteita pitäisi yhdenmukaistaa vasemmalle puolelle.Navigointi & lt; div & gt;tagit nyt toimivat vasemmanpuoleista navigointipaneeli.

Resurssit

  • W3C Koulut: HTML Tutorial
  • W3C Koulut: CSS Tutorial
  • Ilmainen CSS Templates
690
0
3
Ohjelmointikieltä