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はシンプルなメモ帳機能を実装します

この記事では、参考までに、簡単なメモ帳機能を実装するためのVueの具体的なコードを紹介します。具体的...

Element-UI の Select と Cascader にポップアップ下部アクション ボタンを追加する方法

下図のように、 selectポップアップレイヤーの下部に操作ボタンを配置するのが一般的な設計方法です...

HTML チュートリアル: 順序なしリスト

<br />原文: http://andymao.com/andy/post/102.h...

mysql5.7.20 のインストールと設定方法のグラフィック チュートリアル (mac)

MySQL 5.7.20のインストールと設定方法のグラフィックチュートリアルをあなたと共有します1...

10 HTML テーブル関連タグ

実際、多くの人が「テーブルは絶対に使用すべきではないと聞いたことがある」と言いますが、これは絶対に間...

MySQL データをエクスポートおよびインポートするための HeidiSQL ツール

場合によっては、SQL へのデータのエクスポートとインポートを容易にするために、特定のツールを使用し...

インタビュアーはCSSで固定アスペクト比を実現する方法を尋ねました

この質問に関連するニーズはまだないかもしれませんし、面接でこの質問をされたことがないかもしれませんが...

LeetCode の SQL 実装 (177. 給与が N 番目に高い)

[LeetCode] 177. 最も高い給与従業員テーブルからn番目に高い給与を取得する SQL ...

Linux でファイルを削除するさまざまな方法の効率の比較

Linux で大量のファイルを削除する効率をテストします。まず500,000個のファイルを作成する$...

Linux オペレーティング システムに Apache サービスをインストールする方法

ダウンロードリンク:動作環境VMware 仮想マシンの CentOS 7.6セキュアCRT Xftp...

a タグをクリックして入力ファイルのアップロードダイアログボックスを表示する方法

htmlコードをコピーコードは次のとおりです。 <SPAN class=tag><...

DockerはCMDまたはENTRYPOINTコマンドを使用して複数のサービスを同時に起動します

要件: Celery は Django に導入されています。Django プロジェクトを開始するとき...

LinuxでHomebrewを使用する正しい方法

多くの人が Linux Homebrew を使用しています。これをより良く使用するための 3 つのヒ...

JSは星を消すケースを実現する

この記事の例では、星を消すためのJSの具体的なコードを参考までに共有しています。具体的な内容は次のと...

Chromeブラウザ設定の新バージョンではクロスドメイン実装が可能

序文現在、フロントエンドは主に webpack の devServer の構成を通じてクロスドメイン...