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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:33 PM

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

シンプルタイル

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

See all articles