首先先以div標籤框住HTML檔的img元素，並在div標籤上加上「class="mainviaual"」:

需注意的是div標籤是定義範圍的通用標籤，但本身不具有任何意義。

接下來打開CSS檔，想為剛剛新增的div標籤做個框和背景色，我們可以使用先前教過的background-color、border-bottom屬性:

.mainvisual{
    background-color: #你想要的顏色;
    border-bottom: solid 3px #你想要的顏色;
}

img在瀏覽器的預設值是display:inline;，如果img元素為行內層級元素，在下方就會多出一個間距，而究竟要怎麼消除這裡的間距呢，我們可以將img元素的display屬性值設定為block，也就是把img元素設定為區塊層級元素:

.mainvisual img{
    display: block;
}

我們先前使用了text-align屬性讓文字可以置中對齊，但因為img成為區塊元素後，盒子就會延展到和瀏覽器等寬，這時text-align就會被忽略。如果想要解決這個問題，就可以輸入以下程式碼:

.mainvisual img{
    margin: 0 auto;
}

這樣一來圖片的左右邊界就會依據瀏覽器的寬度自動運算，圖片也能置中配置。