Miten luodaan läpinäkyvä verkkosivustopalkki

Kun suunnittelet navigointipalkkiasi tietyllä tavalla, voit vahvistaa yrityksesi brändäystä ja muotoilua. HTML- ja CSS-koodin (Cascading Style Sheet) yhdistelmän avulla voit määrittää navigointipalkin ulkoasun. Voit luoda yhdenmukaisen ulkoasun ja tuntuman sivustossasi. Jos päätät tehdä navigointipalkin läpinäkyväksi, tämä tarkoittaa, että se on sama väri kuin taustan tai sen sisältävän elementin tausta.

1.

Luo navigointipalkin HTML-osio. Etsi sen sivun HTML-tiedostosta, johon haluat lisätä navigointipalkin. Käytä elementtiä sisältämään se seuraavasti:

Voit avata navigointilinkit avaamisen ja sulkemisen välissä.

2.

Lisää ankkurielementti jokaiselle tarvitsemallesi navigointilinkille. Lisää "nav" -elementin sisällä ankkurielementti jokaiselle linkille, jonka käyttäjät haluavat selata. Seuraavassa on esimerkki ankkurielementistä, joka yhdistää sivuston osioon:

Noin

Tämä linkki sivustossa olevaan osaan, joka sijaitsee kansiossa, jonka nimi on "noin", joka on samassa hakemistossa kuin sivun, johon tämä koodi näkyy. :

Noin

3.

Lisää tyylisivusi sivullesi. Voit suunnitella navigointipalkin CSS-koodia varten. Lisää sivusi pääosaan ennen sulkemistunnistetta seuraava:

Tämän sisällä voit lisätä ilmoituksia, joiden avulla voit muokata sivun elementtejä.

4.

Työnnä ankkurit. Lisää sivusi CSS-osioon ilmoituksia, joilla voit suunnitella ankkureita navigointipalkissa. Esimerkiksi, jos haluat tyyliä kaikki navigaattorin sisällä olevat ankkurielementit ID-attribuuttina, voit käyttää seuraavia valitsimia:

nav a: linkki, #nav a: vieraili, #nav a: hover {

/ tyyli-ilmoitukset /

}

Tämä osoittaa ankkurit kaikissa tiloissa. Tässä osiossa voit lisätä haluamasi tyyli-ilmoitukset, esimerkiksi:

text-decoration: none; leveys: 100px; display: block; float: vasen;

Nämä ovat vakioominaisuuksia, joilla ankkureita voidaan näyttää toisistaan ​​vaakasuoralla viivalla. Jos haluat tyylittää elementin itse, käytä seuraavaa syntaksia:

nav {

leveys: 800px; }

5.

Työnnä taustaa. Jos et käytä taustapohjaa navigointipalkkiin CSS: ssä, se näyttää oletusarvoisesti läpinäkyvän taustan. Se voi kuitenkin näkyä sivun taustalla tai muulla sen sisältävällä elementillä. Esimerkiksi seuraava CSS-ilmoitus kehon elementille aiheuttaa taustakuvan näkymisen navigointipalkin taakse:

runko {tausta-kuva: url ("bgpic.jpg"); }

Ellet määritä navigointipalkin taustakuvaa tai väriä, sen pitäisi näkyä läpinäkyvällä taustalla.

Kärki

  • CSS3: n kehittymisen myötä voit käyttää läpinäkyvyyttä sekä läpinäkyvyyttä sivuillasi.

Varoitus

  • Vaikka et kerro navigointipalkin CSS: n taustamateriaalia, muut CSS-koodit voivat määrittää yhden, esimerkiksi taustan kaikkien sivun elementtien kohdalla.
 

Jätä Kommentti