Hvordan man laver en DIV en CSS Link

Mens HTML definerer layoutet , CSS styrer udseendet af websider . Comstock / Comstock / Getty Images

DIV tags definerer et rektangulært område inden HTML-sider.CSS (Cascading Style Sheets) er tekstfiler, der styrer designet og udseendet af HTML-sider.For eksempel, "& lt; a & gt;"tag, som bruges til at oprette links er et inline element, mens DIV-tag er en blok niveau element.Så teknisk set div tags må ikke opholde sig anker tags.Den løsning er imidlertid at placere ankerkode inde i DIV tag og strække dimensioner ankerkode passer til størrelsen af ​​DIV tag.

Instruktioner

  1. Åbn HTML-kilden og den tilknyttede CSS kode fil på websiden i forskellige vinduer eller faneblade i en grundlæggende HTMLeller teksteditor som Notesblok.

  2. Find den krævede DIV inden for HTML-kode.Vær opmærksom på den definerede id og / eller klasser for DIV element.

  3. Place et anker tag (link) inden for DIV tag.

  4. Scan CSS-filen for den del, der stilarter den særlige DIV tag.Brug div id eller klasse navne for at finde koden blokken.

  5. Kopier CSS kode blok,

    stilarter særlige DIV og duplikere koden ved at indsætte det lige under originalen.

  6. Placer enkelt tegn "a" mellem div id / klasse og åbning krøllet beslag inden den kopierede kode blokken.Dette vil forvandle den kopierede CSS kode blok fra styling af DIV element i styling anker tag i DIV element.

  7. Indsæt CSS kode line "display: block;"ind i den nyoprettede kode blokken for anker tag.

Tips & amp;Advarsler

  • Anchor tags kan styles til at fremstå som blok-niveau eller layout elementer såsom divs ved hjælp af "display: block;"kode i CSS.Derfor, dens ikke nødvendigt for DIV tag at eksistere, hvis formålet med DIV kun at definere sammenknyttes område.
  • Logisk set kan DIV elementer ikke gøres CSS links.Imidlertid kan anker tags inden DIV elementer strækkes for at passe til størrelsen af ​​beholderen element.
  • Brug CSS grænser i forskellige farver, for både DIV og anker tag, mens test.
  • Lad koden blokken for DIV element blank for at undgå overflødige CSS kode i kilden.Men sørg for den nøjagtige kode findes inden koden blokken for anker tag.
  • CSS kodelinjer slutter med semikolon.Udelade dette, undtagen på en sidste linje i en kode blok, vil skabe uventede fejl.
  • CSS kode blokke er begrænset af krøllede parenteser.Uafsluttede parenteser eller ekstra lukning krøllede parenteser kan bringe ikke kun de særlige kode blokken, men også hele CSS-fil.

Ressourcer

  • WebKreation: At DIV et link;JavaScript vs CSS?
849
0
1
Web Development