figure 元素的應用

HTML5 導入一個支援圖片相關內容呈現的標籤 <figure> ,搭配 <figcaption> 提供圖片說明文案配置,考慮以下的HTML,其中利用 <figure> 與 <figcaption> 於網頁配置一張圖片:

<figure>
    <img src="images/DSCF0847.jpg" />
    <figcaption><b>愛情來了,一切不再孤單了。。。</b></figcaption>
</figure>

沒有任何樣式套用的預設情形下,以下為此標籤呈現的結果畫面:

愛情來了,一切不再孤單了。。。

現在透過樣式調整其外觀,首先為figure 元素套用框線:

figure {
    padding: 10px;
    border: 2px solid #ff66b3;
    display: inline-block;
    margin:20px;
}

接下來為 figcaption 套用所要呈現的樣式:

figcaption {     
    padding: 1em;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    text-align: center;
    background-color: #ff99cc;
    color: white;
    font-size: 1em;
}  

這段樣式為 figcaption 套上背景顏色與字型顏色,同時透過 padding讓其中的文字撐開一定的間隔,最後呈現以下的結果:





沒有留言: