今回は、H5 セマンティック タグの実践例をお届けします。 H5 セマンティック タグを使用する際の 注意事項 は何ですか? ここで実際のケースを見てみましょう。
ページレイアウトはhtml5要素に基づいています。したがって、始める前に HTML5 要素についてよく理解し、そのセマンティクスがレイアウトに適合するかどうかを確認することが重要です。
HTML5 の構造
HTML5 コードを記述するときは、単に
従来の div 要素を置き換えるために使用できる新しいタグの 1 つは、
をラップするために使用される
最初はページのコンテンツを折り返すために
div 要素内では、各ブログ投稿が独自の Article 要素でラップされます。
一連のブログの下には、ページ分割された 2 つのリンクがあります。通常、ページネーション リンクの重要性は、
と同等ではありません。ただし、このブログ レイアウトでは、ページネーション リンクがメイン ナビゲーションとして扱われます。
この例では、side 要素に複数のセクション要素が含まれています。サイドバーの下部にシンプルな検索ボックスがあります。これにより、HTML5 フォームのいくつかの新機能にアクセスできるようになります。
そのうちの 1 つはプレースホルダー属性です
レイアウトはフッター要素で終わります。この例では、フッター要素の幅がページ全体に広がるように、フッター要素を div コンテナーの外側に配置する必要があります。
header { margin: 0 0 98px 0; } header h1 { float: left; font-size: 36px; font-weight: normal; } header nav { float: right; text-align: right; padding: 6px 0 0 0; } header nav ul { list-style: none; } header nav li { float: left; font-size: 18px; width: 136px; margin: 0 0 0 20px; } header nav li:nth-child(1):before { content: "1. "; color: #a2a2a2; } header nav li:nth-child(2):before { content: "2. "; color: #a2a2a2; } header nav li:nth-child(3):before { content: "3. "; color: #a2a2a2; } header nav li:nth-child(4):before { content: "4. "; color: #a2a2a2; } header nav li:nth-child(5):before { content: "5. "; color: #a2a2a2; } #sidebar { width: 292px; float: left; padding: 4px 0 0 0; } #sidebar h3 { font-size: 18px; font-weight: normal; margin: 0 0 25px 0; } #sidebar ul { list-style: none; } #sidebar section { margin: 0 0 47px 0; } #sidebar #about a.more { display: block; text-align: right; } #sidebar #categories { width: 136px; float: left; margin: 0 20px 0 0; } #sidebar #social { width: 136px; float: left; } #footer-container { background: rgba(0,0,0,0.2); overflow: hidden; } footer { width: 916px; margin: 0 auto; padding: 10px 22px 50px 22px; } footer #credits { list-style: none; float: left; } footer #credits li { float: left; margin: 0 6px 0 0; } footer #credits li.wordpress a { display: block; width: 20px; height: 20px; background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px; } footer #credits li.spoongraphics a { display: block; width: 25px; height: 20px; background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px; } footer #back-top { float: right; font-size: 12px; }
これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
関連記事:
H5でドラッグアンドドロップエフェクトを作成する方法H5を使用してカメラを呼び出す方法H5と互換性のない古いバージョンのブラウザの処理方法についてそしてC3以上がH5 セマンティック タグの実際のケースの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。