ホームページ >ウェブフロントエンド >htmlチュートリアル >HTML と CSS を使用して固定サイド ナビゲーション バー レイアウトを実装する方法
HTML と CSS を使用して固定サイド ナビゲーション バー レイアウトを実装する方法
- PHPzオリジナル
- 2023-10-28 08:57:271009ブラウズ
HTML と CSS を使用して固定サイド ナビゲーション バー レイアウトを実装する方法
ナビゲーション バーは Web ページ レイアウトの非常に重要な部分であり、固定サイドナビゲーション バーのレイアウトは一般的なデザイン パターンです。この記事では、HTML と CSS を使用して単純な固定サイド ナビゲーション バー レイアウトを実装する方法を紹介し、具体的なコード例を示します。
- HTML 構造
まず、HTML ファイルに基本構造を作成する必要があります。以下は簡単な例です:
<!DOCTYPE html>
<html>
<head>
<title>固定侧边导航栏布局</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<!-- 导航栏内容 -->
</div>
<div class="main-content">
<!-- 页面主要内容 -->
</div>
</div>
</body>
</html>上記のコードでは、「container」という名前のコンテナー要素を作成しました。これには、「sidebar」と「main-content」という 2 つのサブ要素が含まれています。 「sidebar」はナビゲーションバーを配置するために使用され、「main-content」はページのメインコンテンツを配置するために使用されます。
- CSS スタイル
次に、CSS を使用してコンテナとナビゲーション バーのスタイルを定義する必要があります。以下は簡単なスタイルの例です。
.container {
display: flex;
}
.sidebar {
width: 20%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
}
.main-content {
margin-left: 20%;
padding: 20px;
}上記のコードでは、「コンテナ」を「フレックス」レイアウトに設定することで、ナビゲーション バーとメイン コンテンツの左右の配置を実現します。 「サイドバー」の幅を20%、背景色をグレー、位置を固定にして画面左側に固定するように設定します。 「main-content」の左マージンは 20% に設定され、コンテンツがナビゲーション バーで隠されないようにパディングが追加されます。
- コンテンツの入力
次に、必要に応じて、ナビゲーション バーとメイン コンテンツ部分に実際のコンテンツを入力します。
<div class="sidebar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div class="main-content">
<h1>欢迎访问我们的网站</h1>
<p>这里是主要内容区域，您可以在这里显示具体的页面内容。</p>
</div>上記のコードでは、「sidebar」要素に順序なしリストを作成し、リスト項目にいくつかのナビゲーション リンクを追加しました。 「main-content」要素には、ページのメインコンテンツを表示するためのタイトルとテキストを追加します。
- 完全なコード
<!DOCTYPE html>
<html>
<head>
<title>固定侧边导航栏布局</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<div class="main-content">
<h1>欢迎访问我们的网站</h1>
<p>这里是主要内容区域，您可以在这里显示具体的页面内容。</p>
</div>
</div>
</body>
</html>.container {
display: flex;
}
.sidebar {
width: 20%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
}
.main-content {
margin-left: 20%;
padding: 20px;
}上記のコード例により、単純な固定サイド ナビゲーション バー レイアウトを正常に実装できました。必要に応じてスタイルを調整し、コンテンツを入力して、より複雑で多様な効果を実現できます。これは基本的な例であり、学習と実践に役立つことを願っています。
以上がHTML と CSS を使用して固定サイド ナビゲーション バー レイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。