媒体Media

iPhone Cases

Keep your smartphone safe from bumps, bruises, drops, and more with our covers.

<div class="media">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <h5>iPhone Cases</h5>
        <p>Keep your smartphone safe from bumps, bruises, drops, and more with our covers.</p>
    </div>
</div>

自定义内容Custom

可随意添加<h1>~<h6>、<p>、<ul>、<ol>、<dl>、<button>等内容

iPhone Cases
Keep your smartphone safe from bumps, bruises, drops, and more with our covers.
iPhone 6 Cases
iPhone 4 Cases
iPhone 5 Cases
Samsung Cases
iPad Cases
<div class="media">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <dl class="baselist">
            <dt>iPhone Cases</dt>
            <dd>Keep your smartphone safe from bumps, bruises, drops, and more with our covers.</dd>
            <dd>iPhone 6 Cases</dd>
            <dd>iPhone 4 Cases</dd>
            <dd>iPhone 5 Cases</dd>
            <dd>Samsung Cases</dd>
            <dd>iPad Cases</dd>
        </dl>
        <button type="button" class="btn bg-navy">Quick view</button>
    </div>
</div>

对齐Align

添加class="tc"使文本居中对齐,添加class="tr"使文本向右对齐

  • iPhone Cases

    Keep your smartphone safe from bumps, bruises, drops, and more with our covers.

  • Business Cards

    Browse all of our office essentials to keep you organized while showing off your individual style.

Center:
<div class="media tc">
    ...
</div>

Right:
<div class="media tr">
    ...
</div>

浮动Float

添加class="left"使图片向左浮动,添加class="right"使图片向右浮动,注意:需要为图片层及内容层设定宽度

iPhone Cases

Keep your smartphone safe from bumps, bruises, drops, and more with our covers.

Business Cards

Browse all of our office essentials to keep you organized while showing off your individual style.

Left:
<div class="media left">
    <div class="img box25"><img src="imgurl"></div>
    <div class="content box75">
        <h5>iPhone Cases</h5>
        <p>Keep your smartphone safe from bumps, bruises, drops, and more with our covers.</p>
        <button type="button" class="btn bg-navy">Quick view</button>
    </div>
</div>

Right:
<div class="media right">
    ...
</div>

响应式复位Response reset

通过预定义的class="reset-m"、class="reset-s"来对中、小屏幕作布局调整
例:添加class="reset-s",即媒体元素默认为自定义浮动,视窗像素小于750px则清除浮动恢复原状

<div class="media left reset-m">
    ...
</div>
OR:
<div class="media left reset-s">
    ...
</div>

叠加Overlay

添加class="overlays"转换为叠加模式,添加class="darken"使图片变暗,需额外定义文本元素的颜色,注意:叠加模式不能与浮动共同使用

  • iPhone Cases

    Keep your smartphone safe from bumps, bruises, drops, and more with our covers.

  • Business Cards

    Browse all of our office essentials to keep you organized while showing off your individual style.

Basic:
<div class="media overlay">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <h5>iPhone Cases</h5>
        <p>Keep your smartphone safe from bumps, bruises, drops, and more with our covers.</p>
        <button type="button" class="btn bg-navy">Quick view</button>
    </div>
</div>

Darken:
<div class="media overlay darken">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <h5 class="c-fff">Business Cards</h5>
        <p class="c-fff">Browse all of our office essentials to keep you organized while showing off your individual style.</p>
        <button type="button" class="btn bg-red">Quick view</button>
    </div>
</div>

圆角Radius

添加class="radius"转换为圆角效果,包含叠加模式

  • iPhone Cases

    Keep your smartphone safe from bumps, bruises, drops, and more with our covers.

  • Business Cards

    Browse all of our office essentials to keep you organized while showing off your individual style.

Basic:
<div class="media radius">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <h5>iPhone Cases</h5>
        <p>Keep your smartphone safe from bumps, bruises, drops, and more with our covers.</p>
        <button type="button" class="btn bg-navy">Quick view</button>
    </div>
</div>

Overlay:
<div class="media overlay radius">
    ...
</div>

滑动放大图片Zoom

添加class="zoom"使图片增加滑动放大效果,包含叠加模式

  • iPhone Cases

    Keep your smartphone safe from bumps, bruises, drops, and more with our covers.

  • Business Cards

    Browse all of our office essentials to keep you organized while showing off your individual style.

Basic:
<div class="media zoom">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <h5>iPhone Cases</h5>
        <p>Keep your smartphone safe from bumps, bruises, drops, and more with our covers.</p>
        <button type="button" class="btn bg-navy">Quick view</button>
    </div>
</div>

Overlay:
<div class="media overlay zoom">
    ...
</div>

滑动淡入文本Fadein

添加class="fadein"使文本增加滑动淡入效果,可与滑动放大图片效果叠加,注意:滑动淡入效果仅叠加模式下生效

  • iPhone Cases

    Keep your smartphone safe from bumps, bruises, drops, and more with our covers.

  • Business Cards

    Browse all of our office essentials to keep you organized while showing off your individual style.

Basic:
<div class="media overlay fadein">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <h5>iPhone Cases</h5>
        <p>Keep your smartphone safe from bumps, bruises, drops, and more with our covers.</p>
        <button type="button" class="btn bg-navy">Quick view</button>
    </div>
</div>

Darken:
<div class="media overlay darken fadein">
    <div class="img"><img src="imgurl"></div>
    <div class="content">
        <h5 class="c-fff">Business Cards</h5>
        <p class="c-fff">Browse all of our office essentials to keep you organized while showing off your individual style.</p>
        <button type="button" class="btn bg-red">Quick view</button>
    </div>
</div>