Dalam screencast ini kita akan menggali bahagian Tawaran. Bahagian Tawaran pada dasarnya adalah "tembok iklan". Ini adalah kawasan laman web yang mesti dilayari oleh orang lain, jadi saya tidak bimbang tentang iklan yang mengganggu pemikiran orang. Selain itu, setiap iklan mempunyai potongan harga dan merupakan produk yang saya cadangkan secara peribadi, jadi tidak ada masalah.
Kami sudah mempunyai pengepala. Kami juga sudah mempunyai kandungan yang dilemparkan ke halaman yang perlu kami gayakan. Ini adalah tempat yang tepat untuk melancarkan menulis CSS.
Apa yang menarik dari halaman ini ialah kita dapat mencengkam jari kita ke dalam dunia iklan responsif. Dunia periklanan sebenarnya tidak sesuai dengan reka bentuk yang responsif. Iklan selalunya berukuran tetap dan mengubah saiznya sukar atau dilarang. Itu tidak berlaku di laman web ini kerana saya sendiri membuat iklan.
Setiap iklan dibuat dari gambar latar, gambar logo, dan potongan teks. Dengan menggunakan background-imagekaedah, kita boleh memotong hujungnya dan tidak apa-apa. Kami tidak kehilangan teks atau bahagian penting logo.
Susun atur "dinding" ini akan seperti dinding =). Kita akan mempunyai tiga lajur pada ukuran desktop yang luas dan kemudian turun ke dua lajur dan akhirnya satu lajur pada ukuran telefon-ish. Yang kami buat hanyalah mengapung iklan dan menerapkannya min-heightagar tetap sama tinggi. Pada pertanyaan media yang berbeza, kami hanya menyesuaikan lebar iklan dan mengubah mana yang mempunyai margin kanan dan yang tidak (melalui :nth-child).
Di hujung belakang, setiap iklan adalah bidang tersuai di WordPress. Apabila kami mengeluarkannya ke halaman, kami meminta mereka terlebih dahulu dan memasukkannya ke dalam array. Kemudian rombak susunan itu. Kemudian akhirnya mereka mengetengahkannya. Mungkin juga memberi peluang yang baik kepada semua orang untuk menjadi iklan teratas!