Kaip pridėti horizontalią liniją prie HTML

Autorius: Virginia Floyd
Kūrybos Data: 14 Rugpjūtis 2021
Atnaujinimo Data: 1 Liepos Mėn 2024
Anonim
Control 32 Servo over Wi-Fi using ESP32 and PCA9685 via desktop or mobile phone V5
Video.: Control 32 Servo over Wi-Fi using ESP32 and PCA9685 via desktop or mobile phone V5

Turinys

Šis straipsnis parodys, kaip pridėti horizontalią liniją HTML. Horizontali linija gali būti naudojama svetainės turiniui atskirti. Eilutės kūrimo kodas yra gana paprastas. Tačiau naudojant HTML 4.01 galima pakeisti eilutės dizainą naudojant vidines komandas. Naudodami HTML5, turėsite naudoti CSS, kad sukurtumėte eilutės stilių.

Žingsniai

1 metodas iš 2: darbas HTML 4.01

  1. 1 Atidarykite esamą arba sukurkite naują HTML dokumentą. HTML dokumentus galima redaguoti naudojant teksto redaktorių, pvz., „Notepad“, arba specializuotą kodų redaktorių, pvz., „Adobe Dreamweaver“. Norėdami atidaryti HTML dokumentą pasirinktoje programoje, atlikite šiuos veiksmus:
    • Atidarykite „Notepad“ arba kitą teksto / kodo redaktorių.
    • Atidarykite meniu Failas.
    • Spustelėkite Atviras.
    • Pasirinkite HTML failą.
    • Spustelėkite Atviras
  2. 2 Pasirinkite vietą, kur norite įterpti eilutę. Slinkite žemyn, kol rasite eilutę, virš kurios turėtų būti rodoma eilutė, tada perkelkite žymeklį tiesiai į tos eilutės pradžią spustelėdami tolimiausią kairės eilutės dalį.
  3. 3 Pridėkite tuščią eilutę. Dukart paspausti Įeikitenorėdami pereiti žemyn tekstu, prieš kurį norite įterpti eilutę, ir tada užveskite žymeklį ant tuščios eilutės.
  4. 4 Pridėti žymą hr>. Įveskite val.> į tuščią vietą eilutės pradžioje. Žymėti val.> leidžia nubrėžti horizontalią liniją visame puslapyje.
  5. 5 Perkelkite žymeklį po žymos „hr“ į naują eilutę paspausdami Įeikite. Dabar etiketė val.> turėtų būti atskiroje eilutėje.
  6. 6 Pridėkite atributus prie horizontalios linijos (neprivaloma). Pridėkite tokius atributus kaip ilgis, storis, spalva ir lygiavimas. Įdėkite juos į garbanotas petnešas iškart po „valandos“. Jei norite pridėti kelis atributus, atskirkite juos tarpais.
    • Įveskite hr size = "#">pakeisti linijos storį. Pakeiskite „#“ skaitine storio reikšme (pvz., Dydis = „10“).
    • Įveskite hr width = "#">pakeisti linijos plotį. Pakeiskite „#“ taškų skaičiumi arba puslapio pločio procentine dalimi (pvz., Plotis = „200“ arba plotis = „75%“).
    • Įveskite hr color = "#">pakeisti linijos spalvą. Pakeiskite „#“ spalvos pavadinimu arba šešioliktainiu kodu (pvz., Spalva = „raudona“ arba spalva = „# FF0000“).
    • Įveskite hr align = "#">išlyginti liniją. „#“ Pakeiskite „dešine“ (dešinė), „kairė“ (kairė) arba „centras“ (centras) (pvz., hr width = "50%" align = "centre">).
  7. 7 Išsaugokite HTML failą. Norėdami išsaugoti tekstinį failą kaip HTML dokumentą, turite pakeisti failo plėtinį (.txt, .docx) į „.html“. Norėdami išsaugoti HTML dokumentą, atlikite šiuos veiksmus:
    • Atidarykite meniu Failas.
    • Spustelėkite Išsaugoti kaip.
    • Lauke Failo pavadinimas įveskite failo pavadinimą.
    • Papildyti .html po failo pavadinimo.
    • Spustelėkite Sutaupyti.
  8. 8 Patikrinkite savo HTML dokumentą. Norėdami patikrinti HTML failą, dešiniuoju pelės mygtuku spustelėkite jį ir pasirinkite Atidaryti naudojant. Tada pasirinkite savo interneto naršyklę. Toje vietoje, kur įterpėte žymą „hr“, turėtų atsirasti vientisa linija. HTML kodas atrodys maždaug taip:

      ! DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> Ši eilutė nuo antraštės turi būti atskirta eilute . / P1> / body> / html>

