Home >Web Front-end >HTML Tutorial >Let's also 'play” Metro UI tiles (1)_html/css_WEB-ITnose
Let's also 'play” Metro UI tiles (1)_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:33:551690browse
Win8 has been out for a while, and I personally prefer Metro UI. I have always wanted to use Metro UI to create my own blog, but I just don’t have the time~~ Today I had a whim, and suddenly I wanted to make a tile to play with, and do it... and then this article came into being.
Tiles in Win8 can be resized, grouped, and have more interesting dynamic information display. There is also a relatively complete Web Metro UI framework library on the Internet. A better one is Metro UI template: http://metro-webdesign.info/ (this is paid). There are many others. You can refer to the garden. Listed by garden friend (Dream Sky): http://www.cnblogs.com/lhb25/archive/2013/04/11/10-metro-bootstraps-ui-templates.html.
The tiles in this article only implement simple tile styles and selection effects, implemented with CSS. Considering the optional neutrality of tiles, I thought of check boxes in HTML. The core principle is actually implemented using CSS pseudo-classes.
Let’s take a look at the screenshot of the effect first:
Look at the code (very simple, you can also find it here http://runjs.cn/detail/ Fork a copy of mirwgdac to implement your own, and recommend runjs.cn to everyone. This is really good, better than jsfiddle. You are also welcome to follow me 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 (Tile)
Simple Tile
Simple Tile
Simple Tile