Metro UI タイルも「遊んで」みよう (1)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

Metro UI タイルも「遊んで」みよう (1)_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:33:55

オリジナル

1625 人が閲覧しました

Win8 がリリースされてしばらく経ちますが、個人的には Metro UI の方が好きです。ずっとMetro UIを使って自分のブログを作りたいと思っていたのですが、時間がありません~~ 今日は思いつきで、急にタイルを作って遊んでみようと思い立ちました…そしてそしてこの記事が生まれました。

Win8 のタイルは、サイズ変更、グループ化が可能で、より興味深い動的な情報表示が可能です。インターネット上には、比較的完全な Web Metro UI フレームワークライブラリもあります。Metro UI テンプレートは、http://metro-webdesign.info/ にあります。他にもたくさんあります。ガーデンフレンド (Dream Sky) によるリスト: http://www.cnblogs.com/lhb25/archive/2013/04/11/10-metro-bootstraps-ui-templates.html。

この記事のタイルは、CSS で実装された単純なタイルスタイルと選択効果のみを実装しています。タイルのオプションの中立性を考慮して、HTML のチェックボックスを考えました。その中心となる原則は、実際には CSS 疑似クラスを使用して実装されています。

最初にエフェクトのスクリーンショットを見てみましょう:

コードを見てください (非常に簡単です。ここ http://runjs.cn/detail/mirwgdac でコピーをフォークして独自のコードを実装することもできます)そして、jsfiddle と比較して、runjs を皆さんにお勧めします。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>

ログイン後にコピー

Simple Tile

シンプルタイル