HTML と CSS を使用して固定サイドバーレイアウトを実装する方法-htmlチュートリアル-php.cn

HTML と CSS を使用して固定サイドバーレイアウトを実装する方法

王林

リリース： 2023-10-20 09:42:21

オリジナル

1039 人が閲覧しました

HTML と CSS を使用して固定サイドバーレイアウトを実装する方法

Web デザインでは、固定サイドバーレイアウトは一般的で実用的なレイアウト方法です。固定サイドバーレイアウトを使用すると、ナビゲーションメニュー、検索バー、またはその他の重要なコンテンツを Web ページの片側に固定して、ページがスクロールしても表示されたままにすることができます。この記事では、HTMLとCSSを使って簡単で実用的な固定サイドバーレイアウトを実装する方法と、具体的なコード例を紹介します。

まず、基本的な HTML 構造を作成する必要があります。以下に示すように、HTML ドキュメントのタグでは、メインコンテナ <div> を使用してページコンテンツ全体をラップできます。 # #上記のコードでは、container<p> という名前のメインコンテナを作成します。これには、<code>sidebar という名前のサイドバーコンテナと content## という名前のコンテナが含まれます。 # ページコンテンツコンテナ。 次に、CSS スタイルを使用して、固定サイドバーの効果を実現する必要があります。ここでは、position:fixed;

プロパティを使用して、ページ内のサイドバーを固定します。具体的な CSS スタイルは次のとおりです。

<!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 サイトの他の関連記事を参照してください。