也来“玩”Metro UI之磁贴（一）_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

也来“玩”Metro UI之磁贴（一）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:33 PM

Win8出来已有一段时间了，个人是比较喜欢Metro UI的。一直以来想用Metro UI来做个自己的博客，只是都没有空闲~~今天心血来潮，突然想自己弄一个磁贴玩玩，动手……然后就有了本篇。

Win8中的磁贴可调整大小，分组，还有更好玩的动态信息显示。网上也有了比较完整的Web Metro UI框架库，比较好的一个??Metro UI template：http://metro-webdesign.info/，（这个是收费的），还有许多其它的，可参看园子里园友（梦想天空）列举的：http://www.cnblogs.com/lhb25/archive/2013/04/11/10-metro-bootstraps-ui-templates.html。

本篇的磁贴只实现了简单的磁贴样式和选中效果，用CSS实现。考虑到磁贴的可选中性，想到了html中的复选框，核心原理其实就是用css伪类来实现。

先看效果截图吧：

看代码（很简单，也可在这里http://runjs.cn/detail/mirwgdac fork一份，实现你自己的，同时向大家推荐runjs.cn，这个真不错，和jsfiddle有的比。也欢迎关注我x-strong :)）：

  1 <!DOCTYPE html>  2 <html>  3     <head>  4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  5         <title>  6             Metro UI试手之Tile  7         </title>  8 <style type='text/css'>  9 body{font-family:'微软雅黑'; 10     background-color:#8b37f1;} 11 p{color:white;} 12 .tile{ 13     display:inline-block; 14     width:200px; 15     height:100px; 16     margin:5px; 17     padding:0; 18     background-color:blue; 19     color:white; 20     font-family:'微软雅黑'; 21     font-size:30px; 22     vertical-align:middle; 23 } 24  25  26 .tile-yellow{ 27     background-color:yellow; 28     color:blue; 29 } 30  31 .tile-green{ 32     background-color:green; 33     color:white; 34 } 35 .tile label{ 36     width:200px; 37     height:100px; 38     display:block; 39 } 40 .content{ 41     display:inline-block; 42     height:100px; 43     width:200px; 44     line-height:100px; 45     vertical-align:middle; 46     text-align:center; 47 } 48 .tile input[type='checkbox']{ 53     float:right; 59     display:none; 60 } 61 .symbol{ 62     display:inline-block !important;  63     width:40px;  64     height:40px; 65     position:relative; 66     top:2px; 67     right:2px; 68     float:right; 69     margin-bottom:-40px; 70 } 71 .tile input[type='checkbox']:checked ~.symbol{     72     background-image:url('http://sandbox.runjs.cn/uploads/rs/169/rvy7e5su/tile_selected_symbol.png'); 73 } 74 </style> 75     </head> 76     <body> 77         <p> 78             Metro UI之磁贴（Tile） 79         </p> 80         <div class='tile'> 81             <label> 82                  83                 <input type='checkbox' /> 84                 <span class='symbol'> 85                                           86                 </span> 87                 <span class='content'> 88                     简单磁贴 89                 </span> 90             </label> 91         </div> 92         <div class='tile tile-yellow'> 93             <label> 94                  95                 <input type='checkbox' /> 96                 <span class='symbol'> 97                                           98                 </span> 99                 <span class='content'>100                     简单磁贴101                 </span>102             </label>103         </div>104         105         <div class='tile tile-green'>106             <label>107                 108                 <input type='checkbox' />109                 <span class='symbol'>110                                          111                 </span>112                 <span class='content'>113                     简单磁贴114                 </span>115             </label>116         </div>117     </body>118 </html>

Metro UI之磁贴（Tile）

简单磁贴

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存，這玩意兒，說簡單也簡單，說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章，結果用戶打開還是老版本，這滋味，誰受得了？這篇文章，咱就來扒一扒這背後的彎彎繞繞，以及如何優雅地解決這個問題。讀完之後，你就能輕鬆應對各種緩存難題，讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存，說白了就是瀏覽器或者服務器為了提高訪問速度，把一些靜態資源（比如圖片、CSS、JS）或者頁面內容存儲起來。下次訪問時，直接從緩存裡取，不用再重新下載，速度自然快。但這玩意兒，也是個雙刃劍。新版本上線，