Sådan opretter du en gennemsigtig webside Nav Bar

Ved at stylere din navigationslinje på en bestemt måde, kan du styrke branding og design til din virksomhed. Ved at bruge en kombination af HTML og CSS (Cascading Style Sheet) kode til at diktere udseendet af din navigationslinje, kan du skabe et ensartet udseende og føle på hele dit websted. Hvis du vælger at gøre navigationslinjen gennemsigtig, betyder det, at den vil have samme farve som baggrunden eller baggrunden for et element, der indeholder det.

1.

Opret en HTML-sektion til din navigationslinje. I HTML-filen for den side, du arbejder med, skal du finde det afsnit, du vil tilføje navigationslinjen til. Brug et element til at indeholde det som følger:

Mellem åbnings- og lukkekoderne kan du placere dine navigationsforbindelser.

2.

Medtag et ankerelement til hvert navigationslink, du har brug for. Inden for "nav" -elementet skal du tilføje et ankerelement for hvert link, du vil have brug for at kunne gennemse til. Følgende er et prøveankerelement, der linker til et webstedssektion:

Om

Dette linker til et afsnit inden for webstedet, der er placeret i en mappe med navnet "om", der er i samme mappe som den side, denne kode vises i. For at linke til en side snarere end en mappe, skal markeringen vises som følger for HTML :

Om

3.

Tilføj en stil sektion til din side. For at navigere i navigationslinjen skal du have en sektion for CSS-kode. I hovedafsnittet på din side, før den afsluttende tag, skal du tilføje en som følger:

Indenfor dette kan du tilføje erklæringer for at indstille elementerne på din side.

4.

Stil ankre. I CSS-sektionen på din side skal du tilføje erklæringer for at forankre ankre i navigationslinjen. For eksempel at indstille alle ankerelementer inde i "nav" som dets id-attribut, kan du bruge følgende selektorer:

nav a: link, #nav a: besøgt, #nav a: hover {

/ stilerklæringer /

}

Dette angiver ankre i alle stater. Inde i dette afsnit kan du tilføje de stilarter du ønsker at håndhæve, for eksempel:

tekst-dekoration: ingen; bredde: 100px; display: block; flyde: venstre;

Disse er standardegenskaber til at vise ankre langs hinanden på en vandret linje. Hvis du vil style selve elementet, skal du bruge følgende syntaks:

nav {

bredde: 800px; }

5.

Stil baggrunden Hvis du ikke anvender en baggrundsegenskab til din navigationslinje i CSS, vises den som standard med en gennemsigtig baggrund. Det kan dog vise sig med baggrunden for siden eller et andet indholdselement bagved det. F.eks. Vil følgende CSS-erklæring for kropselementet få baggrundsbilledet til at blive vist bag navigationslinjen:

krop {baggrundsbillede: url ("bgpic.jpg"); }

Medmindre du angiver enten et baggrundsbillede eller en farve til navigationslinjen, skal den vises med gennemsigtig baggrund.

Tip

  • Med nye udviklinger i CSS3 kan du bruge uigennemsigtighed og gennemsigtighed på dine sider.

Advarsel

  • Selvom du ikke angiver en baggrundsegenskab i CSS til din navigationslinje, kan andre CSS-koder angive en, for eksempel en baggrund for alle elementer på siden.
 

Efterlad Din Kommentar