HTML 9グリッドレイアウトの実装方法

HTML 9グリッドレイアウトの実装方法

ウェブサイトのレイアウトの多様化は、当社のフロントエンドの得意分野です。最近、UC ブラウザのデフォルトのタブ ページで 9 グリッド レイアウトが使用されていることに気付きました。勉強してみたので、一緒に学べるようにコードを共有します！効果は以下のとおりです。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2. <html>​​   
  3. <ヘッド>   
  4. <メタ 文字セット= "utf-8" >   
  5. < title >完全に互換性のある HTML 9 グリッド レイアウト</ title >   
  6. <メタ  http-equiv = "X-UA 互換"  コンテンツ= "IE=edge" >   
  7. </ヘッド>   
  8. <本文>   
  9. <html>​​   
  10. <ヘッド>   
  11. <スタイル タイプ= "text/css" >   
  12. /** ブラウザのデフォルトのタブスタイルをリセットする */
  13. 本文、ul、li{マージン:0;パディング:0;}
  14. .xttblog{
  15. 幅: 1200ピクセル;
  16. 高さ: 170ピクセル;
  17. 上マージン:50px;
  18. 左マージン: 自動;
  19. 右マージン: 自動;
  20. }
  21. .box{左余白: 5px;上余白: 5px;リストスタイルタイプ:なし;}
  22. .box:後{
  23. コンテンツ： "。";
  24. 表示: ブロック;
  25. 行の高さ: 0;
  26. 幅:0;
  27. 高さ: 0;
  28. クリア: 両方;
  29. 可視性: 非表示;
  30. オーバーフロー: 非表示;
  31. }
  32. .box li{float:left;行の高さ: 230px;}
  33. .box li a,.box li a:訪問{
  34. 表示:ブロック;
  35. 境界線: 5px 実線 #ccc;
  36. 幅: 380ピクセル;
  37. 高さ: 230px;
  38. テキスト配置: 中央;
  39. 左マージン: -5px;
  40. 上マージン: -5px;
  41. 位置: 相対的;
  42. zインデックス: 1;
  43. }
  44. .box li a:hover{border-color: #f00;z-index: 2;}
  45. </スタイル>   
  46. </ヘッド>   
  47. <本文>   
  48. < div  クラス= "xttblog" >   
  49.   < ul  クラス= "ボックス" >   
  50.    < li > < a   href = "#"  タイトル= "1" > <画像  src = "sh.jpg" /> </ a > </ li >   
  51.    < li > < a   href = "#"  タイトル= "2" > <画像  src = "bd.jpg" /> </ a > </ li >   
  52.    < li > < a   href = "#"  タイトル= "3" > <画像  src = "tb.jpg" /> </ a > </ li >   
  53.    < li > < a   href = "#"  タイトル= "4" > <画像  src = "fh.jpg" /> </ a > </ li >   
  54.    < li > < a   href = "#"  タイトル= "5" > <画像  src = "tb.jpg" /> </ a > </ li >   
  55.    < li > < a   href = "#"  タイトル= "6" > <画像  src = "tb.jpg" /> </ a > </ li >   
  56.    < li > < a   href = "#"  タイトル= "7" > <画像  src = "tb.jpg" /> </ a > </ li >   
  57.    < li > < a   href = "#"  タイトル= "8" > <画像  src = "tb.jpg" /> </ a > </ li >   
  58.    < li > < a   href = "#"  タイトル= "9" > <画像  src = "tb.jpg" /> </ a > </ li >   
  59.   </ ul >   
  60. </div>​​   
  61. </本文>   
  62. </html>​​   
  63.   

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。

<<:  Linux の非常に詳細な gcc アップグレード プロセス

>>:  JavaScript でプライベート メンバーを作成する

推薦する

Vueでデータ例を定義する方法

序文開発プロセスにおいて、変数の定義は非常に頻繁かつ基本的なタスクです。変数の使用シナリオと範囲に応...

mysql 5.6.23 winx64.zip インストール詳細チュートリアル

WindowsにMySQLの圧縮バージョンをインストールする方法の詳細については、以下を参照してくだ...

Vue-Jest自動テストの基本構成の詳しい説明

目次インストール構成よくある間違い事前テスト作業依存関係の扱いインスタンスとDOMを生成する要約する...

Vueパンくずコンポーネントのカプセル化方法

Vueはパンくずコンポーネントをカプセル化して参照します。具体的な内容は次のとおりです。効果を達成す...

MySQL マルチテーブル結合クエリ例の説明

実際のプロジェクトでは、複数のテーブル間に関係が存在します。 1 つのテーブル内のすべてのデータを取...

CentOS に Docker をインストールし、Springboot で Docker をリモート公開する方法

目次1. CentOS7.0へのJDK1.8のインストール2. Dockerのインストール3.Doc...

友達を追加せずにオンラインチャットするために一時的な QQ ダイアログボックスをポップアップ表示する方法

実際、これは非常に簡単です。imgにaタグを追加し、 <a href='tencent...

MySQL のストレージ エンジンの違いと比較

MyISAM ストレージエンジンMyISAM は ISAM ストレージ エンジンに基づいており、それ...

MySQL InnoDB ストレージ エンジンの詳細

序文MySQL では、InnoDB はストレージ エンジン レイヤーに属し、プラグインとしてデータベ...

意外と知らないLinuxのSSHコマンドの使い方7選を徹底解説

システム管理者は複数のサーバーを同時に管理する場合があり、これらのサーバーは異なる場所に配置されてい...

階段効果を実現するためのWeChatアプレットカスタムメニューナビゲーション

設計意図ページを開発する際には、ページ上のナビゲーション メニューをクリックしたときにページを対応す...

Linuxオペレーティングシステムは、タスクマネージャーの視覚化機能を実装するためにPythonを使用しています。

1. Pythonのインストール1. フォルダーを作成します。 mkdir python フォルダ...

Vue コンポーネント値転送中のデータ損失の分析と解決

序文前回の記事では、JavaScript の 2 つのデータ型、基本型と参照型、および参照型の浅いコ...

WeChatアプレットbindtapとcatchtapの違いの詳細な説明

目次1. イベントとは何ですか? 2. イベントの使い方3. バインドタップとキャッチタップの違い4...

テーブルパーティションとパーティション分割とは何ですか?MySqlデータベースパーティションとテーブルパーティション分割方法

1. テーブルとパーティションを分割する必要があるのはなぜですか?日常の開発では、大きなテーブルに遭...