Metro-UI系统-1-tile标签

php中文网

发布时间：2016-10-23 23:59:59

1990人浏览过

来源于php中文网

原创

一效果图

二各个效果的详解

1，简单磁贴

<div class="tile"  data-role="title">  
        <div class="tile-content iconic">
            <icon /> 
        div>
    div>

2，带有标题和边角的磁贴

<div class="tile">
        <div class="tile-content">
            <span class="tile-label">Labelspan> 
            <span class="tile-badge">5span> 
        div>
    div>

3，一组图片的磁贴

<div class="tile">
        <div class="tile-content image-set">  
            <img src="images/1.jpg">
            <img src="images/1.jpg">
            <img src="images/1.jpg">
            <img src="images/1.jpg">
            <img src="images/1.jpg">
        div>
    div>

3,一张图片的磁贴

<div class="tile">
        <div class="tile-content">
            <img src="images/1.jpg" data-role="fitImage" data-format="square"> 
        div>
    div>

4，带有翻页动态效果的磁贴

<div class="tile">
        <div class="tile-content">
            <div class="carousel" data-role="carousel"> 
                <div class="slide"><a href="http:www.baidu.com"><img src="images/1.jpg">a>div>
                <div class="slide"><img src="images/1.jpg">div>
            div>
        div>
    div>

5，选择样式的磁贴

<div class="tile element-selected"> 
        12321321
    div>

6，内容由下向上滑动磁贴

<div class="tile">
        <div class="tile-content slide-up"> 
            <div class="slide"> 
                ... Main slide content ...
            div>
            <div class="slide-over"> 
                ... Over slide content here ...
            div>
        div>
    div>

创想C2C多用户商城系统

创想C2C商城系统，系统功能仿照淘宝设计，采用模块标签技术和静态html生成技术基于Asp.Net/C#+SQL的开发的创想多用户商城系统，具有智能化、高扩展、稳定安全等特性，后台可自由添加频道，自由修改界面风格，商品无限级分类，支持在线支付整合，通过安装和使用创想C2C商城系统，就可以轻松建立起专业大型的网上交易平台。创想C2C多用户商城系统5.6.3.8版本升级功能1.网站地区设置功能的增

下载

7,内容由上向下滑动

<div class="tile">
        <div class="tile-content slide-down"> 
            <div class="slide">
                ... Main slide content ...
            div>
            <div class="slide-over"> 
                ... Over slide content here ...
            div>
        div>
    div>

8，内容由左向右滑动

<div class="tile">
        <div class="tile-content slide-left">
            <div class="slide">
                ... Main slide content ...
            div>
            <div class="slide-over">
                ... Over slide content here ...
            div>
        div>
    div>

9，定义内容是由右向左滑动

<div class="tile">
        <div class="tile-content slide-right"> 
            <div class="slide">
                ... Main slide content ...
            div>
            <div class="slide-over">
                ... Over slide content here ...
            div>
        div>
    div>

10，放大效果

    <div class="tile">
        <div class="tile-content zooming">  
            <div class="slide">
                ... Slide content here ...
            div>
        div>
    div>

11，缩小效果

<div class="tile">
        <div class="tile-content zooming-out"> 
            <div class="slide">
                ... Slide content here ...
            div>
        div>
    div>

12，上下滑动的效果

<div class="tile-wide" data-role="tile" data-effect="slideUpDown"> 
        <div class="tile-content">
            <div class="live-slide">...slide content...div>
            ...
            <div class="live-slide">...slide content2...div>
        div>
    div>