CSS燈箱廣告是網頁設計中常見的一種廣告效果，可以讓廣告更加吸引人的眼球，提高廣告曝光和點擊率。下面我們就來介紹一下如何制作CSS燈箱廣告。

首先，我們需要準備一張圖片作為廣告的素材，然后創建一個HTML頁面并引入相應的CSS和JavaScript文件。接下來，我們使用CSS代碼設置廣告布局和樣式。

/*燈箱廣告容器*/ 
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: none;
justify-content: center;
align-items: center;
}
/*燈箱廣告圖片*/ 
.lightbox img {
max-height: 80%;
max-width: 80%;
}

上述代碼中，我們采用了flex布局，將燈箱廣告容器垂直水平居中。同時，設置了燈箱容器的背景色為半透明的黑色，可以讓整個頁面顯得更加暗淡，讓廣告更加引人注目。另外，我們還設置了廣告圖片的最大寬度和高度為80%，可以讓廣告適應不同設備的屏幕大小。

接下來，我們需要使用JavaScript代碼實現燈箱廣告的顯示和隱藏功能。

//點擊廣告圖片顯示燈箱
var img = document.getElementById('ad-img');
img.onclick = function () {
var lightbox = document.getElementsByClassName('lightbox');
lightbox[0].style.display = 'flex';
}
//點擊燈箱容器隱藏燈箱
var lightbox = document.getElementsByClassName('lightbox');
lightbox[0].onclick = function () {
lightbox[0].style.display = 'none';
}

在這段JavaScript代碼中，我們先獲取了廣告圖片的節點，給其設置了一個點擊事件，點擊廣告圖片時就會顯示燈箱容器；另外，我們還給燈箱容器本身設置了一個點擊事件，這樣在點擊燈箱容器時就會隱藏燈箱。

最后，我們將廣告圖片添加到HTML頁面中，并設置圖片的ID，以便在JavaScript代碼中調用。

通過以上步驟，我們就成功制作了一個簡單的CSS燈箱廣告。當用戶點擊廣告圖片時，燈箱容器會彈出顯示廣告圖片，點擊燈箱容器任意位置會隱藏廣告。