ホームページ > 記事 > ウェブフロントエンド > HTML と CSS を使用してナビゲーション タブ バー レイアウトを実装する方法
HTML と CSS を使用してナビゲーション タブ バー レイアウトを実装する方法
- WBOYオリジナル
- 2023-10-21 08:27:291323ブラウズ
HTML と CSS を使用してナビゲーション タブ バー レイアウトを実装する方法
ナビゲーション タブ バーは、ユーザーに簡単なナビゲーションを提供できる一般的な Web デザイン要素です。ウェブサイト。さまざまなページや機能。この記事では、HTML と CSS を使用して、シンプルかつ魅力的なナビゲーション タブ バー レイアウトを実装する方法を学びます。
このレイアウトを実装するには、まず HTML の基本構造を作成し、次に CSS を使用してこれらの要素のスタイルを設定します。始めましょう:
-
HTML 構造を作成します:
<!DOCTYPE html> <html> <head> <title>导航标签栏布局</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">服务</a></li> <li><a href="#">产品</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> </body> </html>
この構造では、header 要素を作成しました。そしてその中に nav 要素を配置しました。 nav 要素内には順序なしリスト ul があり、これには li 要素と a 要素で表されるナビゲーション タグの各オプションが含まれます。
- CSS スタイルの記述:
style.cssという名前の CSS ファイルを作成し、HTML のheadセクションに導入します。次に、その中にスタイル ルールを記述することができます。
header {
background-color: #333;
padding: 10px;
}
nav {
display: flex;
justify-content: space-between;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
li {
margin-right: 10px;
}
a {
color: #fff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}このスタイルでは、まず header 要素の背景色を濃い灰色 (#333) に設定し、レイアウトを美しくするためにパディングを追加します。次に、水平方向の配置を実現するために nav 要素のレイアウトを display: flex に設定し、オプションの間隔に justify-content: space-between を使用します。利用可能なスペース内に均等に配置されます。
また、デフォルトのリスト スタイル (list-style-type: none) やマージン (##) を削除するなど、ul 要素にいくつかのスタイル ルールを設定します。 #マージン: 0)。また、読みやすさを高めるために、リスト項目の間にスペース li を入れています。
a のテキストの色を白に設定し、下線を削除し、ホバー時に下線効果を追加します。
- 結果をブラウザで表示します。
- HTML ドキュメントを保存してブラウザで開くと、シンプルだが美しいナビゲーション タブ バーのレイアウトが表示されます。
以上がHTML と CSS を使用してナビゲーション タブ バー レイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。