Bagaimanakah Saya Boleh Mencipta Pengaki Melekit Menggunakan CSS sahaja?

Menempatkan Pengaki dengan Penguasaan CSS

Meningkatkan pengalaman pengguna tapak web anda selalunya melibatkan penciptaan elemen yang kekal kelihatan walaupun pengguna menatal halaman . Pengaki melekit, yang kekal di bahagian bawah halaman, adalah cara yang berkesan untuk mencapai perkara ini. Walaupun terdapat pelbagai kaedah untuk mencapai kesan ini, CSS tulen menyediakan penyelesaian yang mudah dan cekap.

Untuk pengguna WordPress, mematuhi langkah berikut akan memastikan pengaki mereka kekal berlabuh dengan kukuh di bahagian bawah halaman:

1. Konfigurasikan HTML untuk Pengaki Peletakan:

   
   <div>
   <ul>
   <li>Gunakan <kandungan-utama> div untuk mengehoskan kandungan utama halaman.</kandungan-utama>
   </li>
   <li><footer> elemen, dengan ID pengaki bawah, akan berfungsi sebagai penambat untuk pengaki melekit.</footer></li>
   </ul>
   <li>
   <p><strong>Laraskan Margin Badan:</strong></p>
   <pre class="brush:php;toolbar:false">body {
       margin-bottom: 100px; /* Margin value should match the height of the footer */
   }

   • Margin ini akan mewujudkan ruang di bahagian bawah halaman di mana pengaki akan berada diposisikan.

2. Gunakan CSS pada Pengaki Kedudukan Sama sekali:

   #bottom-footer {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
   }

   • kedudukan: mutlak membenarkan pengaki menjadi diletakkan secara berasingan daripada kandungan utama.
   • bawah: 0 memastikan bahawa pengaki adalah dijajarkan ke tepi bawah.
   • kiri: 0 melabuhkan pengaki ke jidar kiri.
   • lebar: 100% memastikan pengaki menempati keseluruhan lebar halaman.

Dengan mengikuti langkah ini, anda boleh mencipta pengaki melekit menggunakan CSS tulen tanpa memerlukan pemalam atau JavaScript yang kompleks. Pendekatan ini menawarkan penyelesaian yang ringan dan cekap yang meningkatkan kemudahan pengguna dan menjadikan tapak web anda lebih menarik secara visual.