HTML-kode til Scrolling Text

HTML-kode til Scrolling Text


En af de mest nyttige snippets, du kan have, er HTML-koden for rulletekst. Det strammer op præsentationen af ​​dit indhold og er meget let at gennemføre uden megen kodning overhovedet.

Grundlæggende HTML-kode til Scrolling Text

Strengt taget er det ikke ren HTML-kode, der i øjeblikket anvendes til denne effekt. Det er virkelig falder i realm af cascading style sheets, ved hjælp af en <div> tag og tilhørende egenskaber såsom "overløb". Men da du kan indstille alle de egenskaber direkte i HTML på din side, det tæller; bare indse, at du måske ønsker at sætte dette i et særskilt .css dokument, hvis du planlægger at bruge en masse tekstbokse med rullepaneler.

Først kodeksen

Her er den grundlæggende syntaks for en rulletekst box:

<Div style = "height: 150px; width: 225px; font: 16px / 26px Georgien, Garamond, Serif; overflow: rul;">
Det er her, din tekst går. Rullepanelerne vises kun, når teksten faktisk går videre end grænserne for den boks, du definerede.
</ Div>

Nu, for at forstå koden, er det vigtigt at indse, at det hele er lukket først og fremmest i en <div>. Det er, hvad definerer det område af denne særlige tekstfelt, og hvis du ikke definere grænserne så browseren simpelthen gør grænserne så store som de kan være. Da dette nederlag formålet med en rulletekst kasse, skal du definere størrelsen ved at bruge "height" og "bredde" egenskaber (i dette tilfælde 150 pixels høj, 225 pixels bred). Du vil opdage, at efter hver ejendom, er den værdi, gives efter et kolon, og efter både ejendom og værdi er defineret, er et semikolon sat i bagefter. Det er vigtigt at medtage disse, selv for den sidste ejendom, eller CSS vil ikke fungere.

Den næste ejendom efter størrelse er skrifttypen. Du vil måske bemærke, at mens størrelse, line højde og skrifttype er defineret, er ingen af ​​disse ord anvendes. Dette er en af ​​de fremskridt inden for HTML 5.0 og CSS. Nogle egenskaber er defineret uden at skulle stave dem ud.

Sidste ejendom <div> er et eksempel: "overløb: rul". Det fortæller den <div> kasse, hvad de skal gøre, hvis teksten i udslip ud over grænserne defineret af højde og bredde. I dette tilfælde er det meningen at sætte et rullepanel på venstre side for at gøre det muligt for seeren at læse hele teksten. Bemærk, at du ikke behøver at fortælle browseren, hvor at sætte rullepanelet; det misligholdt til højre. Hvad hvis du ønskede rullepanelet til at være vandret på bunden? Du skal blot blive mere specifik sige "overflow-x: rulle" (som angiver den vandrette eller "x" akse).

Andre variationer

Der er mange andre egenskaber, som du kan bruge til at tilpasse <div>, og derfor gøre din rulletekst box ser nøjagtig som du vil have:

  • Baggrund: Du kan bestemme en baggrundsfarve ved hjælp hexadecimal eller andre farvekoder
  • Baggrundsbillede: For mere tekstur kan du bruge et baggrundsbillede, selv styrer X og Y gentagne værdier.
  • Border: Modregning tekstboksen med en kant stylet som en linje, bindestreg, indpresningsdybde eller anden variant er også muligt.

Flere typer af kode kan bringes i at bruge andre CSS og HTML egenskaber, som defineret i sites som Page ressourcer eller Quackit.

Marquee: Den Anden Scrolling Text

Der er en anden form for rulletekst, der sjældent bruges mere, fordi, ligesom blink tag, blev det anset for at være irriterende for øjet. Men den <MARQUEE> tag kan bruges meget ligesom <div> tag, herunder fastsættelse af egenskaber såsom:

  • Behavior: slide, rulle, suppleant
  • Retning: venstre, højre, op, ned
  • ScrollAmount: denne værdi angiver hastighed, hvor 1 er langsom og 20 at være hurtig.

Quackit.com har en fuld gennemgang af gennemførelsen af ​​denne form for HTML-kode til rulletekst, herunder et link til Falling Tekst Generator. Men selv denne form for rulletekst kan synes cool at begynde med, det bliver hurtigt irriterende for brugeren på dit websted.

På den anden side, ved hjælp af <div> til at holde indholdet af dit websted stramt lagt ud vil gøre dit websted meget mere professionelt udseende og lettere for brugeren at forstå. Forståelse koden er et centralt trin i enhver udvikler uddannelse.