win8 磁贴

最新推荐文章于 2021-12-07 08:38:12 发布

原创最新推荐文章于 2021-12-07 08:38:12 发布 · 943 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#磁贴

总结专栏收录该内容

19 篇文章

订阅专栏

今天接到新任务，设计磁贴，新名词，新领域！

研究了半天，结论：貌似好像本项目只适合用JQERY和CSS解决问题！

eg:http://www.cnblogs.com/redleaf-me/p/3317924.html

http://www.cnblogs.com/lhb25/archive/2013/03/19/windows-8-metro-style-icon-packs.html

源码：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Metro UI之磁贴（Tile）</title>
        <style type='text/css'>
body {
    font-family: '微软雅黑';
    background-color: #8b37f1;
}

p {
    color: white;
}


.tile {
    display: inline-block;
    width: 200px;
    height: 100px;
    margin: 5px;
    padding: 0;
    overflow: hidden;
    background-color: blue;
    color: white;
    font-family: '微软雅黑';
    font-size: 30px;
    vertical-align: middle;
    cursor: pointer !important;
    box-shadow: 0px 0px 5px #eee;
}

    .tile label {
        width: 200px;
        height: 100px;
        display: block;
    }

    .tile .title {
        display: inline-block;
        height: 100px;
        width: 200px;
        line-height: 100px;
        vertical-align: middle;
        text-align: center;
    }

    .tile .content {
        position: relative;
        height: 100px;
        padding: 5px;
        display: block;
        word-wrap: break-word;
        word-break: break-all;
        font-family: '微软雅黑';
        font-size: 14px;
    }

    .tile:hover {
        -moz-box-shadow: 0px 0px 5px #ddd;
        -webkit-box-shadow: 0px 0px 5px #ddd;
        box-shadow: 0px 0px 5px #ddd;
    }

        .tile:hover .content {
            margin-top: -100px;
        }

    .tile input[type='checkbox'], .tile input[type='radio'] {
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        float: right;
        position: relative;
        outline: none !important;
        border: 0 !important;
        top: 0;
        right: 0;
        display: none;
    }

    .tile .symbol {
        display: inline-block !important;
        width: 40px;
        height: 40px;
        position: relative;
        top: 2px;
        right: 2px;
        float: right;
        margin-bottom: -40px;
        z-index: 10000;
    }

    .tile input[type='checkbox']:checked ~ .symbol, .tile input[type='radio']:checked ~ .symbol {
        background-image: url('../Images/tile_selected_symbol.png');
    }

/*颜色*/
.tile-blue {
    background-color: blue;
    color: white;
}

    .tile-blue .content {
        background-color: white;
        color: blue;
    }

.tile-yellow {
    background-color: yellow;
    color: blue;
}

    .tile-yellow .content {
        background-color: blue;
        color: yellow;
    }

.tile-green {
    background-color: green;
    color: white;
}

    .tile-green .content {
        background-color: white;
        color: green;
    }

.tile-pink {
    background-color: deeppink;
    color: white;
}

    .tile-pink .content {
        background-color: white;
        color: deeppink;
    }

</style>
</head>
<body>
    <p>
        Metro UI之磁贴（Tile） <span style="font-style:italic; font-size:12px; color:red;">IE9+</span>
    </p>
    <p>多选（input [ checkbox ]）</p>
    <div class="tile tile-blue">
        <label>
            <input type="checkbox" />
            <span class="symbol">  
            </span><!--这个地方“<span class="symbol"></span>”刚才被编辑器直接过滤掉，也过于“智能”了吧，不是所有的空标签就真的是没有用的……好吧，这样“<span class="symbol"> </span>”，终于把效果效果保住了——这可是关系到钩钩的——无钩怎么火？有”钩“才火嘛 :) -->
            <span class="title">
                简单磁贴
            </span>
            <span class="content">这是磁贴的内容</span>
        </label>
    </div>
    <div class="tile tile-yellow">
        <label>
            <input type="checkbox" />
            <span class="symbol">
            </span>
            <span class="title">
                简单磁贴
            </span>
            <span class="content">这是磁贴的内容</span>
        </label>
    </div>

    <div class="tile tile-green">
        <label>
            <input type="checkbox" />
            <span class="symbol">
            </span>
            <span class="title">
                简单磁贴
            </span>
            <span class="content">这是磁贴的内容</span>
        </label>
    </div>

    <p>单选（input [ radio ]）</p>
    <div class="tile tile-green">
        <label>
            <input type="radio" name="tile_radio" />
            <span class="symbol">

            </span>
            <span class="title">
                简单磁贴
            </span>
            <span class="content">这是磁贴的内容</span>
        </label>
    </div>
    <div class="tile tile-pink">
        <label>
            <input type="radio" name="tile_radio" />
            <span class="symbol">
            </span>
            <span class="title">
                简单磁贴
            </span>
            <span class="content">这是磁贴的内容</span>
        </label>
    </div>
    <div class="tile tile-blue">
        <label>
            <input type="radio" name="tile_radio" />
            <span class="symbol">
            </span>
            <span class="title">
                简单磁贴
            </span>
            <span class="content">这是磁贴的内容</span>
        </label>
    </div>
</body>
</html>

效果：