BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

HTML 9ボックスレイアウトの実装方法

2022-01-26 06:54:15

ウェブサイトのレイアウトの多様性は、私たちフロントエンドの得意とするところです 最近、UCブラウザのデフォルトのタブページが9ボックスレイアウトを採用しているのを見かけました。次の勉強で、ここで、私は一緒に学ぶためにコードを共有します 効果は次のとおりです。

XML/HTMLコード 内容をクリップボードにコピーする
  1. <スパン <スパン >
  2. <スパン <

    html >
  3. <スパン <スパン <

    ヘッド >
  4. <スパン <スパン <

    メタ 文字セット = "utf-8"。 >
  5. <スパン <スパン <

    タイトル > 完全互換のHTML9ボックスレイアウト < タイトル >
  6. <スパン <スパン <

    メタ http-equiv = "X-UA-Compatible" コンテンツ = "IE=edge"。 > <スパン
  7. <スパン <スパン <

    ヘッド >
  8. <スパン <スパン <

    本体 >
  9. <スパン <スパン <

    html >
  10. <スパン <スパン <

    ヘッド >
  11. <スパン <スパン <

    スタイル タイプ = "text/css"。 >
  12. /* ブラウザのデフォルトのタブスタイルをリセット */   
  13. body,ul,li{margin:0;padding:0;}となります。  
  14. .xttblog{。  
  15.  width: 1200px;   
  16. <スパン  height: 170px;   
  17.  margin-top:50px。  
  18.  margin-left: auto;   
  19.  margin-right: auto;   
  20. }   
  21. .box{margin-left: 5px;margin-top: 5px;list-style-type:none;}.   
  22. .box:after{   
  23.  content: "." ;   
  24.  display: block;   
  25.  line-height: 0;   
  26.  width:0;   
  27.  height: 0;   
  28. <スパン  clear: both;   
  29. <スパン  visibility: hidden;   
  30.  overflow: hidden;   
  31. }   
  32. .box li{float:left;line-height: 230px;}.   
  33. .box li a,.box li a:visited{。  
  34.  display:blockを使用します。  
  35.  ボーダー 5px solid #ccc。  
  36.  width: 380px;   
  37. <スパン  height: 230px;   
  38.  text-align: center;   
  39.  margin-left: -5px。  
  40.  margin-top: -5px;   
  41.  position: relative;   
  42.  z-index: 1;   
  43. }   
  44. .box li a:hover{border-color: #f00;z-index: 2;}   
  45. <スパン <

    スタイル >
  46. <スパン <スパン <

    ヘッド >
  47. <スパン <スパン <

    本体 >
  48. <スパン <

    ディブ クラス = "xttblog"。 > <スパン
  49. <スパン <スパン <

    ウル クラス = "ボックス"。 > <スパン
  50. <スパン <スパン <

    li > < a ホールド = "#" タイトル = "1"。 > <スパン < イムグ src = <スパン "sh.jpg" /> < a > < li >
  51. <スパン <スパン <

    li > < a ホールド = "#" タイトル = "2"。 > <スパン < イムグ src = <スパン "bd.jpg" /> < a > < li >
  52. <スパン <スパン <

    li > < a ホールド = "#" <スパン タイトル <スパン = <スパン "3"。 > <スパン < イムグ src = <スパン "tb.jpg" /> < a > < li >
  53. <スパン <スパン <

    li > < a ホールド = "#" <スパン タイトル <スパン = <スパン "4" > <スパン < イムグ src = <スパン "fh.jpg" /> < a > < li >
  54. <スパン <スパン <

    li > < a ホールド = "#" <スパン タイトル <スパン = <スパン "5" > <スパン < イムグ src = <スパン "tb.jpg" /> < a > < li >
  55. <スパン <スパン <

    li > < a ホールド = "#" <スパン タイトル <スパン = <スパン "6" <スパン > <スパン < イムグ src = <スパン "tb.jpg" /> < a > < li >
  56. <スパン <

    li > < a ホールド = "#" <スパン タイトル     <スパン = <スパン "7" > <スパン < イムグ src = <スパン "tb.jpg" /> < a > < li >
  57. <スパン <スパン <

    li > < a ホールド = "#" <スパン タイトル <スパン = <スパン "8" <スパン > <スパン < イムグ src = <スパン "tb.jpg" /> < a > < li >
  58. <スパン <スパン <

    li > < a ホールド = "#" <スパン タイトル <スパン = <スパン "9" <スパン > <スパン < イムグ src = <スパン "tb.jpg" /> < a > < li >
  59. <スパン <スパン <

    ウル >
  60. <スパン <スパン <

    ディブ >
  61. <スパン <スパン <

    本体 >
  62. <スパン <スパン <

    html >
  63. <スパン

以上就是本文的全部内容，希望对大家的学习有所帮助。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します