Chúng tôi có một mô hình mô phỏng về cách chúng tôi muốn các vùng BuySellAds của mình trông như thế nào, vì vậy hãy bắt tay vào xây dựng nó cho thật. Trang web BuySellAds cung cấp mã mà chúng tôi cần đặt trên trang web của mình để quảng cáo hiển thị. Chúng tôi sao chép và dán nó lên.
Chúng tôi cố gắng tắt CSS mà BSA đưa vào trang web để tạo kiểu cho chúng (vì chúng tôi sẽ tự xử lý điều đó) nhưng rất tiếc nếu chúng tôi tắt nếu bây giờ tắt nó cũng ảnh hưởng đến trang web đang hoạt động, vì vậy chúng tôi phải chiến đấu chống lại CSS hiện tại.
Chúng tôi dành phần thời gian còn lại để định vị và tạo kiểu cho quảng cáo hiển thị theo cách chúng tôi muốn. Việc này khá dễ dàng vì chúng ta đã có sẵn rất nhiều thứ, chẳng hạn như mixin cho ngăn xếp phông chữ và màu sắc và những thứ khác.
Chúng tôi gặp phải một điều mà chúng tôi gặp phải một số lần trong loạt bài này, nơi mà nó sẽ rất tốt cho @extendmột lớp chỉ tồn tại trong một tệp khác, điều này rất tiếc là bạn không thể làm được. Trong ví dụ này, chúng tôi đang cố gắng tạo một div được tiêm BSA theo kiểu giống như vậy .module, đây là một trường hợp cổ điển để mở rộng, nhưng than ôi, chúng ta phải sao chép và dán một số kiểu.
Chúng tôi suy nghĩ về việc flexbox giúp chúng tôi ở đây, nhưng quyết định còn quá sớm cho điều đó. Nó sẽ làm cho bố cục dễ dàng hơn cũng như cung cấp cho chúng ta chiều cao bằng nhau. Ồ, chúng ta sẽ đưa nó vào danh sách mong muốn trong tương lai.