CSS帶標題的框

在Web設計中，CSS框架可以讓您快速地構建網頁布局和外觀。在CSS框架中，常用的一種是帶標題的框。這種框可以用來包含文本、圖像或其他內容，并且有一個帶標題的樣式。

下面是一個CSS帶標題的框的樣例代碼：

<style>
.box {
border: 1px solid #ccc;
padding: 10px;
}
.box h2 {
background-color: #ccc;
color: #fff;
padding: 5px;
margin: 0;
}
</style>
<div class="box">
<h2>這是一個帶標題的框</h2>
<p>這里可以添加文本、圖像或其他內容</p>
</div>

在上面的代碼中，我們定義了一個名為“box”的CSS類。這個類設置了一個邊框、內邊距和字體大小。在“box”類中，我們還定義了一個稱為“h2”的CSS類，它設置標題的背景顏色、字體顏色、內邊距和外邊距。

為了創建一個帶標題的框，我們使用一個“div”元素，并使用“box”類將其樣式化。在“div”元素中，我們添加一個標題元素“h2”和一些文本，這些內容都將出現在框內。

使用CSS帶標題的框可以讓您快速地創建漂亮的布局和視覺效果。您可以自定義樣式并將其應用于不同的元素，以滿足特定的設計需求。