Kuidas luua läbipaistva veebilehe Nav Bar

Suunates oma navigeerimisriba teatud viisil, saate tugevdada oma ettevõtte brändi ja disaini. Kasutades HTML- ja CSS-koodide (Cascading Style Sheet) kombinatsiooni navigeerimisriba väljanägemise dikteerimiseks, saate luua oma saidil ühtse ilme. Kui otsustate muuta navigeerimisriba läbipaistvaks, tähendab see, et see on sama värvi kui tausta sisaldava elemendi taust või taust.

1.

Looge oma navigeerimisribale HTML-osa. Leidke selle lehe HTML-failis, kuhu töötate, jaotise, kuhu soovite navigeerimisriba lisada. Kasutage seda elementi järgmiselt:

Avamise ja sulgemise märgendite vahel saate paigutada oma navigatsioonilinkid.

2.

Lisage igale vajalikule navigatsioonilinkile ankurelement. "Nav" elemendi sees lisage igale lingile ankurelement, mida soovite kasutajatel sirvida. Alljärgnevalt on näidatud ankurelement, mis ühendab saidi sektsiooni:

Umbes

See viitab saidi sektsioonile, mis asub kaustas nimega "umbes", mis asub samas kataloogis kui see kood, mida see kood kuvab. Et linkida pigem leheküljega kui kausta, peaks märgistus HTML-i jaoks olema järgmine. :

Umbes

3.

Lisage oma lehele stiiliosa. Navigeerimisriba kujundamiseks on vaja CSS-koodi jaotist. Lisage oma lehe peaosas enne sulgemiskoodi järgmine:

Selle sees saate lisada oma lehekülje elementide kujundamiseks deklaratsioone.

4.

Stiilige ankrud. Lisage oma lehe CSS jaotises oma navigeerimisriba ankrute stiilimiseks deklaratsioonid. Näiteks selleks, et kujundada kõik "nav" -is olevad ankurelemendid oma ID-atribuutiks, saate kasutada järgmisi valikuid:

nav a: link, #nav a: külastatud, #nav a: hover {

/ stiilideklaratsioonid /

}

See näitab ankrute olemasolu kõigis riikides. Selles sektsioonis saate lisada mis tahes stiilideklaratsioonid, mida soovite jõustada, näiteks:

teksti kaunistus: mitte; laius: 100 px; kuva: plokk; float: vasakule;

Need on standardsed omadused ankrute horisontaalsel joonel üksteise kõrval kuvamiseks. Elemendi enda kujundamiseks kasutage järgmist süntaksit:

nav {

laius: 800 px; }

5.

Stiili taust. Kui te CSS-is ei rakenda oma navigeerimisribale taustainfot, kuvatakse see vaikimisi läbipaistva taustaga. See võib siiski ilmuda lehekülje taustaga või selle taga oleva muu elemendiga. Näiteks põhjustab kehaelemendi järgmine CSS-deklaratsioon taustapildi kuvamise navigeerimisriba taha:

keha {taust-pilt: url ("bgpic.jpg"); }

Kui te ei määra navigeerimisriba taustapilti või värvi, peaks see kuvama läbipaistva taustaga.

Vihje

  • CSS3-ga kaasnevate arengute abil saate oma lehekülgedel kasutada läbipaistmatust ja läbipaistvust.

Hoiatus

  • Isegi kui te ei näita oma navigeerimisriba CSS-i taustainfot, võib teine ​​CSS-kood määrata ühe, näiteks lehe kõigi elementide taustaks.
 

Jäta Oma Kommentaar