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

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

PHPz

リリース： 2023-10-28 08:57:27

オリジナル

1011 人が閲覧しました

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