在網頁設計中,常常需要使用橫線分割內容的標題。這時候,我們可以利用CSS實現一個簡單的橫線中間標題的效果。
h2 { text-align: center; border-bottom: 1px solid #000; line-height: 0.1em; margin: 10px 0 20px; } h2 span { background: #fff; padding: 0 10px; }
以上代碼中,“h2”為要添加橫線的標題標簽,“text-align: center;”表示標題居中顯示,“border-bottom: 1px solid #000;”表示添加一條黑色的1像素下劃線,“line-height: 0.1em;”表示標題行高為0.1em,“margin: 10px 0 20px;”表示標題上下分別為10像素和20像素。
代碼中,我們還使用了“span”標簽來包裹標題文字,使其背景為白色并添加左右邊距,以達到更好的閱讀效果。
通過以上代碼,我們可以快速實現一個簡單的橫線中間標題效果,使網站內容更加清晰明了。