HTML Juhendaja lisamine Left Navigation

Võttes vasakult siirtymispalkista oma veebilehel võimaldab kasutajal pöörduda tagasi eelmisele lehele ja lihtsustab navigeerimist. internetis - eingabefeld internetis http: // www pildi PM Foto Fotolia.com

võime liikuda eelmisele veebilehele eksisteerib kõik brauserid vaikimisi.Kuid andes lõik, mis võimaldab juurdepääsu mitme lehekülje kogu veebilehe ühest mugav menüü web designer saab lihtsustada navigeerimist kasutajad.

, mida te vajate

  • Tekstiredaktor (nt Notepad)
  • veebibrauser

juhised

  1. avatud Notepad ja luua HTML faili järgmised kood:

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

    & lt; / style & gt;
    & lt; / head & gt;

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

    & amp; lt; a href = \ & amp; quot; \ & amp; quot; & gt; Navigation kirje 1 & amp; lt; / a & gt;
    & amp; lt; a href = \ & amp; quot; \ & amp; quot; & gt; Navigation punkt 2 ja amp; lt; / a & gt;
    & amp; lt; a href = \ & amp; quot; \ & amp; quot; & gt; Navigation punkt 3 ja amp; lt; / a & gt;
    & amp; lt; a href = \ & amp; quot; \ & amp; quot; & gt; Navigation punkt 4 ja amp; lt; / a & gt;

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

    & lt; / html & gt;

    -TMR-div id = \ "navigation \" & gt; & lt; / div & gt;sildid eraldi navigatsiooni elemendid, nagu erilist sisu, mis jagunevad navigeerimispaanil.

  2. Lisa laadilehte kood & lt; head & gt; & lt; / head & gt;sildid, nagu järgmised:

    & lt; style rel = \ "laaditabeli \" type = \ "text / css \" & gt;
    div # navigatsiooni {
    float: left
    GO
    laius: 100px
    GO
    kõrgus: 100%
    GO
    värv: #ffffff
    GO
    background-color: # 666
    GO
    polster: 5px
    GO
    }
    & lt; / style & gt;

    Stiil teabelehe dikteerib, kuidas informatsiooni navigation & lt; div & gt; & lt; / div & gt;sildid ilmuvad.Sisuliselt laadilehte kood loob \ "kastis \", mis sisaldab kõike navigatsiooni sildid.Niisiis, mis tahes teavet, mis need sildid vastama stiilis stiil teabelehe näeb välja.Võimalus \ "float \" atribuut laadilehte ütleb brauser et navigatsiooni sektsioon \ "float \" vasakule muu sisu.Võimalus \ "width \" atribuut tagab, et kast ümber navigatsiooni elemendid, jääb 100 pikslit lai.

  3. Salvesta fail HTML-failina, valides \ "File \", siis \ "Save As ... \" In failinime teksti tippige faili nimi koos .html laiendiga.Fail peaks välja nägema selline:

    & 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 = \ "laaditabeli \" type = \ "text / css \" & gt;
    div # navigatsiooni {
    float: left
    GO
    laius: 100px
    GO
    kõrgus: 100%
    GO
    värv: #ffffff
    GO
    background-color: # 666
    GO
    polster: 5px
    GO
    }

    & lt; / style & gt;
    & lt; / head & gt;

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

    & amp; lt; a href = \ & amp; quot; \ & amp; quot; & gt; Navigation kirje 1 & amp; lt; / a & gt;
    & amp; lt; a href = \ & amp; quot; \ & amp; quot; & gt; Navigation punkt 2 ja amp; lt; / a & gt;
    & amp; lt; a href = \ & amp; quot; \ & amp; quot; & gt; Navigation punkt 3 ja amp; lt; / a & gt;
    & amp; lt; a href = \ & amp; quot; \ & amp; quot; & gt; Navigation punkt 4 ja amp; lt; / a & gt;

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

    & lt; / html & gt;

  4. Avage fail veebibrauseris.Navigation teemad peaksid viia vasakule poole.Navigation & lt; div & gt;sildid nüüd olla vasakul külgribaks.

Resources

  • W3C Schools: HTML Õpetus
  • W3C Schools: CSS juhendaja
  • Tasuta CSS Templates
876
0
3
Programmeerimine Keeled