Figure


預設樣式

<figure> 可置入 <img><svg><embed><video>.embed 元件等等,文字說明則使用 <figcation>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae debitis deleniti eum incidunt nam, quo sequi tempora ullam voluptatibus? Assumenda error iste nam, nihil porro sint tenetur ut veniam!
<figure> <img> <figcaption>~略~</figcaption> </figure>

如果要使文案置右,可在 <figcaption> 加上 .u-align:r;文字置中可使用 .u-align:c,可參考 Utilities 文件。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae debitis deleniti eum incidunt nam, quo sequi tempora ullam voluptatibus? Assumenda error iste nam, nihil porro sint tenetur ut veniam!
<figure> <img> <figcaption class="u-align:r">~略~</figcaption> </figure>

此外,文案也可以放置於多媒體元素之前。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae debitis deleniti eum incidunt nam, quo sequi tempora ullam voluptatibus? Assumenda error iste nam, nihil porro sint tenetur ut veniam!
<figure> <figcaption>~略~</figcaption> <img> </figure>

除了多媒體元素之外,也可以放置 <p><blockquote><pre.code>

Bid me discourse, I will enchant thine ear, Or like a fairy trip upon the green, Or, like a nymph, with long dishevell'd hair, Dance on the sands, and yet no footing seen: Love is a spirit all compact of fire, Not gross to sink, but light, and will aspire.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae debitis deleniti eum incidunt nam, quo sequi tempora ullam voluptatibus? Assumenda error iste nam, nihil porro sint tenetur ut veniam!
<figure> <p></p> <figcaption>~略~</figcaption> </figure>

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約三點六萬平方公里,為世界第卅八大島嶼,其中七成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae debitis deleniti eum incidunt nam, quo sequi tempora ullam voluptatibus? Assumenda error iste nam, nihil porro sint tenetur ut veniam!
<figure> <p></p> <figcaption>~略~</figcaption> </figure>

function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName;
  txt+= "Browser Name: " + navigator.appName;
  txt+= "Browser Version: " + navigator.appVersion ;
  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
  txt+= "Platform: " + navigator.platform;
  txt+= "User-agent header: " + navigator.userAgent;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam beatae debitis deleniti eum incidunt nam, quo sequi tempora ullam voluptatibus? Assumenda error iste nam, nihil porro sint tenetur ut veniam!
<figure> <pre class="code"></pre> <figcaption>~略~</figcaption> </figure>

Polariod

<figure> 加上 :polariod

米漿和豆漿
<figure class=":polariod"></figure>

Card

<figure> 加上 :card

米漿和豆漿
<figure class=":card"></figure>