HTML 및 CSS를 사용하여 고정 측면 탐색 모음 레이아웃을 구현하는 방법-HTML 튜토리얼-php.cn

HTML 및 CSS를 사용하여 고정 측면 탐색 모음 레이아웃을 구현하는 방법

PHPz

풀어 주다： 2023-10-28 08:57:27

원래의

1001명이 탐색했습니다.

HTML 및 CSS를 사용하여 고정 측면 탐색 모음 레이아웃을 구현하는 방법

HTML과 CSS를 사용하여 고정 측면 탐색 모음 레이아웃을 구현하는 방법

탐색 모음은 웹 페이지 레이아웃에서 매우 중요한 부분이며 고정 측면 탐색 모음 레이아웃은 일반적인 디자인 패턴입니다. 이 기사에서는 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>

로그인 후 복사

위 코드에서는 "sidebar"와 "main-content"라는 두 개의 하위 요소가 포함된 "container"라는 컨테이너 요소를 만들었습니다. "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;
}

로그인 후 복사

위 코드에서는 "container"를 "flex" 레이아웃으로 설정하여 탐색 바와 기본 콘텐츠의 왼쪽 및 오른쪽 배열을 구현했습니다. "사이드바"의 너비를 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>

로그인 후 복사

위 코드에서는 "사이드바" 요소에 순서가 지정되지 않은 목록을 만들고 목록 항목에 일부 탐색 링크를 추가했습니다. "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!