Även om HyperText Markup Language( HTML) ger en tagg som skapar en horisontell delare, finns det inte ett ekvivalent element som skapar en vertikal linje. Ett behov av en vertikal form uppstår ofta, så det här skapar ett dilemma. Lyckligtvis har du möjlighet att använda en lösning som innehåller en HTML-tabell och tillämpar koden för Cascading Style Sheets( CSS) till en gräns. Förstå hur man skapar HTML-koden och tillämpa CSS-regeln som framgångsrikt gör en vertikal, solid linje.

Instruktioner

  1. Starta Notepad-textredigeringsprogrammet, som medföljer din Windows-dator, och öppna ett webbdokument.

  2. Placera markören i det önskade området där du vill att den soliga linjen ska visas. Ange HTML-koden som skapar en enkel tabell:

    & lt; table & gt;

    & lt; tr & gt;

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

    & lt; / tr & gt;

    & lt; / table & gt;

  3. Skriv följande kod före stängningen "& lt; / head & gt;"element för att skapa din CSS-stilregel

    för ditt bord:

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

    & lt!! -

    tabell{ }

    - & gt;

    & lt; / style & gt;

  4. Ange "border-left:;"eller "border-right:;"mellan de krökta parenteserna för att avgöra om din linje visas till vänster eller höger och skriv in "solid" efter kolon att ange detta är hur din linje ska visas. Skriv ett tal i pixlar( px) för att bestämma hur bred den vertikala linjen är och ange en färg, t.ex. svart, för att ange skuggan av linjen. För att illustrera:

    bord{ gräns-vänster: 1px solid svart;}

  5. Typ "höjd:;"och skriv ett talvärde i pixlar( px) eller procentandel( %) för att bestämma hur länge linjen är. Till exempel:

    -bord{ gräns-vänster: 1px solid svart;höjd: 300px;}

  6. Spara din fil.Öppna den i ett webbläsarfönster genom att klicka på alternativet "Öppna" eller "Öppna fil" under webbläsarens "Arkiv" -meny. Om du är nöjd med den vertikala linjen, ladda upp filen till din webbhotell för att publicera den. Annars gör du justeringar av värdena i din stilregel innan du sparar och laddar upp den till din värd.

Resurser

  • Tizag: CSS Tutorial - Gräns ​​
  • World Wide Web Consortium( W3C): Boxmodell
  • World Wide Web Consortium( W3C): Börjar med HTML + CSS