Membuat garis mencari yang menarik di laman web dengan tag HR
Jika anda perlu menambah garis gaya pemisah mendatar ke laman web anda, anda mempunyai beberapa pilihan. Anda boleh menambah fail imej sebenar bagi baris tersebut ke halaman anda, tetapi itu memerlukan penyemak imbas anda untuk mengambil dan memuatkan fail tersebut, yang mungkin mempunyai kesan negatif pada prestasi tapak.
Anda boleh menggunakan sifat sempadan CSS untuk menambah sempadan yang bertindak sebagai garis sama ada di bahagian atas atau di bawah elemen, dengan berkesan mewujudkan garis pemisah anda.
Akhirnya, anda boleh menggunakan elemen HTML untuk peraturan mendatar - yang
Elemen Peraturan Mendatar
Jika anda pernah meletakkan elemen di laman web, anda mungkin mendapati bahawa cara lalai bahawa baris-baris ini dipaparkan tidak ideal. Ini bermakna anda perlu bertukar kepada CSS untuk menyesuaikan penampilan visual unsur-unsur ini selaras dengan cara anda ingin melihat tapak anda.
Tag HR adalah asas cara penyemak imbas mahu memaparkannya. Pelayar moden biasanya memaparkan tag HR yang tidak dilaras dengan lebar 100%, ketinggian 2px, dan sempadan 3D hitam untuk membuat garis.
Berikut adalah contoh unsur HR standard atau anda dapat melihat dalam gambar ini bagaimana seorang HR tidak kelihatan dalam pelayar moden.
Lebar dan Ketinggian adalah Konsisten Sepanjang Pelayar
Satu-satunya gaya yang konsisten merentas pelayar web adalah lebar dan gaya. Ini menentukan sejauh mana garis besarnya. Jika anda tidak menentukan lebar dan ketinggian lebar lalai adalah 100% dan ketinggian lalai adalah 2px.
Dalam contoh ini, lebarnya adalah 50% daripada elemen induk (perhatikan contoh-contoh berikut di bawah semua termasuk gaya inline.) Dalam tetapan pengeluaran, gaya ini sebenarnya akan ditulis dalam lembaran gaya luaran untuk memudahkan pengurusan sepanjang semua halaman anda):
gaya = "lebar: 50%;">
Dan dalam contoh ini ketinggian ialah 2em:
gaya = "ketinggian: 2em;">
Menukar Sempadan Boleh Menantang
Dalam penyemak imbas moden, penyemak imbas membina garis dengan menyesuaikan sempadan. Oleh itu, jika anda mengalih keluar sempadan dengan sifat gaya, garis akan hilang pada halaman. Seperti yang anda dapat lihat (dengan baik, anda tidak akan melihat apa-apa, kerana garisan itu tidak kelihatan) dalam contoh ini:
gaya = "sempadan: tiada;">
Melaraskan saiz sempadan, warna, dan gaya akan membuat garis kelihatan berbeza dan mempunyai kesan yang sama dalam semua penyemak imbas moden. Sebagai contoh, dalam demonstrasi ini sempadan adalah merah, putus-putus, dan lebar 1px:
style = "border: 1px dashed # 000;">
Tetapi jika anda menukar sempadan dan ketinggian, gaya kelihatan sedikit berbeza dalam pelayar yang sangat ketinggalan zaman daripada yang mereka lakukan dalam pelayar moden. Seperti yang anda dapat lihat dalam contoh ini, jika anda melihatnya di IE7 dan di bawah (pelayar yang sangat ketinggalan zaman dan tidak lagi disokong oleh Microsoft) ada garis dalaman yang tidak kelihatan dalam pelayar lain (termasuk IE8 dan sehingga) :
gaya = "tinggi: 1.5em, lebar: 25em; sempadan: 1px pepejal # 000;">
Pelayar anti-pelik ini benar-benar tidak banyak kebimbangan dalam reka bentuk web hari ini, kerana mereka telah banyak digantikan dengan pilihan yang lebih moden.
Buat Barisan Hiasan dengan Imej Latar Belakang
Daripada warna, anda boleh menentukan imej latar belakang untuk HR anda supaya kelihatan seperti yang anda mahu, tetapi masih memaparkan secara semantik dalam markup anda.
Dalam contoh ini kita menggunakan imej yang terdiri daripada tiga garisan bergelombang. Dengan menetapkannya sebagai imej latar belakang tanpa mengulangi, ia mewujudkan rehat dalam kandungan yang kelihatan hampir seperti yang anda lihat dalam buku:
gaya = "ketinggian: 20px; latar belakang: #fff url (aa010307.gif) pusat skrol tanpa ulangan; sempadan: tiada;">
Mengubah Elemen SDM
Dengan CSS3, anda juga boleh menjadikan garis anda lebih menarik. Unsur SDS secara tradisinya adalah garis mendatar , tetapi dengan sifat transform CSS, Anda dapat mengubah cara mereka melihat. Transformasi kegemaran pada elemen HR adalah untuk menukar putaran.
Anda boleh memutar elemen HR anda supaya ia hanya sedikit pepenjuru:
hr {
-moz-transform: putar (10deg);
-webkit-transform: putar (10deg);
-o-transform: putar (10deg);
-ms-transform: berputar (10deg);
mengubah: putar (10deg);
}
Atau anda boleh memutarnya supaya ia menegak sepenuhnya:
hr {
-moz-transform: berputar (90deg);
-webkit-transform: berputar (90deg);
-o-transform: berputar (90deg);
-ms-transform: berputar (90deg);
mengubah: putar (90deg);
}
Ingat bahawa ini berputar HR berdasarkan lokasi semasa dalam dokumen, jadi anda mungkin perlu menyesuaikan kedudukan untuk mendapatkannya di mana anda menginginkannya. Ia tidak mengesyorkan untuk menggunakan ini untuk menambah garis menegak kepada reka bentuk, tetapi ia adalah satu cara untuk mendapatkan kesan yang menarik.
Cara lain untuk Dapatkan Talian pada Halaman Anda
Satu perkara yang dilakukan oleh sesetengah orang dan bukannya menggunakan unsur HR adalah bergantung kepada sempadan unsur-unsur lain. Tetapi kadang-kadang HR adalah lebih mudah dan mudah digunakan daripada cuba untuk menetapkan sempadan. Isu model kotak sesetengah pelayar boleh membuat perbatasan lebih rumit.