Nggawe garis looking sing menarik ing kaca web kanthi label HR
Yen sampeyan perlu nambah garis-garis gaya separator menyang situs web, sampeyan duwe sawetara opsi. Sampeyan bisa nambah file gambar sing asline menyang kaca kasebut, nanging sing bakal mbutuhake browser kanggo njupuk lan ngemot file kasebut, sing bisa nduwe dampak negatif ing kinerja situs.
Sampeyan bisa nggunakake properti watesan CSS kanggo nambah wates sing tumindak minangka garis ing ndhuwur utawa ing ngisor elemen, sacara efektif nggawe garis separator panjenengan.
Pungkasan, sampeyan bisa nggunakake elemen HTML kanggo aturan horisontal - ing
Unsur Aturan Horisontal
Yen sampeyan wis nemokake unsur ing sawijining kaca web, sampeyan nemokake yen cara standar sing ditampilake baris iki ora becik. Iki tegese sampeyan kudu nguripake CSS kanggo nyetel tampilan visual saka unsur kasebut supaya sesuai karo cara sampeyan pengin situs katon.
Tag HR dhasar ditampilake cara browser kepengin nampilake. Browser modern biasane nampilake label HR sing digunakke kanthi jembar 100%, dhuwure 2px, lan watesan 3D ireng kanggo nggawe garis.
Punika conto unsur HR standar utawa sampeyan bisa ndeleng ing gambar iki babagan cara HR sing ora ditampilake katon ing browser modern.
Jembar lan Dhuwur sing Konsisten ing Browser
Gaya mung sing konsisten ing browser web yaiku jembar lan gaya. Iki bakal nemtokake manawa garis gedhe kasebut. Yen sampeyan ora netepake jembar lan dhuwur jembare standar 100% lan dhuwur standar iku 2px.
Ing conto iki, sudhut 50% saka unsur induk (cathetan conto ing ngisor iki kabeh kalebu gaya inline.) Ing setelan produksi, gaya iki bener ditulis ing sheet style njaba kanggo ngurus pangaturan ing kabeh halaman):
gaya = "width: 50%;">
Lan ing conto iki dhuwur yaiku 2em:
gaya = "dhuwur: 2em;">
Ngganti Bates Bisa Nantang
Ing browser modern, browser mbangun garis kanthi nyetel wates. Dadi yen sampeyan mbusak wates karo properti gaya, baris bakal ilang ing kaca. Minangka sampeyan bisa ndeleng (uga, sampeyan ora bakal weruh apa-apa, amarga garis bakal ora katon) ing conto iki:
gaya = "border: none;">
Ngatur ukuran wates, werna, lan gaya bakal nggawe garis katon beda lan nduweni efek sing padha ing kabeh browser modern. Contone, ing demonstrasi watesan iki abang, ambruk, lan amba 1px:
style = "border: 1px dashed # 000;">
Nanging yen sampeyan ngganti wates lan dhuwur, gaya katon rada beda ing browser banget lawas saka apa ing browser modern. Sing bisa dideleng ing conto iki, yen sampeyan ndeleng ing IE7 lan ngisor (browser sing sithik banget lan ora didukung dening Microsoft) ana garis utama sing ora ditampilake ing browser liyane (kalebu IE8 lan munggah) :
gaya = "dhuwur: 1,5em; jembar: 25em; wewatuan: 1px ngalangi # 000;">
Browser antiqued iki pancene ora akeh masalah ing desain web dina iki, amarga wis akeh diganti karo opsi modern.
Nggawe Jalur Hiasan kanthi Gambar Latar
Tinimbang werna, sampeyan bisa nemtokake gambar latar mburi kanggo HR supaya katon persis kaya sing dikarepake, nanging isih nampilake semantik ing markup.
Ing conto iki kita nggunakake gambar sing ana telung baris wavy. Kanthi nyetel minangka gambar latar mburi sing ora bisa diulang, nggawe break ing isi sing katon meh kaya sing dideleng ing buku:
style = "height: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; border: none;">
Ngubah SDM
Kanthi CSS3, sampeyan uga bisa nggawe garis luwih menarik. Unsur HR tradisional iku baris horisontal , nanging kanthi sifat transformasi CSS, sampeyan bisa ngganti cara ndeleng. Transformasi favorit ing SDM yaiku ngganti rotasi.
Sampeyan bisa muter unsur HR supaya mung diagonal rada:
hr {
-moz-transform: muter (10deg);
-webkit-transform: rotate (10deg);
-o-transform: muter (10deg);
-ms-transform: rotate (10deg);
transform: muter (10deg);
}
Utawa sampeyan bisa muter supaya meh kabeh vertikal:
hr {
-moz-transform: rotate (90deg);
-webkit-transform: rotate (90deg);
-o-transform: muter (90 dpl);
-ms-transform: rotate (90deg);
Ngubah: Puter (90deg);
}
Elinga yen rotasi HR kasebut adhedhasar lokasi sing saiki ing dokumen kasebut, dadi sampeyan kudu nyetel posisi kanggo njaluk ngendi sampeyan pengin. Sampeyan ora menehi saran kanggo nggunakake iki kanggo nambah garis vertikal menyang desain, nanging cara kanggo entuk efek menarik.
Cara Liyane Njaluk Garis ing Panjenengan Pages
Siji bab sing dikira wong liya tinimbang migunakake unsur HR yaiku gumantung ing wates unsur liyane. Nanging kadhangkala HR luwih praktis lan luwih gampang digunakake tinimbang nyoba ngeset wates. Masalah model kothak sawetara browser bisa nyetel wates sing luwih trik.