Sekiranya anda perlu menambah garis gaya pemisah mendatar ke laman web anda, pilihan tipikal anda termasuk menambahkan fail imej baris-baris tersebut ke halaman anda, tetapi itu memerlukan penyemak imbas anda untuk mengambil dan memuatkan fail-fail tersebut, yang mungkin mempunyai kesan negatif di laman web prestasi. Anda juga boleh menggunakan properti sempadan CSS untuk menambah sempadan yang bertindak sebagai garis sama ada di bahagian atas atau di bawah elemen, dengan berkesan mewujudkan garis pemisah anda.
Atau - lebih baik lagi - gunakan elemen HTML untuk peraturan mendatar.
Elemen Peraturan Mendatar
Penampilan lalai baris peraturan mendatar tidak sesuai. Untuk menjadikannya kelihatan lebih baik, tambahkan CSS untuk menyesuaikan penampilan visual unsur-unsur ini agar selaras dengan cara anda ingin melihat tapak anda.
Tag HR adalah asas cara penyemak imbas mahu memaparkannya. Pelayar moden biasanya memaparkan tag HR yang dilancarkan dengan lebar 100 peratus, ketinggian 2 piksel, dan sempadan 3D hitam untuk membuat garis.
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 tinggi, lebar lalai adalah 100 peratus dan ketinggian lalai ialah 2 piksel.
Dalam contoh ini, lebar ialah 50 peratus daripada elemen induk (perhatikan contoh-contoh berikut di bawah semua termasuk gaya inline. Dalam tetapan pengeluaran, gaya-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;"> 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. Daripada warna, anda boleh menentukan imej latar belakang untuk peraturan mendatar 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;"> Dengan CSS3, anda juga boleh menjadikan garis anda lebih menarik. Unsur HR secara tradisinya a mendatar barisan, tetapi dengan sifat transform CSS, anda boleh mengubah rupanya. 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 teknik 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. 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. Menukar Sempadan Boleh Menantang
Buat Barisan Hiasan dengan Imej Latar Belakang
Mengubah Elemen SDM
Cara lain untuk Dapatkan Talian pada Halaman Anda
