Mimo że HyperText Markup Language( HTML) udostępnia znacznik tworzący poziomy separator, nie ma równoważnego elementu, który tworzy pionową linię.Często pojawia się potrzeba pionowego kształtu, a to stwarza dylemat. Na szczęście istnieje opcja użycia obejścia, które zawiera tabelę HTML i stosuje kod CSS( kaskadowe arkusze stylów) do granicy. Dowiedz się, jak utworzyć kod HTML i zastosować regułę CSS, która z powodzeniem tworzy pionową, ciągłą linię.

Instrukcje

  1. Uruchom oprogramowanie edytora tekstu, dołączone do komputera z systemem Windows, i otwórz dokument witryny.

  2. Ustaw kursor w żądanym obszarze, w którym ma się pojawić linia ciągła. Wprowadź kod HTML, który tworzy prostą tabelę:

    & lt; table & gt;

    & lt; tr & gt;

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

    & lt; / tr & gt;

    & lt; / table & gt;

  3. Wpisz następujący kod przed zamknięciem "& lt; / head & gt;"element, aby utworzyć regułę stylu CSS dla tabeli:

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

    & lt;! -

    table{ }

    - & gt;

    & lt; / style & gt;

  4. Wprowadź "border-left:;"lub "border-right:;"między nawiasami klamrowymi, aby określić, czy linia pojawia się po lewej, czy po prawej stronie, i po dwukropku wprowadź "stałe", aby określić, w jaki sposób linia powinna się pojawić.Wpisz liczbę w pikselach( px), aby określić szerokość pionowej linii, i wprowadź kolor, na przykład czarny, aby określić odcień linii. Aby to zilustrować:

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

  5. Typ "height:;"i wpisz wartość liczbową w pikselach( px) lub procentowo( %), aby określić długość linii. Na przykład:

    table{ border-left: 1px solid black;wysokość: 300 pikseli;}

  6. Zapisz plik. Otwórz go w oknie przeglądarki, klikając opcję "Otwórz" lub "Otwórz plik" w menu "Plik" przeglądarki. Jeśli jesteś zadowolony z linii pionowej, prześlij plik do swojego hosta internetowego, aby go opublikować.W przeciwnym razie dostosuj wartości w swojej regule stylów przed zapisaniem i przesłaniem do hosta.

Zasoby

  • Tizag: samouczek CSS - Border
  • World Wide Web Consortium( W3C): Box Model
  • World Wide Web Consortium( W3C): Począwszy od HTML + CSS