Nors "HyperText Markup Language"( HTML) pateikia žymą, sukuriančią horizontalųjį daliklį, nėra lygiaverčio elemento, kuris sukuria vertikalią liniją.Dažnai kyla poreikis vertikaliai formuoti, todėl tai sukelia dilemą.Laimei, galite naudoti būdą, kuris apima HTML lentelę, ir taiko kaskadinių stilių lapų( CSS) kodą prie sienos. Supraskite, kaip sukurti HTML kodą ir taikyti CSS taisyklę, kuri sėkmingai atlieka vertikalią, tvirtą eilutę.

Instrukcijos

  1. Paleiskite "Notepad" teksto redagavimo programinę įrangą, kuri yra su jūsų "Windows" kompiuteriu, ir atidarykite svetainės dokumentą.

  2. Nustatykite žymeklį pageidaujamoje srityje, kurioje norite matyti kietą liniją.Įveskite HTML kodą, kuris sukuria paprastą lentelę:

    & lt; table & gt;

    & lt; tr & gt;

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

    & lt; / tr & gt;

  3. Įveskite šį kodą prieš uždarymą "& lt; / head & gt;"elementas, skirtas jūsų stalo CSS stiliaus taisyklėms sukurti:

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

    & lt;! -

    lentelė{ }

    - & gt;

    & lt; / style & gt;

  4. Įveskite "border-left:;"arba "border-right:;"tarp garbanotų skliaustų, kad nustatytumėte, ar jūsų eilutė rodoma kairėje arba dešinėje, ir po to, kai dvitaškis nurodo tai, kaip turi būti rodoma jūsų eilutė, įveskite "solidus".Įveskite skaičių taškais( px), kad nustatytumėte, kiek pločio yra vertikali linija, ir įveskite spalvą, pvz., Juodą, norėdami nurodyti linijos atspalvį.Pavyzdžiui:

    lentelė{ border-left: 1px solid black;}

  5. Tipas "aukštis:;"ir nustatykite, kiek laiko linija yra, skaičių pikseliais( px) arba procentais( %).Pavyzdžiui:

    lentelė{ border-left: 1px solid black;aukštis: 300 pikselių;}

  6. Išsaugokite savo failą.Atidarykite naršyklės langą, spustelėję variantą "Atidaryti" arba "Atidaryti failą" naršyklės meniu "Failas".Jei esate patenkintas vertikalia linija, įkelkite failą į savo žiniatinklio prieglobą, kad jį paskelbtumėte. Priešingu atveju, prieš išsaugodami ir įkeldami savo kompiuterį, atlikite savo stiliaus taisyklės verčių koregavimus.

ištekliai

  • Tizag: CSS Tutorial - pasienio
  • World Wide Web konsorciumas( W3C): dėžutės modelis
  • World Wide Web konsorciumas( W3C): pradedant HTML + CSS