Dari penulis: Saya salut padamu. Kebutuhan untuk menampilkan beberapa blok pada halaman web dalam satu baris adalah tugas yang sangat umum yang dihadapi oleh desainer tata letak. Ini terjadi selama tata letak hampir setiap templat, jadi bagaimanapun juga, kita semua perlu mengetahui dan menerapkan cara dasar untuk mengubah perilaku blok.
Sebelum kita melihat teknik yang paling umum, saya ingin mengingat sedikit teori. Elemen halaman web dibagi menjadi elemen blok dan inline. Dan perbedaan di antara keduanya sangat sederhana - huruf kecil dapat ditempatkan pada satu baris, tetapi huruf blok tidak bisa. Tentu saja perbedaannya tidak berhenti sampai disitu saja, namun di sinilah perbedaan utamanya. Blok sudah dapat memiliki padding di bagian atas dan bawah (yang huruf kecil tidak), dan lebih banyak properti dapat diterapkan padanya.
Cara dasar untuk menyusun blok di CSS
Kami tidak akan mempersulit apapun, ada 3 cara utama:
Ubah blok menjadi elemen sebaris. Dalam hal ini, properti blok hilang, sehingga opsi ini hampir tidak pernah digunakan
Buatlah elemen-elemen yang diperlukan menjadi garis blok. Ini adalah tipe khusus di mana elemen mempertahankan propertinya, tetapi pada saat yang sama memungkinkan blok lain ditempatkan di dekatnya.
Buat elemen melayang menggunakan properti float.
Mari fokus pada opsi ini. Kami tidak akan mempertimbangkan Flexbox, tampilan tabel, dan aspek lainnya. Jadi misalkan kita mempunyai 3 subjudul.
Judul 1
Judul 2
Pos 3
Secara alami, semua properti css harus ditulis dalam file terpisah (style.css), yang harus terhubung ke dokumen html. Dalam file ini saya akan menulis gaya minimal sehingga subjudul kita cukup terlihat.
h3( latar belakang: #EEDDCD; )
jam3 ( latar belakang : #EEDDCD; |
Ini dia di halaman:
Mereka berperilaku seperti balok. Masing-masing terletak pada barisnya sendiri, ada lekukan di antara keduanya. Jika mau, Anda juga dapat mengatur bantalan internal apa pun dan melakukan apa pun yang Anda inginkan.
Mari kita ubah menjadi garis dan segera tambahkan indentasi. Untuk melakukan ini, pemilih h3 perlu menambahkan properti berikut:
tampilan: sebaris; bantalan: 30 piksel;
Ada 2 masalah utama yang muncul saat menggunakan teknik ini. Yang pertama adalah lekukan minimum. Ini terbentuk karena fakta bahwa dalam kode ada satu spasi di antara blok, yang membentuk lekukan ini. Jika masalah ini perlu diselesaikan, ada 2 opsi utama:
Di html, tempatkan kode blok yang diperlukan dalam satu baris tanpa spasi
Tambahkan margin negatif di sebelah kanan -4 piksel. Itu adalah jumlah yang dibutuhkan satu ruang.
Masalah kedua adalah jika elemen memiliki ketinggian yang berbeda, masalah tampilan mungkin timbul. Secara umum, pilihan terbaik adalah blok mengambang. Alih-alih display: inline-block kami menulis ini:
Blokir dalam satu baris menggunakan kerangka
Saya akan langsung mengatakan bahwa jika Anda akan menggunakan kerangka CSS normal (misalnya, Bootstrap), maka semuanya masih jauh lebih sederhana. Semua kode CSS yang bertanggung jawab untuk mengatur elemen telah ditulis dan yang perlu Anda lakukan hanyalah mengatur kelas yang benar. Untuk melakukan ini, cukup pelajari sistem gridnya, dan Anda akan dapat membuat template responsif multi-kolom tanpa banyak kesulitan. Setidaknya ini akan jauh lebih mudah daripada menulis css dari awal.
Tantangan lain dalam menulis kode dari awal muncul saat Anda membutuhkan desain responsif. Tentu saja, Anda dapat menerapkannya sendiri dengan memiliki media queries, namun akan jauh lebih sulit jika Anda memiliki template yang rumit.
Misalnya, ketika Anda seharusnya memiliki 4 kolom di layar besar, 3 di layar sedang, dan 2 di ponsel. Dengan bantuan kerangka kerja seperti Bootstrap, atau lebih tepatnya dengan bantuan kisi-kisinya, implementasi ini hanya memerlukan waktu beberapa menit saja. .
Menerjemahkan topik dengan lancar ke kerangka Bootstrap, saya akan mencatat sekali lagi bahwa jika Anda dihadapkan dengan tugas membuat template adaptif yang kompleks, maka adalah dosa jika tidak menggunakan grid. Untuk melakukan ini, Anda bahkan tidak perlu menghubungkan versi lengkap kerangka kerja - Anda dapat menyesuaikannya dan hanya berhenti di situ yang benar-benar Anda perlukan.
Anda dapat mempelajari cara bekerja dengan kerangka menggunakan . Teorinya dijelaskan di sana, tapi yang terpenting, ada praktiknya. Anda akan membuat 3 templat adaptif dan mendapatkan pengalaman luar biasa yang memungkinkan Anda mendesain situs web sesuai pesanan atau untuk Anda sendiri. Dan jika Anda ingin mengetahui kelebihan dan kemampuan framework ini secara gratis, saya sarankan Anda membaca rangkaian artikel kami tentang Bootstrap, serta desain tata letak sederhana. Saya berharap Anda sukses dalam tata letak dan pembuatan situs web secara umum.
Tugas
Buat garis horizontal pada halaman.
Larutan
Garis horizontal bagus untuk memisahkan satu blok teks dari blok teks lainnya. Teks kecil dengan garis horizontal di bagian atas dan bawah lebih menarik perhatian pembaca dibandingkan teks biasa.
Menggunakan tag
Anda dapat menggambar garis horizontal, yang tampilannya bergantung pada atribut yang digunakan, serta browser. Tag mengacu pada elemen blok, sehingga baris selalu dimulai pada baris baru, dan setelah itu semua elemen ditampilkan pada baris berikutnya. Berkat banyaknya atribut tag
garis yang dibuat melalui tag ini mudah dikelola. Jika Anda juga menghubungkan kekuatan gaya, maka menambahkan baris ke dokumen menjadi tugas yang sederhana.
Garis bawaan
ditampilkan dalam warna abu-abu dan dengan efek volume. Jenis garis ini tidak selalu sesuai dengan desain situs, sehingga keinginan pengembang untuk mengubah warna dan parameter garis lainnya melalui gaya dapat dimengerti. Namun, browser memiliki pendekatan yang beragam terhadap masalah ini, itulah sebabnya Anda harus menggunakan beberapa properti gaya sekaligus. Secara khusus, versi Internet Explorer yang lebih lama menggunakan properti warna untuk warna garis, sedangkan browser lain menggunakan warna latar belakang. Tapi bukan itu saja, Anda harus menentukan ketebalan garis (properti tinggi) menjadi bukan nol dan menghilangkan bingkai di sekitar garis dengan mengatur properti perbatasan menjadi tidak ada. Dengan menggabungkan semua properti untuk pemilih jam, kami mendapatkan solusi universal untuk browser populer (contoh 1).
Contoh 1: Garis horizontal
HTML5 CSS 2.1 YAITU Cr Op Sa Fx
Rangkaian teks
Hasil dari contoh ini ditunjukkan pada Gambar. 1.
Beras. 1. Garis horizontal berwarna
Halo semua! Hari ini saya akan memberi tahu Anda cara membuat garis horizontal menggunakan html.
Padahal, kebutuhan untuk membuat garis horizontal cukup sering muncul, misalnya saat Anda perlu memisahkan satu bagian teks dari bagian teks lainnya.
Garis horizontal dan vertikal menggunakan css
Ini bisa dilakukan dengan menggunakan css. Untuk melakukan ini, saya melampirkan bagian teks yang diperlukan dalam blok menggunakan tag div, dan kemudian di file style.css atau langsung dalam kode html kami menulis properti untuk blok ini untuk batas atas atau bawah menggunakan batas atas dan perbatasan-bawah. Berikut ini contohnya:
Dalam hal ini, saya mengatur styling menggunakan css langsung dari kode html, dan membuat batas atas menjadi padat dan batas bawah bertitik.
Inilah yang akan terlihat pada halaman tersebut:
Garis horizontal menggunakan css.
Metode ini memiliki kelebihan:
- Berbagai macam pengaturan yang memungkinkan Anda mengatur hampir semua jenis garis;
- Anda dapat membuat garis horizontal dan vertikal. Untuk membuat garis vertikal, Anda perlu mengubah border-top menjadi border-left, dan border-bottom menjadi border-right.
Kerugiannya termasuk kode yang relatif rumit.
Namun ternyata, Anda bisa menyisipkan garis horizontal ke dalam teks menggunakan html. Pada saat yang sama, Anda bahkan tidak perlu masuk ke css. Tag digunakan untuk ini
.
Garis horizontal menggunakan tag html
Ciri pertama dari tag ini adalah tidak memiliki tag penutup berpasangan. Itu dapat digunakan di mana saja dalam kode html di antara tag
Dan.
Tag ini memiliki atribut berikut:
- Lebar– menentukan panjang garis horizontal kita dalam piksel atau persentase;
- Warna– menentukan warna garis;
- Meluruskan– mengatur perataan garis ke tepi kanan – kanan, ke tepi kiri – kiri, tengah – tengah;
- Ukuran– ketebalan garis dalam piksel.
Berikut adalah contoh kode html.
Garis horizontal dibentuk oleh tag yang tidak berpasangan (tidak diperlukan tag penutup).
dan bisa menjadi elemen desain yang cukup unik. Memformat teks dengan penambahan garis HTML horizontal akan memberikan logika penyajian teks tertentu pada halaman, dan juga memudahkan pembaca untuk menyorot blok informasi yang perlu dipelajari secara berurutan. Menandai
dapat membentuk garis horizontal dengan warna, ketebalan dan panjang yang berbeda. Dan ini cukup mudah dilakukan, seperti yang ditunjukkan pada contoh di bawah.
Omong-omong, Anda juga bisa menggunakan properti gaya blok A garis vertikal sebenarnya terbentuk di blok yang sama Berikut adalah contoh garis vertikal merah di sebelah kiri. Berikut adalah contoh garis vertikal merah di sebelah kanan. Berikut contoh garis merah horizontal di bagian atas. Berikut contoh garis horizontal berwarna merah di bawah ini. Berikut adalah contoh garis horizontal dan vertikal. perhatikan atribut style Lingkaran dibentuk menggunakan tag Berikut adalah contoh garis vertikal merah di sebelah kiri. Berikut adalah contoh garis vertikal merah di sebelah kanan. Berikut contoh garis horizontal berwarna merah di bawah ini. Berikut adalah contoh garis horizontal dan vertikal. Dan jika kita menganalisis contoh-contoh ini, kita dapat menarik kesimpulan yang cukup sederhana bahwa garis vertikal paling baik dibentuk dengan menggunakan, dan opsi garis perantara dapat dibuat dengan menggunakan menandai Pada dasarnya, garis horizontal digunakan untuk menghiasi halaman HTML suatu situs web agar terlihat lebih menarik. Namun mereka juga dapat membedakan informasi secara visual dari bagian yang berdekatan, sehingga menambah kenyamanan pembaca saat mempelajarinya. Pada dasarnya, gambarlah garis horizontal di tempat yang Anda perlukan, itu saja. Ada tag khusus untuk menggambar garis horizontal di HTML Contoh menggambar garis horizontal di HTML
Gugus kalimat. Gugus kalimat. Gugus kalimat. Hasil di browser Gugus kalimat. Gugus kalimat. Gugus kalimat. Seperti yang Anda lihat, garis-garisnya menjadi sangat tipis, tidak menarik dan ditarik ke seluruh lebar yang tersedia, jadi sekarang kita akan belajar bagaimana mengubahnya agar terlihat lebih menarik. Di versi HTML yang lebih lama, tag Suatu warna dapat ditentukan berdasarkan namanya dalam bahasa Inggris atau dengan kode HEX warna yang diawali dengan tanda pagar (#). Nah, Anda sudah mengetahuinya dari pelajaran selanjutnya mengubah teks dan warna latar belakang. Namun kita akan berbicara lebih banyak tentang mengubah ukuran. Seperti yang Anda ingat dari pelajaran tentang mengubah font, ada sekitar sepuluh unit pengukuran di CSS, tapi lebar garis hanya dapat ditentukan dalam piksel (px) dan persentase (%), dan ketebalan umumnya hanya dalam piksel. Jika Anda memasukkan satuan pengukuran lain, itu tidak akan menjadi kesalahan, tetapi browser akan mengabaikannya begitu saja. Jika Anda menentukan dimensi dalam piksel, maka ketebalan dan lebar garis akan bergantung pada resolusi monitor tempat situs Anda dilihat (semakin tinggi resolusi layar, semakin tipis dan sempit garisnya). Seperti yang sudah saya katakan, hanya lebar garis yang dapat ditentukan dalam persentase. Ukuran persentase selalu bergantung dan dihitung berdasarkan ukuran elemen penampung induk di mana tag berada Contoh perubahan warna, ketebalan dan lebar garis horizontal.
Hasil di browser Saat Anda mengubah lebar garis horizontal, Anda dapat melihat dengan jelas bahwa browser selalu menempatkannya di tengah. Jika ingin mengubah posisinya, gunakan saja bagian dalamnya Contoh perataan garis horizontal.
Hasil di browser Lihatlah contoh pertama dari pelajaran ini. Menurut Anda apa warna garis-garis ini? Tapi itu tidak benar. Mereka transparan, sama seperti elemen halaman lainnya yang tidak memiliki warna latar belakang yang ditentukan! Tidak percaya padaku? Kemudian lihat contoh dimana kita mengubah warna garis. Untuk yang pertama, kami tidak mengatur warnanya, tetapi hanya memperbesar ukurannya, dan bukankah garis ini transparan? Sehingga! Sekarang saya akan menjelaskannya. Secara default, browser menggambar bingkai di sekitar garis, yang menciptakan efek tiga dimensi. Jadi, jika kita tidak menambah ketebalan garis horizontal, browser hanya menampilkan bingkai ini kepada kita, karena ketebalan garis itu sendiri adalah 0px. Untuk menghilangkan batas di sekitar garis yang sering merusak tampilan, kita akan menerapkan kembali atribut style. Dan ada tertulis seperti ini:
Pekerjaan rumah. Bantuan komputer Olympus
Dan
di lokasi tertentu. Benar, opsi ini mungkin tidak selalu nyaman, misalnya, pengecatan terkadang tidak selalu membuahkan hasil, tetapi dalam banyak kasus masalah dapat diselesaikan dengan cara ini. Misalnya saja di dalam sebuah garis yang terbentuk menandai
Anda tidak dapat menyisipkan teks. Namun di dalam blok, hal ini mungkin dan terus dilakukan. Jadi, Anda harus memilih opsi Anda tergantung pada persyaratan desain.
Garis vertikal dalam HTML.
Dan
Satu-satunya ketidaknyamanan adalah tag tersebut tidak tersedia di semua browser.
berfungsi sama, tetapi Anda harus mencobanya
dan sesuaikan halaman, atau gunakan browser yang diperbarui.
Pembentukan garis mendatar:
Menandai
menyisipkan garis horizontal ke halaman dan memiliki atribut berikut:Sintaks tanda
:Contoh garis horizontal pada HTML:
Contoh garis vertikal pada HTML:
Sintaks contoh garis vertikal dan horizontal pada HTML:
berbatasan- kiri(-kanan): 4px solid #FF0000;:
Tapi itu semua tergantung imajinasi dan permintaan. Jadi pilih dan bentuk.Bagaimana cara menggambar garis horizontal?
. Dan dia adalah tanda blok, yaitu membuat jeda baris sebelum dan sesudahnya, sehingga garis selalu berakhir pada baris terpisah. Oleh karena itu, ini hanya dapat ditentukan di dalam tag yang mungkin berisi elemen blok, misalnya atau . Tapi inilah aku
tidak dapat memiliki konten karena tidak memiliki tag penutup, artinya kosong.
Bagaimana cara mengubah warna, ketebalan dan lebar garis horizontal?
ada atribut khusus yang dapat digunakan untuk mengubah warna, ketebalan, dan lebar garis horizontal. Ini masing-masing adalah warna, ukuran dan lebar. Namun di versi baru, mereka ditinggalkan demi Cascading Style Sheets (CSS), jadi, seperti yang sudah Anda duga, kami akan kembali menggunakan atribut style favorit kami. Sintaks umumnya adalah:
gaya="latar belakang:warna" >- warna garis (atau lebih tepatnya latar belakangnya).
style="tinggi:ukuran" >- ketebalan garis.
gaya="lebar:ukuran" >- lebar garis.
gaya= "latar belakang:warna; tinggi:ukuran; lebar:ukuran">
- atau Anda dapat menentukan semua parameter sekaligus, jangan lupa tentang titik koma (;).
. Dalam hal ini, dimensi induk diambil 100%. Misalnya kita memasang tag
gaya="lebar:50%" > elemen dalam , maka tidak peduli bagaimana kita mengubah ukuran jendela browser atau resolusi monitor, lebar garis akan selalu menjadi setengah lebar blok
.
Mengubah posisi garis horizontal
sejajarkan atribut dengan nilai berikut:
Bagaimana cara menghapus bingkai di sekitar garis?
