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 でプライベート メンバーを作成する

推薦する

テーブル関連の配置とJavascript操作テーブル、tr、td

適切に機能するテーブル プロパティ設定:コードをコピーコードは次のとおりです。 <テーブル セ...

uniapp vue および nvue カルーセル コンポーネントのサンプル コード

vueの部分は以下のとおりです。 <テンプレート> <ビュークラス="&...

MySQL コール初心者が犯しがちな 11 の間違いのまとめ

序文セキュリティ部門からSQLインジェクションやXSS攻撃の脆弱性などに関する警告メールを頻繁に受け...

MySQL パフォーマンス チューニングについて知っておくべき 15 個の重要な変数 (要約)

序文： MYSQL は最も人気のある WEB バックエンド データベースです。最近、NOSQL がま...

Mysql の遅いクエリ操作の概要

MySQL の遅いクエリの説明MySQL スロー クエリ ログは、MySQL が提供するログ レコー...

異なるインデックスを更新してMySQLのデッドロックルーチンを解決する

前回の記事では、ソース コードを使用してロック関連の情報をデバッグする方法を紹介しました。ここでは、...

MySQLのストレージエンジンの詳細な説明

MySQL ストレージ エンジンの概要ストレージ エンジンとは何ですか? MySQL のデータは、さ...

フロントエンドパフォーマンス最適化に関する補足記事

序文私は、Web サイトのフロントエンド パフォーマンス最適化のための JavaScript と C...

MySQL 8.0.18 ハッシュ結合は左/右結合をサポートしていません 左と右の結合の問題

MySQL 8.0.18 では、インデックスが作成されていないフィールドに適用でき、等価値の関連付け...

MySQLのファジークエリのような遅い速度を解決する方法

質問: インデックスは作成されているのに、Like ファジー クエリがまだ遅いのはなぜですか?インデ...

MySQL 全体または単一のテーブルデータのエクスポート

単一のテーブルをエクスポートするmysqldump -u ユーザー -p db名 テーブル名 >...

MySQL ロック関連知識のまとめ

MySQL のロックロックは、並行環境におけるリソースの競合を解決する手段です。その中でも、楽観的並...

Linux Tensorflow2.0のインストール問題を解決する

conda アップデート conda pip で tf-nightly-gpu-2.0-previ...

CSS3は小さな矢印のさまざまなグラフィック効果を実現します

CSS を使ってさまざまなグラフィックを実現できるのは素晴らしいことです。画像を切り取る必要はなく、...

CSSカスケーディングメカニズムについての簡単な説明

CSS にカスケード メカニズムがあるのはなぜですか? CSS では、同じ要素の特定のプロパティに同...