2 metodas iš 2: darbas CSS / HTML5

  1. 1 Atidarykite esamą arba sukurkite naują HTML dokumentą. HTML dokumentus galima redaguoti naudojant teksto redaktorių, pvz., „Notepad“, arba specializuotą kodų redaktorių, pvz., „Adobe Dreamweaver“. Norėdami atidaryti HTML dokumentą pasirinktoje programoje, atlikite šiuos veiksmus:
    • Atidarykite „Notepad“ arba kitą teksto / kodo redaktorių.
    • Atidarykite meniu Failas.
    • Spustelėkite Atviras.
    • Pasirinkite HTML failą.
    • Spustelėkite Atviras
  2. 2 Pridėkite pavadinimą prie HTML dokumento. Jei jūsų HTML dokumente dar nėra antraštės, atlikite šiuos veiksmus, kad ją pridėtumėte. Antraštė turi būti po html> žymos ir prieš body> tag.
    • Įveskite galva> dokumento viršuje.
    • Dukart paspausti Įeikitepridėti dvi naujas eilutes.
    • Įveskite / galva>pavadinimui uždaryti.
  3. 3 Įveskite stiliaus tipas = "text / css"> antraštės viduje. Stiliaus žyma dedama tarp dviejų antraščių žymų, kad būtų sukurta vieta, kurioje galite naudoti CSS, kad pakeistumėte HTML dizainą.
    • Arba galite naudoti išorinį stiliaus lapą. Perskaityk straipsnį "Kaip įterpti CSS failą į HTML»Norėdami sužinoti, kaip susieti išorinį CSS failą su HTML failu.
  4. 4 Įveskite val {. Tai CSS žyma formuojant horizontalią liniją. Pridėkite jį po žyma „style“ antraštėje arba išoriniame CSS faile.
  5. 5 Pridėkite žymos hr> CSS stilių. Jie turi būti po žymos „hr {“. Horizontalią liniją galima formuoti įvairiais būdais. Žemiau yra keletas iš jų.
    • Įveskite plotis: ## px;reguliuoti linijos plotį. „##“ pakeiskite linijos pločiu pikseliais. Vietoj pikselių (px) galite naudoti procentą (%).
    • Įveskite aukštis: ## px;reguliuoti linijos svorį. „##“ pakeiskite linijos pločiu pikseliais.
    • Įveskite fono spalva: ##;nurodyti linijos spalvą. Pakeiskite „##“ spalvos pavadinimu arba maiša (#), po kurios eina šešioliktainis spalvų kodas.
    • Įveskite paraštė-dešinė: ## px;norėdami nurodyti pikselių skaičių nuo dešiniojo krašto. Pakeiskite „##“ skaitmeniniu pikselių skaičiumi arba kodu „auto“. Įveskite „auto“, kad sulygiuotumėte liniją į kairę arba centrą.
    • Įveskite paraštė kairėn: ## px;norėdami nurodyti pikselių skaičių nuo kairiojo krašto. Pakeiskite „##“ skaitmeniniu pikselių skaičiumi arba kodu „auto“. Norėdami sulygiuoti liniją į dešinę arba į centrą, įveskite „auto“.
    • Įveskite margin-top: ## px; nurodyti viršutinį linijos paminkštinimą. „##“ pakeiskite skaičiumi, atitinkančiu užpildymą taškais.
    • Įveskite paraštė-apačia: ## px;nurodyti apatinį linijos paminkštinimą. „##“ pakeiskite skaičiumi, atitinkančiu užpildymą taškais.
    • Įveskite border-width: ## px;norėdami nubrėžti langelį aplink liniją (neprivaloma). „##“ pakeiskite skaičiumi, atitinkančiu kraštinės plotį taškais.
    • Įveskite border-color: ##;nurodyti kraštinės spalvą (neprivaloma). Pakeiskite „##“ spalvos pavadinimu arba maiša (#), po kurios eina šešioliktainis spalvų kodas.
  6. 6 Įveskite } po stiliaus atributų, kad užbaigtumėte žymės hr> stilių.
  7. 7 Įveskite val.> bet kurioje HTML dokumento kūno dalyje, kad pridėtumėte horizontalią liniją. CSS stiliaus nustatymai bus taikomi kiekvieną kartą, kai HTML dokumente naudosite žymą> hr>. Jūsų kodas turėtų atrodyti maždaug taip:

      ! DOCTYPE html> html> head> style type = "text / css"> hr {plotis: 50%; aukštis: 20 taškų; fono spalva: raudona; paraštė-dešinė: auto; paraštė kairėn: automatinė; viršutinė paraštė: 5 taškų; paraštė-apačia: 5 taškų; ribos plotis: 2 taškai; apvado spalva: žalia; } / style> / head> body> h1> Antraštė / h1> hr> p1> Ši eilutė turėtų būti atskirta nuo antraštės horizontalia linija / p1> / body> / html>