Selvom HyperText Markup Language( HTML) giver et tag, der opretter en vandret divider, er der ikke et tilsvarende element, der skaber en lodret linje. Et behov for en vertikal form opstår ofte, så dette skaber et dilemma. Heldigvis har du mulighed for at bruge en løsning, der indeholder et HTML-bord og anvender Cascading Style Sheets( CSS) -koden til en grænse. Forstå, hvordan man opretter HTML-koden og anvende CSS-reglen, der med succes skaber en lodret, solid linje.

Instruktioner

  1. Start Notepad-tekstredigeringssoftwaren, der følger med din Windows-computer, og åbn et website-dokument.

  2. Placer markøren i det ønskede område, hvor du vil have den solide linje vist. Indtast HTML-koden, der opretter et simpelt bord:

    & lt; table & gt;

    & lt; tr & gt;

    & lt; td & gt; / td & gt;

    & lt; / tr & gt;

    & lt; / table & gt;

  3. Indtast følgende kode før lukningen "& lt; / head & gt;"element til at oprette din CSS-stilregel for di

    t bord:

    & lt; style type = "text / css" & gt;

    & lt;! -

    tabel{ }

    - & gt;

    & lt; / style & gt;

  4. Indtast "grænse-venstre:;"eller "grænse-højre:;"mellem de krøllede parenteser for at afgøre, om din linje vises til venstre eller højre og indtast "solid" efter kolon at angive dette, hvordan din linje skal vises. Indtast et tal i pixel( px) for at bestemme, hvor bredt den lodrette linje er, og indtast en farve, f.eks. Sort, for at angive skyggen af ​​linjen. For at illustrere:

    bord{ border-left: 1px solid black;}

  5. Type "højde:;"og skriv en talværdi i pixels( px) eller procent( %) for at bestemme, hvor længe linjen er. For eksempel:

    bord{ grænse-venstre: 1px solid black;højde: 300px;}

  6. Gem din fil.Åbn den i et browservindue ved at klikke på "Åbn" eller "Åbn fil" -indstillingen under browserens "Fil" -menu. Hvis du er tilfreds med den lodrette linje, skal du uploade filen til din webhost for at offentliggøre den. Ellers skal du foretage justeringer af værdierne i din stilregel, før du gemmer og uploader den til din vært.

Ressourcer

  • Tizag: CSS Tutorial - Border
  • World Wide Web Consortium( W3C): Box Model
  • World Wide Web Consortium( W3C): Begyndende med HTML + CSS