ホームページ > 記事 > ウェブフロントエンド > HTML と CSS を使用して固定サイドバー レイアウトを実装する方法
HTML と CSS を使用して固定サイドバー レイアウトを実装する方法
- 王林オリジナル
- 2023-10-20 09:42:21791ブラウズ
HTML と CSS を使用して固定サイドバー レイアウトを実装する方法
Web デザインでは、固定サイドバー レイアウトは一般的で実用的なレイアウト方法です。固定サイドバー レイアウトを使用すると、ナビゲーション メニュー、検索バー、またはその他の重要なコンテンツを Web ページの片側に固定して、ページがスクロールしても表示されたままにすることができます。この記事では、HTMLとCSSを使って簡単で実用的な固定サイドバーレイアウトを実装する方法と、具体的なコード例を紹介します。
まず、基本的な HTML 構造を作成する必要があります。以下に示すように、HTML ドキュメントの タグでは、メイン コンテナ <div> を使用してページ コンテンツ全体をラップできます。 # #上記のコードでは、container<p> という名前のメイン コンテナを作成します。これには、<code>sidebar という名前のサイドバー コンテナと content## という名前のコンテナが含まれます。 # ページ コンテンツ コンテナ。 次に、CSS スタイルを使用して、固定サイドバーの効果を実現する必要があります。ここでは、position:fixed;
<!DOCTYPE html>
<html>
<head>
<title>固定侧边栏布局</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="sidebar">
<!-- 侧边栏内容 -->
</div>
<div class="content">
<!-- 页面内容 -->
</div>
</div>
</body>
</html> 上記のコードでは、container コンテナを display: flex; に設定します。これにより、サイドバーとページのコンテンツが表示されます。コンテナは水平に並べられています。次に、sidebar コンテナのスタイルを設定します。ここで、width 属性はサイドバーの幅を定義し、height: 100vh; はサイドバーの高さを表し、高さはブラウザ ウィンドウの色は等しいです。background-color 属性は、サイドバーの背景色を定義します。position: 固定; Web ページのサイドバーを固定します。left: 0 ; と top: 0; は、それぞれサイドバーの位置をページの左上隅に設定します。 overflow-y: auto; は、コンテンツが高さを超えることを意味しますサイドバーの で、表示をスクロールできます。 ページのコンテンツがサイドバーによってブロックされないようにするには、content
margin-left: 200px; は距離を表します。ページ コンテンツ コンテナの間 左側のサイドバーの幅 width: calc(100% - 200px); は、ページ コンテンツ コンテナの幅がブラウザの幅からブラウザの幅を引いたものに等しいことを意味します。 Sidebar, padding: 20px; ページ コンテンツ コンテナのパディングを表します。 上記の HTML 構造と CSS スタイル設定により、シンプルな固定サイドバー レイアウトを実装することに成功しました。実際のニーズに応じてサイドバーとページのコンテンツのスタイルをカスタマイズし、デザインとレイアウトの要件を満たすことができます。
以上がHTML と CSS を使用して固定サイドバー レイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。