Home-theater-designers
CSS tergolong dalam kelas bahasa yang unik, yang dikenali sebagai bahasa lembaran gaya. Ia digunakan terutamanya untuk menentukan persembahan laman web anda. Walaupun HTML membolehkan anda menentukan bagaimana halaman anda harus disusun, CSS digunakan untuk menggayakannya. Jika tidak, anda akan berakhir dengan laman web yang tidak menarik.
Berfokus pada CSS adalah salah satu cara yang lebih baik untuk meningkatkan daya tarikan laman web anda, terutama ketika meningkatkan pengalaman pengguna anda. Dengan cara ini, anda juga dapat meningkatkan lalu lintas anda. Sebagai permulaan, anda boleh menggunakan borang bertumpuk.
Apakah Bentuk Tersusun?
Bentuk bertumpuk membolehkan anda membuat borang khusus di mana anda boleh meletakkan label dan input anda di atas satu sama lain, dan bukannya meletakkannya dalam corak mendatar.
Inilah cara anda boleh melakukannya.
Kod HTML
Gunakan elemen HTML, , untuk memproses maklumat anda. Tambahkan label untuk bidang yang berkaitan dan tetapkan medan input yang berkaitan. Dalam contoh ini, kami meminta pengguna untuk memberikan nama penuh dan alamat e-mel mereka dengan jenis input borang teks , sedangkan menu drop-down dibuat melalui pilih id untuk membantu mereka memilih industri mereka.
What Is a Stacked Form?
Here's how you create a stacked form.
Full Name
Email Address
Department
Information Technology
Customer Support
Sales
Walau bagaimanapun, menjalankan kod ini hanya akan menghasilkan bentuk hambar tanpa menumpuk bidang secara menegak. Dan di situlah anda perlu menambahkan CSS.
bunyi komputer dan maksudnya
Kod Bahagian CSS
Sekarang, buat helaian gaya yang berasingan dan tambahkannya ke HTML anda sebelum teg badan:
Seterusnya, pilih badan, jenis input, dan bekas HTML anda dan gaya mereka melalui CSS. Ini akan merangkumi percubaan dengan sifat CSS yang berbeza, seperti font-family, width, padding, margin, display, border, dll, dan menambahkan nilai pilihan anda. Dengan cara ini, anda akan mendapat borang bertumpuk yang sesuai dengan pilihan anda. Inilah contohnya.
body {
font-family: Calibri;
}
input[type=text], select {
width: 25%;
padding: 12px 20px;
margin: 8px 10;
display: list-item;
border: 4px double #39A9DB;
border-radius: 8px;
box-sizing: border-box;
}
input[type=submit] {
width: 25%;
background-color: #F8E2E6;
color: #0000FF;
padding: 12px 18px;
margin: 20px 0;
border: none;
border-radius: 6px;
cursor: pointer;
}
div.container {
border-radius: 10px;
background-color: #39A9DB;
padding: 40px;
}
Periksa output di bawah.
Kini Anda Boleh Membuat Bentuk Tersusun Dalam CSS
Dengan artikel ini, anda telah belajar bagaimana membuat borang bertumpuk dalam CSS. Dengan latihan, anda akan dapat menyempurnakan borang anda dan menjadikan laman web anda lebih mesra pengguna.
bagaimana saya menyemak papan induk saya
Nama permainan pengaturcaraan adalah 'latihan'. Tingkatkan kemahiran CSS anda setiap hari dengan projek pameran untuk menjadi pereka web yang bergaya dan pembangun web yang lebih cekap.
Berkongsi Berkongsi Tweet E-mel 10 Contoh Kod CSS Mudah yang Anda Boleh Pelajari dalam 10 MinitPerlukan bantuan dengan CSS? Cubalah contoh kod asas CSS ini, kemudian gunakannya ke laman web anda sendiri.
Baca Seterusnya Topik-topik yang berkaitan- Pengaturcaraan
- Pembangunan Web
- CSS
Usman adalah pemasar kandungan yang telah membantu beberapa perniagaan dengan pertumbuhan organik di platform digital. Dia suka pengaturcaraan dan penulisan, yang bermaksud bahawa penulisan teknikal adalah sesuatu yang sangat dia gemari. Ketika tidak bekerja, Usman senang menghabiskan masa menonton rancangan TV, mengikuti kriket, dan membaca tentang analisis data.
Lagi Dari Usman GhaniLanggan buletin kami
Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!
Klik di sini untuk melanggan