Obwohl HyperText Markup Language( HTML) ein Tag bereitstellt, das einen horizontalen Teiler erstellt, gibt es kein äquivalentes Element, das eine vertikale Linie erstellt. Oft entsteht eine Notwendigkeit für eine vertikale Form, so dass dies zu einem Dilemma führt. Glücklicherweise haben Sie die Möglichkeit, eine Problemumgehung zu verwenden, die eine HTML-Tabelle enthält und CSS-Code( Cascading Style Sheets) auf einen Rahmen anwendet. Verstehen Sie, wie Sie den HTML-Code erstellen und die CSS-Regel anwenden, die erfolgreich eine vertikale, durchgezogene Linie erzeugt.

Anweisungen

  1. Starten Sie die Notepad-Texteditor-Software, die mit Ihrem Windows-Computer geliefert wird, und öffnen Sie ein Website-Dokument.

  2. Positionieren Sie den Cursor im gewünschten Bereich, in dem die durchgezogene Linie angezeigt werden soll. Geben Sie den HTML-Code ein, der eine einfache Tabelle erstellt:

    & lt; table & gt;

    & lt; tr & gt;

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

    & lt; / tr & gt;

    & lt; / table & gt;

  3. Geben Sie den folgenden Code vor dem Schließen "& lt; / head & gt;"Element zum Erstellen Ihrer CSS-Stilregel für Ihre Tabelle:

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

    & lt;! -

    Tabelle{ }

    - & gt;

    & lt; / style & gt;

  4. Geben Sie "border-left:;"oder "Grenze-rechts:;"zwischen den geschweiften Klammern, um zu bestimmen, ob Ihre Linie links oder rechts erscheint, und geben Sie "solid" nach dem Doppelpunkt ein, um anzugeben, wie Ihre Linie aussehen soll. Geben Sie eine Zahl in Pixeln( px) ein, um zu bestimmen, wie breit die vertikale Linie ist, und geben Sie eine Farbe ein, z. B. schwarz, um die Schattierung der Linie festzulegen. Zur Veranschaulichung:

    Tabelle{ border-left: 1px einfarbig schwarz;}

  5. Typ "Höhe:;"und geben Sie einen Zahlenwert in Pixel( px) oder Prozentsatz( %) ein, um zu bestimmen, wie lang die Linie ist. Zum Beispiel:

    tabelle{ border-left: 1px einfarbig schwarz;Höhe: 300px;}

  6. Speichern Sie Ihre Datei.Öffnen Sie es in einem Browserfenster, indem Sie im Menü "Datei" des Browsers auf die Option "Öffnen" oder "Datei öffnen" klicken. Wenn Sie mit der vertikalen Linie zufrieden sind, laden Sie die Datei zur Veröffentlichung auf Ihren Web-Host hoch. Andernfalls ändern Sie die Werte in Ihrer Stilregel, bevor Sie sie auf Ihrem Host speichern und hochladen.

Ressourcen

  • Tizag: CSS Tutorial - Border
  • World Wide Web Consortium( W3C): Boxmodell
  • World Wide Web Consortium( W3C): Beginnend mit HTML + CSS