設置盒子寬高和盒子模塊化

在CSS樣式表中，選擇之前創(chuàng)建的盒子類名或ID，并設置其寬度和高度屬性?？梢允褂冒俜直?、像素值或其他單位來定義盒子的大小。

預覽效果如圖

在瀏覽器中打開HTML文件，查看盒子的呈現效果。根據設定的寬度和高度屬性，盒子應當按照預期的大小展示在頁面上。

為三個盒子添加不同的背景顏色

通過CSS樣式表為每個盒子設置不同的背景顏色，可以使用顏色名稱、十六進制代碼或RGB數值來定義顏色。

效果如圖

在瀏覽器中查看頁面，確保每個盒子都顯示了相應的背景顏色，以便進一步調整樣式。

設置中間的盒子自適應

通過CSS布局技巧，可以使頁面中的中間盒子實現自適應效果，即根據頁面寬度的變化而自動調整其大小。

效果如圖

檢查頁面布局，確保中間盒子隨著頁面寬度的調整而自適應變化，保持頁面整體美觀。

設置三個盒子都自適應

使用CSS Flexbox或Grid布局等技術，可以同時實現三個盒子的自適應效果，使它們在不同屏幕尺寸下均能合理排列和展示。

效果如圖

通過調整瀏覽器窗口大小，觀察三個盒子的排列情況，確保它們能夠靈活適應不同的顯示環(huán)境。

設置盒子的排列方式

根據設計需求，可以通過CSS的float、position、display屬性等來調整盒子的排列方式，實現不同的布局效果。

效果如圖

最終預覽頁面效果，確認各個盒子的排列方式符合設計要求，同時保證頁面的響應式布局能夠適應不同設備和屏幕尺寸的展示。