CSS好看的標題框

/* 標題框樣式 */
.title-box {
background-color: #f5f5f5;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
margin-bottom: 20px;
display: inline-block;
}
/* 標題樣式 */
.title {
font-size: 24px;
font-weight: bold;
color: #333;
margin: 0;
text-align: center;
}
/* 副標題樣式 */
.subtitle {
font-size: 14px;
font-style: italic;
color: #666;
margin: 0;
text-align: center;
}

在網頁設計中，標題是重要的一頁內容。如果你想要你的網站看起來更有吸引力，那么有一個好看的標題框將會讓你有很大的優勢。在這篇文章中，我將告訴你如何用 CSS 制作一個好看的標題框。

首先，我們需要創建一個基本的 HTML 結構：

<div class="title-box">
<h1 class="title">標題</h1>
<p class="subtitle">副標題</p>
</div>

接下來，我們要添加 CSS 樣式。這個標題盒子看起來非常簡單，但是實際上里面的 CSS 樣式很不錯。代碼如下：

.title-box {
background-color: #f5f5f5;
border: 2px solid #ddd;
border-radius: 8px;
padding: 10px;
margin-bottom: 20px;
display: inline-block;
}
.title {
font-size: 24px;
font-weight: bold;
color: #333;
margin: 0;
text-align: center;
}
.subtitle {
font-size: 14px;
font-style: italic;
color: #666;
margin: 0;
text-align: center;
}

你可以根據實際需要調整標題框的大小和顏色。通過添加更多的 CSS 樣式，你可以使標題框看起來更加好看，同時也可以達到網頁設計的效果。

總之，一個好看的標題框將會給你的網站加分。這個 CSS 樣式很簡單，但真的很好看。試試吧！