Trong video màn hình này, chúng ta sẽ đi sâu vào phần Giao dịch. Phần Giao dịch về cơ bản là một "bức tường quảng cáo". Đó là một khu vực của trang web mà mọi người sẽ phải điều hướng đến chính họ, vì vậy tôi không lo lắng về việc quảng cáo làm nhiễu suy nghĩ của mọi người. Ngoài ra, mỗi quảng cáo đều có chiết khấu trên đó và là sản phẩm mà cá nhân tôi giới thiệu, vì vậy không có chuyện mờ ám nào xảy ra.
Chúng tôi đã có tiêu đề tại chỗ. Chúng tôi cũng đã có nội dung được đưa ra trên trang mà chúng tôi cần tạo kiểu. Đây là nơi lý tưởng để bắt đầu viết CSS.
Điều thú vị về trang này là chúng ta có thể nhúng chân vào thế giới quảng cáo đáp ứng. Thế giới quảng cáo thực sự chưa bắt kịp với thiết kế đáp ứng. Quảng cáo thường có kích thước cố định và việc thay đổi kích thước rất khó hoặc bị cấm. Đó không phải là trường hợp trên trang web này vì tôi tự tạo quảng cáo.
Mỗi quảng cáo được tạo từ hình nền, hình ảnh biểu trưng và các đoạn văn bản. Sử dụng một background-image
phương tiện, chúng ta có thể cắt các cạnh của nó và điều đó không sao. Chúng tôi không làm mất bất kỳ văn bản hoặc phần quan trọng nào của logo.
Bố cục của "bức tường" này sẽ giống như bức tường =). Chúng tôi sẽ có ba cột ở kích thước máy tính để bàn rộng và sau đó đi xuống hai cột và cuối cùng là một cột duy nhất ở kích thước phone-ish. Tất cả những gì chúng tôi làm là thả nổi quảng cáo và áp dụng a min-height
để giữ cho tất cả chúng có cùng chiều cao. Ở các truy vấn phương tiện khác nhau, chúng tôi chỉ cần điều chỉnh độ rộng của quảng cáo và thay đổi độ rộng của quảng cáo và cái nào có lề phải và cái nào không (thông qua :nth-child
).
Mặt sau, mỗi quảng cáo là một trường tùy chỉnh trong WordPress. Khi chúng tôi xuất chúng ra trang, đầu tiên chúng tôi truy vấn chúng và đặt chúng vào một mảng. Sau đó xáo trộn mảng đó. Sau đó, cuối cùng dội lại chúng. Cũng có thể mang đến cho mọi người cơ hội trở thành quảng cáo hàng đầu!