插图
插图为图片与文字结合的排版效果,在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>