Έχουμε ένα πρότυπο για το πώς θέλουμε να μοιάζουν οι ζώνες BuySellAds, οπότε ας αρχίσουμε να το χτίζουμε πραγματικά. Ο ιστότοπος BuySellAds παρέχει τον κώδικα που πρέπει να τοποθετήσουμε στον ιστότοπό μας για να εμφανίζονται οι διαφημίσεις. Αντιγράφουμε και επικολλάμε αυτό.
Προσπαθούμε να κλείσουμε το CSS που εισάγει η BSA στον ιστότοπο για να το στυλ (γιατί θα το χειριστούμε εμείς οι ίδιοι), αλλά δυστυχώς αν κλείσουμε αν τώρα επηρεάζει και τη ζωντανή τοποθεσία, οπότε πρέπει απλώς να καταπολεμήσουμε την ένεση CSS για τώρα.
Αφιερώνουμε τον υπόλοιπο χρόνο τοποθέτησης και μορφοποίησης των διαφημίσεων για να εμφανίζονται ακριβώς όπως θέλουμε. Είναι πολύ εύκολο να πάει αφού έχουμε ήδη τόσα πολλά στη θέση του, όπως mixins για στοίβες γραμματοσειρών και χρώματα και άλλα.
Αντιμετωπίζουμε ένα πράγμα που συναντάμε πολλές φορές σε αυτήν τη σειρά, όπου θα ήταν ωραίο να υπάρχει @extendμια τάξη που υπάρχει μόνο σε ένα άλλο αρχείο, το οποίο δυστυχώς δεν μπορείτε να το κάνετε. Σε αυτό το παράδειγμα, προσπαθούμε να φτιάξουμε ένα BSA εγχυμένο div όπως ακριβώς .moduleείναι, το οποίο είναι μια κλασική περίπτωση για επέκταση, αλλά δυστυχώς, πρέπει να αντιγράψουμε και να επικολλήσουμε μερικά στυλ.
Σκεφτόμαστε το flexbox να μας βοηθάει εδώ, αλλά αποφασίζουμε ότι είναι πολύ νωρίς για αυτό. Θα διευκόλυνε τη διάταξη, καθώς θα μας έδινε ίσα ύψη. Ω, λοιπόν, θα το βάλουμε στη μελλοντική λίστα επιθυμιών.