CSS底部畫一條線 使用CSS可以很方便地實現在頁面底部畫一條線的效果。在實現之前，我們需要理解一下基本的CSS知識。 首先，我們可以使用`border`屬性來設置線條的樣式，例如： ``` border-bottom: 1px solid #ccc; ``` 這一行代碼表示在元素底部繪制一條寬度為1像素，顏色為灰色的實線。但是，如果我們直接將該樣式應用在頁面底部，會出現以下問題： 1. 如果頁面高度很小，線條會跟在內容的后面，而不是在頁面底部； 2. 如果頁面高度很大，線條會距離頁面底部很遠，而不是緊貼在頁面底部。 為了解決以上問題，我們需要使用一些技巧。下面是一段CSS代碼，可以實現在頁面底部畫一條線的效果： ``` html, body { height: 100%; } .page-wrapper { min-height: 100%; margin-bottom: -1px; } .page-content { padding-bottom: 1px; } .page-footer { border-top: 1px solid #ccc; margin-top: -1px; height: 1px; } ``` 其中，`.page-wrapper`是頁面的容器，`.page-content`是頁面的內容區域，`.page-footer`是頁面底部的線條。這段代碼的核心思想是： 1. 將`html`和`body`元素的高度設置為100%，以確保頁面占滿整個屏幕； 2. 將`.page-wrapper`元素的高度設置為100%，并且設置一個負的`margin-bottom`，以確保它的底部緊貼著頁面底部； 3. 將`.page-content`元素的`padding-bottom`設置為1像素，以騰出一個位置給`.page-footer`元素，防止它被內容遮擋； 4. 將`.page-footer`元素的`height`設置為1像素，是為了保證它只占據一行空間； 5. 將`.page-footer`元素的`margin-top`設置為-1像素，并且將`border-top`設置為1像素的實線，以實現線條的效果。 最終的效果如下圖所示：  以上就是使用CSS實現在頁面底部畫一條線的方法。希望對你有所幫助！