Metro-UI-System-1-Kachelbezeichnung

1 Rendering

2 Detaillierte Erklärung jedes Effekts

1. Einfache Kachel

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #ff0000">  data-role</span><span style="color: #0000ff">="title"</span><span style="color: #0000ff">></span>  <span style="color: #008000"><!--</span><span style="color: #008000">定义一个磁贴</span><span style="color: #008000">--></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content iconic"</span><span style="color: #0000ff">></span><span style="color: #008000"><!--</span><span style="color: #008000">设置磁贴的内容</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">icon </span><span style="color: #0000ff">/></span> 
        <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

2, Kachel mit Titel und Ecken

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">span </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-label"</span><span style="color: #0000ff">></span>Label<span style="color: #0000ff"></</span><span style="color: #800000">span</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">设置磁贴的标题</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">span </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-badge"</span><span style="color: #0000ff">></span>5<span style="color: #0000ff"></</span><span style="color: #800000">span</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">设置磁贴下方的字数</span><span style="color: #008000">--></span>
        <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

3, ein Satz Bildkacheln

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content image-set"</span><span style="color: #0000ff">></span>  <span style="color: #008000"><!--</span><span style="color: #008000">定义一组图片</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

3, eine Bildkachel

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #ff0000"> data-role</span><span style="color: #0000ff">="fitImage"</span><span style="color: #ff0000"> data-format</span><span style="color: #0000ff">="square"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">正常图片大小，自动裁剪</span><span style="color: #008000">--></span>
        <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

4, Kacheln mit dynamischem Umblättereffekt

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="carousel"</span><span style="color: #ff0000"> data-role</span><span style="color: #0000ff">="carousel"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">带有旋转的样式的磁贴</span><span style="color: #008000">--></span>
                <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">><</span><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="http:www.baidu.com"</span><span style="color: #0000ff">><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></</span><span style="color: #800000">a</span><span style="color: #0000ff">></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">><</span><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images/1.jpg"</span><span style="color: #0000ff">></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

5. Wählen Sie den Kachelstil

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile element-selected"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">选中样式的磁贴</span><span style="color: #008000">--></span><span style="color: #000000">
        12321321
    </span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

6. Schieben Sie die Kachel mit Inhalt von unten nach oben

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content slide-up"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义内容是向上滑动的</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">触发焦点时向上滑动</span><span style="color: #008000">--></span><span style="color: #000000">
                ... Main slide content ...
            </span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide-over"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">触发焦点时由下向上滑动覆盖内容</span><span style="color: #008000">--></span><span style="color: #000000">
                ... Over slide content here ...
            </span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

7, der Inhalt gleitet von oben nach unten

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content slide-down"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义内容是向下滑动的</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span><span style="color: #008000"><!--</span><span style="color: #008000">触发焦点时向上滑动</span><span style="color: #008000">--></span><span style="color: #000000">
                ... Main slide content ...
            </span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide-over"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">触发焦点时由上向下滑动覆盖内容</span><span style="color: #008000">--></span><span style="color: #000000">
                ... Over slide content here ...
            </span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

8, der Inhalt gleitet von links nach rechts

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content slide-left"</span><span style="color: #0000ff">></span><span style="color: #008000"><!--</span><span style="color: #008000">定义内容是由左向右滑动的</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span><span style="color: #000000">
                ... Main slide content ...
            </span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide-over"</span><span style="color: #0000ff">></span><span style="color: #000000">
                ... Over slide content here ...
            </span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

9, der Definitionsinhalt gleitet von rechts nach links

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content slide-right"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义内容是由右向左滑动的</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span><span style="color: #000000">
                ... Main slide content ...
            </span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide-over"</span><span style="color: #0000ff">></span><span style="color: #000000">
                ... Over slide content here ...
            </span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

10, Vergrößerungseffekt

    <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content zooming"</span><span style="color: #0000ff">></span>  <span style="color: #008000"><!--</span><span style="color: #008000">定义内容放大的</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span><span style="color: #000000">
                ... Slide content here ...
            </span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

11, Reduktionseffekt

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content zooming-out"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义内容缩小的</span><span style="color: #008000">--></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="slide"</span><span style="color: #0000ff">></span><span style="color: #000000">
                ... Slide content here ...
            </span><span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

12, Auf- und Ab-Gleiteffekt

<span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-wide"</span><span style="color: #ff0000"> data-role</span><span style="color: #0000ff">="tile"</span><span style="color: #ff0000"> data-effect</span><span style="color: #0000ff">="slideUpDown"</span><span style="color: #0000ff">></span> <span style="color: #008000"><!--</span><span style="color: #008000">定义内容是滑动的 上下滑动 类似滚动效果</span><span style="color: #008000">--></span>
        <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="tile-content"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="live-slide"</span><span style="color: #0000ff">></span>...slide content...<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span><span style="color: #000000">
            ...
            </span><span style="color: #0000ff"><</span><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="live-slide"</span><span style="color: #0000ff">></span>...slide content2...<span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></</span><span style="color: #800000">div</span><span style="color: #0000ff">></span>

13, die Wirkung der Verwendung von ICon

Drei Quellcodeadressen

https://git.oschina.net/yudaming/metro

Vier persönliche Websites (Ermöglichung der gemeinsamen Nutzung verschiedener technischer Websites)

http://dmsite.chinacloudsites.cn/