Nyieun garis pilari metot dina kaca web kalawan tag HR
Lamun perlu nambahkeun garis horizontal, SEPARATOR-gaya ka situs web, anjeun gaduh sababaraha pilihan. Anjeun bisa nambahkeun payil gambar sabenerna jalma garis ka kaca anjeun, tapi nu bakal merlukeun panyungsi anjeun pikeun meunangkeun tur muka eta file, nu bisa boga dampak negatif kana kinerja situs.
Anjeun bisa nganggo CSS sipat wates pikeun nambahkeun wates nu meta salaku garis boh di luhur atawa di handap unsur, éféktif nyieun garis SEPARATOR Anjeun.
Tungtungna, anjeun tiasa nganggo HTML unsur pikeun aturan horizontal - nu
The horisontal Aturan Unsur
Mun anjeun geus kungsi nempatkeun unsur dina kaca web, anjeun dipikaresep manggihan yén cara standar anu kasebut baris dipintonkeun henteu idéal. Ieu ngandung harti yén anjeun kedah giliran CSS pikeun ngaluyukeun pintonan visual unsur ieu janten dina garis kalawan kumaha rék situs anjeun kasampak.
A tag HR dasar dipintonkeun jalan browser nu hayang nembongkeun eta. panyungsi modéren ilaharna nembongkeun tag HR unstyled kalayan rubak 100%, jangkungna 2px, sarta wates 3D hideung pikeun nyieun jalur.
Di dieu nyaeta conto unsur HR baku atawa anjeun bisa ningali dina gambar ieu sabaraha hiji HR unstyled Sigana di panyungsi modérn.
Lebar tur Jangkungna téh konsisten Meuntas panyungsi
Hijina gaya anu konsisten sakuliah wéb panyungsi anu lebar tur gaya. Ieu nangtukeun sabaraha badag jalur bakal. Mun anjeun teu nangtukeun lebar tur jangkungna lebar standar nyaéta 100% jeung jangkungna standar téh 2px.
Dina conto ieu lebar geus 50% unsur indungna (catetan conto ieu di handap kabéh kaasup gaya inline Dina setting produksi, gaya ieu bakal sabenerna jadi ditulis dina gaya lambar éksternal keur betah manajemén sapanjang sagala kaca anjeun.):
gaya = "lebar: 50%;">
Sarta dina conto ieu jangkungna téh 2em:
gaya = "jangkungna: 2em;">
Ngarobah wates bisa nangtang
Dina panyungsi modéren, browser anu ngawangun garis kucara nyaluyukeun wates. Ku kituna lamun dipiceun wates jeung sipat gaya, garis bakal ngaleungit dina kaca. Salaku bisa ningali (ogé, anjeun moal ningali nanaon, salaku garis bakal siluman) dina conto ieu:
gaya = "wates: taya;">
Nyaluyukeun ukuran wates, warna, sareng gaya bakal nyieun jalur kasampak béda jeung boga pangaruh anu sarua dina sakabéh panyungsi modérn. Contona, dina démo ieu wates nyaéta beureum, dashed, sarta 1px lega:
gaya = "wates: 1px dashed # 000;">
Tapi lamun ngaganti wates jeung jangkungna, nu gaya kasampak rada beda dina panyungsi pisan luntur ti maranéhna ngalakukeun dina panyungsi modérn. Anjeun tiasa ningali dina conto ieu, lamun nempo dina IE7 tur handap (a browser nu woefully luntur sarta euweuh dirojong ku Microsoft) aya hiji garis jero beveled nu teu nembongkeun dina panyungsi lianna (kaasup IE8 na nepi) :
gaya = "jangkungna: 1.5em; lebar: 25em; wates: 1px solid # 000;">
Maranéhanana panyungsi antiqued anu bener teu pira tina perhatian dina rarancang web kiwari, saprak maranéhna geus sakitu legana diganti ku pilihan langkung modern.
Ngadamel Line hiasan ku Latar Gambar
Gantina warna a, anjeun tiasa nangtukeun hiji gambar tukang keur HR anjeun meh Sigana persis sakumaha rék ka, tapi masih mintonkeun semantically dina aksara Anjeun.
Dina conto ieu kami dipaké hiji gambar nu geus tilu garis wavy. Ku netepkeun eta salaku gambar latar kalayan henteu ulang, éta nyiptakeun putus di eusi nu Sigana ampir kawas nu katingali dina buku:
gaya = "jangkungna: 20px; latar: #fff url (aa010307.gif) no-ulang puseur ngagugulung; wates: taya;">
Transforming Unsur HR
Kalawan CSS3, Anjeun ogé tiasa nyieun garis Anjeun leuwih metot. Unsur HR nyaeta tradisional a garis horizontal, tapi jeung CSS transformasi harta, anjeun bisa ngarobah cara maranéhanana kasampak. A transformasi favorit kana unsur HR nyaeta ngarobih rotasi.
Anjeun tiasa muterkeun unsur HR anjeun ku kituna éta ngan rada diagonal:
hr {
-moz-transform: muterkeun (10deg);
-webkit-transform: Rotasikeun (10deg);
-o-transform: Rotasikeun (10deg);
-ms-transform: muterkeun (10deg);
transformasi: muterkeun (10deg);
}
Atawa anjeun bisa muterkeun eta supaya éta sakabéhna nangtung:
hr {
-moz-transform: muterkeun (90deg);
-webkit-transform: Rotasikeun (90deg);
-o-transform: Rotasikeun (90deg);
-ms-transform: muterkeun (90deg);
transformasi: muterkeun (90deg);
}
Inget yen ieu rotates nu HR dumasar lokasi kiwari di dokumen, ku kituna anjeun bisa kudu ngaluyukeun positioning ka meunang eta dimana rék eta. Ieu teu nyarankeun ngagunakeun ieu pikeun nambahkeun garis nangtung jeung desain, tapi éta cara pikeun meunangkeun éfék metot.
Jalan séjén pikeun Cokot Galur on Kaca anjeun
Hiji hal anu sababaraha urang ngalakukeun tinimbang ngagunakeun unsur HR nyaeta mun ngandelkeun wates elemen séjén. Tapi kadang hiji HR nyaeta pisan leuwih merenah tur leuwih gampang ngagunakeun ti nyobian nyetel wates. Isu kotak modél sababaraha panyungsi tiasa ngadamel nyetel wates nu malah trickier.