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

推薦する

Nginxを使ってサーバー内で複数コンテナの共存を実現する方法

背景Tencent Linux クラウド ホストがあり、その上に Docker (ServiceDo...

MySQL 実験: explain を使用してインデックスの傾向を分析する

概要インデックス作成は、MySQL で習得しなければならないスキルであり、MySQL クエリの効率を...

フロントエンドエンジニアが作ったクールなインタラクティブウェブサイトを推薦します

ウェブサイトリンク: http://strml.net/サミュエル・リード著ヒント: 昨日、Mome...

Vue で HTML 5 ドラッグ アンド ドロップ API を使用する方法

ドラッグ アンド ドロップ API は、ドラッグ可能な要素を HTML に追加し、ドラッグ可能な豊富...

モバイル アプリのユーザー インターフェース設計に関する 10 のヒント

ヒント1: 集中力を保つ最高のモバイル アプリは、1 つのことを非常にうまく行うことに重点を置いてい...

Spring Boot Docker パッケージング ツールの概要

目次スプリングブートDocker spring-boot-maven-プラグインSpotify Ma...

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

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

フロートをクリアするための CSS メソッドの概要

フロートはWebページのレイアウトでよく使用されますが、フローティングブロックレベル要素は標準のドキ...

WebpackはTypeScriptコードをパッケージ化するためのスキャフォールディングを構築します

フォルダを作成するディレクトリ構造: dabaots npm init -yを初期化して packa...

ツリー チャートの実装方法に関する Echarts チュートリアル

ツリーマップは主にツリーのようなデータ構造を視覚化するために使用され、特殊なタイプの階層です。これを...

MySQL にテキストと画像を保存する方法

Oracle の大きなテキスト データ型 Clob 長いテキスト型 (MySQL ではサポートされて...

Docker の MySQL コンテナのタイムゾーン問題の修正

序文Ahhang が Springboot プロジェクトを開発していたとき、フロントエンドから検証コ...

MySQL シリーズ 7 MySQL ストレージ エンジン

1. MyISAM ストレージエンジン欠点:トランザクションはサポートされていません最小粒度ロック:...

React の調整アルゴリズム Diffing アルゴリズム戦略の詳細な説明

目次アルゴリズム戦略単一ノードの差分配列ノードの差分キー値の使用要件アルゴリズム戦略React の調...

ins タグと del タグの属性と使用法

insとdel は、HTML 4.0 で導入され、文書の作成時に作成者が共同作業できるようにし、また...