CSS如何在標題兩邊加線
在很多網站中,標題的兩邊會有一條線,讓標題更加突出。這種效果可以通過CSS來實現。
首先,在HTML中用p標簽包含標題內容:
<p class="title">這是一個標題</p>然后,在CSS中添加以下代碼:
.title { border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 10px 0; text-align: center; font-size: 24px; }這里的關鍵是使用border-top和border-bottom屬性來定義上下邊框,同時設置padding來讓文本與邊框有一定的距離,text-align來居中顯示,font-size來設置字體大小。 如果想要邊框的顏色不同,只需要調整邊框的顏色即可,比如:
.title { border-top: 1px solid #f00; border-bottom: 1px solid #009; padding:10px 0; text-align: center; font-size: 24px; }這樣就可以讓標題兩邊的線條顏色變為紅色和藍色。 總之,使用CSS為標題加上邊框,可以讓標題更加突出,并且可以通過設置不同的顏色來達到不同的視覺效果。
上一篇css如何變手圖標