検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML9マスレイアウトの実装方法_HTML/Xhtml_Webページ制作

HTML9マスレイアウトの実装方法_HTML/Xhtml_Webページ制作

WBOY
WBOYオリジナル
2016-05-16 16:36:013120ブラウズ

多様なウェブサイトのレイアウトは当社のフロントエンド専門分野です。最近、UC ブラウザのデフォルトのタブ ページが 9 マスのグリッド レイアウトを使用していることに気づきました。いくつか調べてみたので、ここでコードを共有して一緒に学びましょう！効果は以下の通りです:

XML/HTML コードコンテンツをクリップボードにコピー
  1. >
  2. <html>
  3. <頭>
  4. <メタ charset="utf- 8">
  5. <title>完全互換の HTML 9 マスグリッドレイアウト< ;/ タイトル>
  6. <メタ http-equiv=" " > 頭>
  7. <ボディ>
  8. <html>
  9. <頭>
  10. <スタイル タイプ
    11. =
  11. "text/ css"> /**ブラウザのデフォルトのタブスタイルをリセットする*/ body,ul,li{margin:0;padding:0;} .xttblog{
  12. 幅: 1200px;
  13. 高さ: 170px;
  14. マージントップ:50px;
    15. マージン左: 自動;
    16. マージン右: 自動;
    17. }
    18. .box{margin-left: 5px;margin-top: 5px;list-style-type:none;}
    19. .box:after{
    20. コンテンツ: ".";
  20. 表示: ブロック
  21. 行の高さ: 0;
    22. 幅:0;
    23. 高さ: 0;
  23. クリア:
  24. 可視性: 非表示
  25. オーバーフロー: 非表示
  26. }
  27. .box li{float:left;line-height: 230px;}
  28. .box li a,.box li a:visited{
  29. 表示:ブロック
  30. 境界線: 5px 実線
  31. 幅: 380px;
    32. 高さ: 230px;
  32. テキスト配置: 中央;
  33. マージン左: -5px;
    34. マージントップ: -5px;
  34. 位置: 相対的;
    35. z インデックス: 1;
  35. }
  36. .box li a:hover{border-color: #f00;z-index: 2;}  
  37. スタイル>
  38. 頭>
  39. <ボディ>
  40. <div class="xttblog" >
  41. <ul クラス="ボックス" >
  42. <リ><a href="#" title=" 1"><img src="sh.jpg"/>a>リ>
  43. <リ><a href="#" title=" 2"><img src="bd.jpg"/>a>リ>
  44. <リ><a href="#" title=" 3"><img src="tb.jpg"/>a>リ>
  45. <リ><a href="#" title=" 4"><img src="fh.jpg"/>a>リ>
  46. <リ><a href="#" title=" 5"><img src="tb.jpg"/>a>リ>
  47. <リ><a href="#" title=" 6"><img src="tb.jpg"/>a>リ>
  48. <リ><a href="#" title=" 7"><img src="tb.jpg"/>a>リ>
  49. <リ><a href="#" title=" 8"><img src="tb.jpg"/>a>リ>
  50. <リ><a href="#" title=" 9"><img src="tb.jpg"/>a>リ>
  51. ul>
  52. div>
  53. ボディ>
  54. html>

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

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：なし次の記事：用HTML和CSS打造属于自己的暖男“大白”_HTML/Xhtml_网页制作

関連記事

続きを見る