Voit luoda kätevän ja intuitiivisen navigoinnin sivustolle linkkien avulla. Tämän tekniikan avulla voit tehdä käyttäjän oleskelusta resurssisivuilla mahdollisimman mukavan.
Ohjeet
Vaihe 1
Kaikki linkit luodaan käyttämällä tagia, joka on suljettava. Sivun osoite ilmoitetaan lainausmerkeissä href-määritteen jälkeen. Tuloksen pitäisi olla jotain tällaista:
Verkkosivusto
Siirry kuvagalleriaan
Jos haluat siirtyä Internet-tilassa olevalle sivulle, ilmoita sen osoite, esimerkiksi KakProsto.ru. Yhdistä tietokoneesi html-tiedostoon kirjoittamalla sen polku. Ihannetapauksessa on suositeltavaa vaihtaa englantiin, jotta vältetään pitkät tietueet, jotka syntyvät kopioimalla venäjänkielinen teksti ja sen myöhempi käännös tarvittavaan muotoon. Esimerkiksi tiedosto: /// E: /% D0% A3% D1% 87% D0% B5% D0% B1% D0% B0 / XXX% 20% D0% BF% D0% B0% D0% BF% D0% BA% D0% B0 /% D1% 81% D0% B0% D0% B9% D1% 82% 29% 29% 29/11% 20% D1% 81% D1% 82% D1% 80% 20% D1% 80 % D0% B0% D0% B7% D0% BD% D0% BE% D0% B5 /% D0% BE% D0% B1% D0% BE% 20% D0% B2% D1% 81% D0% B5% D0% BC% 20% D0% B3% D0% BB% D0% B0% D0% B2% D0% BD% D0% B0% D1% 8F.html"
Vaihe 2
Linkki voidaan asettaa kuvan muodossa. Tee tämä liittämällä kuva tunnisteiden ja: väliin. Jos haluat avata täysikokoisen suuremman kuvan, kun viet hiiren osoittimen pienen kuvakkeen päälle, sinun on käytettävä joukkoa.
Järjestä vaihtoehtoinen kuvamuutos, joka kukin esitetään linkkinä ja johtaa eri sivuille, käyttämällä koodia:
Verkkosivusto
div # rotaattori {sijainti: suhteellinen; korkeus: 150px; marginaali vasemmalla: 15 kuvapistettä;}
div # rotaattori ul li {kellua: vasen; sijainti: absoluuttinen; list-style: ei mitään;}
div # rotaattori ul li.show {z-indeksi: 500;}
toimi theRotator () {
$ ('div # rotator ul li'). css ({peittävyys: 0.0});
$ ('div # rotator ul li: first'). css ({opasiteetti: 1.0});
setInterval ('kiertää ()', 5000);
}
funktio rotate () {
var current = ($ ('div # rotator ul li.show')? $ ('div # rotator ul li.show'): $ ('div # rotator ul li: first'));
var seuraava = ((current.next (). length)? ((current.next (). hasClass ('show'))? $ ('div # rotator ul li: first'): current.next ()): $ ('div # rotaattori ul li: ensimmäinen'));
// var sibs = current.siblings ();
// var rndNum = Math.floor (Math.random () * sibs.length);
// var seuraava = $ (sibs [rndNum]);
next.css ({peittävyys: 0.0})
.addClass ('show')
.animaattinen ({opasiteetti: 1,0}, 1000);
current.animate ({opasiteetti: 0.0}, 1000)
.removeClass ('show');
};
$ (asiakirja).ready (funktio () {
kiertäjä ();
});
Vaihe 3
Sivu, jolle linkki johtaa, avautuu erillisessä ikkunassa, sinun on lisättävä attribuutti: Go.
Vaihe 4
Jos html-asiakirja on liian pitkä, voit laittaa siihen linkkejä. Esimerkiksi alussa voit tehdä sisällysluettelon, ja kun napsautat tiettyä otsikkoa, käyttäjä siirtyy haluttuun sivun osaan. Tätä varten sinun on rekisteröitävä linkki # -kuvakkeella: Siirry osioon ja luo kirjanmerkit linkkeihin: Osa.
Se näyttää tältä:
Verkkosivusto
Linkki osioon
Osa
