Selv om HyperText Markup Language( HTML) gir en tag som lager en horisontal divider, er det ikke et tilsvarende element som skaper en vertikal linje. Et behov for vertikal form oppstår ofte, så dette skaper et dilemma. Heldigvis har du muligheten til å bruke en løsning som inkorporerer et HTML-tabell og bruker Cascading Style Sheets( CSS) -koden til en kantlinje. Forstå hvordan du oppretter HTML-koden, og bruk CSS-regelen som med hell gjør en vertikal, solid linje.

Instruksjoner

  1. Start Notisblokk tekstredigeringsprogramvaren, som følger med Windows-datamaskinen, og åpne et nettstedsdokument.

  2. Plasser markøren i ønsket område der du vil at den solide linjen skal vises. Skriv inn HTML-koden som lager et enkelt bord:

    & lt; table & gt;

    & lt; tr & gt;

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

    & lt; / tr & gt;

    & lt; / table & gt;

  3. Skriv inn følgende kode før avsluttende "& lt; / head & gt;"element for å lage din CSS-stilregel for bo

    rdet ditt:

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

    & lt;! -

    tabell{ }

    - & gt;

    & lt; / style & gt;

  4. Skriv inn "border-left:;"eller "border-right:;"mellom de krøllete parentesene for å avgjøre om linjen din vises til venstre eller høyre, og skriv inn "solid" etter at kolon å spesifisere dette er hvordan linjen din skal vises. Skriv inn et tall i piksler( px) for å bestemme hvor bred den vertikale linjen er, og skriv inn en farge, for eksempel svart, for å angi skyggen av linjen. For å illustrere:

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

  5. Type "høyde:;"og skriv inn en tallverdi i piksler( px) eller prosentandel( %) for å bestemme hvor lenge linjen er. For eksempel:

    tabell{ grense-venstre: 1px solid svart;høyde: 300px;}

  6. Lagre filen din.Åpne den i et nettleservindu ved å klikke på "Åpne" eller "Åpne fil" -alternativet under nettleserens "Fil" -meny. Hvis du er fornøyd med den vertikale linjen, last opp filen til webverten din for å publisere den. Ellers foretar du justeringer av verdiene i stilregelen din før du lagrer og laster den opp til verten din.

Ressurser

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