コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTML9マスレイアウトの実装方法_HTML/Xhtml_Webページ制作

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

WBOY
リリース： 2016-05-16 16:36:01
オリジナル
3117 人が閲覧しました

多様なウェブサイトのレイアウトは当社のフロントエンド専門分野です。最近、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>

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

関連ラベル：
html 九公閣 レイアウト
ソース：php.cn
前の記事：なし 次の記事：HTMLとCSSを使って自分だけの温かい男「ダバイ」を作る_HTML/Xhtml_Webページ制作
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
から 2024-04-16 09:34:16
0
0
4687
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...
から 2024-04-06 17:40:41
0
2
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート