也来“玩”Metro UI之磁贴（二）

继昨天的“也来“玩”Metro UI之磁贴（一）”之后，还不过瘾，今天继续“玩”吧——今天把单选的功能加进来，还有磁贴的内容，还加了发光效果（CSS3，IE9+浏览器），当然，还是纯CSS，真的要感谢“现代”浏览器~~，废话少说，先上图，然后代码……

效果图：

鼠标经过时显示内容：

代码来了:)：

 <!DOCTYPE html>

 <html>
 <head>
     <meta name="viewport" content="width=device-width" />
     <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">&nbsp;</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>

在线“玩玩”或者Fork一份自己的：

Metro UI之磁贴（Tile） IE9+

多选（input [ checkbox ]）

  简单磁贴 这是磁贴的内容

  简单磁贴 这是磁贴的内容

  简单磁贴 这是磁贴的内容

单选（input [ radio ]）

  简单磁贴 这是磁贴的内容

  简单磁贴 这是磁贴的内容

  简单磁贴 这是磁贴的内容

觉得可以的请推荐哦:)