拼图开发文档

插图

插图为图片与文字结合的排版效果,在HTML5中,插图标签为figure,子元素包含图片及figcaption

基本结构

框架用.figure定义插图样式,其效果为:

图片
插图描述文字
    <figure class="figure">
      <img src="..." alt="图片" />
      <figcaption>插图描述文字</figcaption>
    </figure>
  

文字对齐

可使用排版辅助里的相关对齐样式,改变文字的对齐方式;同时可使用圆角样式,改变图片的圆角效果。

图片
插图描述文字居中对齐
图片
插图描述文字右对齐
    <figure class="figure align-center">
      <img src="..." alt="图片" />
      <figcaption>插图描述文字居中对齐</figcaption>
    </figure>

    <figure class="figure align-right">
      <img src="..." alt="图片" class="radius-big" />
      <figcaption>插图描述文字右对齐</figcaption>
    </figure>
  

描述样式

figcaption上叠加颜色样式,改变描述背景的颜色,深色背景同时叠加.bg-inverse;当在figure元素叠加圆角样式时,整体显示为圆角效果。

图片
插图描述文字
图片
插图描述文字
    <figure class="figure">
      <img src="..." alt="图片" />
      <figcaption class="bg-main bg-inverse">插图描述文字</figcaption>
    </figure>

    <figure class="figure radius-large">
      <img src="..." alt="图片" />
      <figcaption class="bg-deep bg-inverse">插图描述文字</figcaption>
    </figure>
  

浮于图片上方

在插图上叠加.figure-above样式,描述文字浮于图片上方的底部,在此基础上再叠加.figure-above-top则显示在浮于图片的顶部,背景色为半透明状态。

图片
插图描述文字
图片
插图描述文字
    <figure class="figure figure-above radius-big">
      <img src="..." alt="图片" />
      <figcaption>插图描述文字</figcaption>
    </figure>

    <figure class="figure figure-above figure-above-top">
      <img src="..." alt="图片" />
      <figcaption>插图描述文字</figcaption>
    </figure>
  

.figure-above基础上叠加.figure-above-full样式,则描述背景铺满插图;在figcaption使用.flex及其对齐样式,可调整描述文字显示的位置。

图片
插图描述文字
图片
插图描述文字
    <figure class="figure figure-above figure-above-full">
      <img src="..." alt="图片" />
      <figcaption>插图描述文字</figcaption>
    </figure>

    <figure class="figure figure-above figure-above-full radius-big">
      <img src="..." alt="图片" />
      <figcaption class="flex flex-middle">插图描述文字</figcaption>
    </figure>