창의적이고 실용적인 CSS 위치 레이아웃 예-CSS 튜토리얼-php.cn

창의적이고 실용적인 CSS 위치 레이아웃 예

王林

풀어 주다： 2023-09-26 13:12:25

원래의

1507명이 탐색했습니다.

创意与实用并存的CSS Positions布局示例

창의적이고 실용적인 CSS 위치 레이아웃 예

CSS 레이아웃은 웹 디자인에서 중요한 역할을 합니다. 오늘 우리는 창의적이고 실용적인 CSS 위치 레이아웃 예제를 소개하고 특정 코드 예제를 통해 그 구현을 보여 드리겠습니다.

이 예에서는 웹 페이지의 머리글, 내용, 바닥글을 각각 나타내는 세 가지 div 요소, 즉 머리글, 내용, 바닥글을 표시합니다. 우리는 CSS 위치 레이아웃을 통해 다음과 같은 효과를 얻기를 바랍니다.

헤더는 항상 페이지 상단에 고정됩니다.
콘텐츠의 적응력이 뛰어나며 머리글과 바닥글을 제외한 나머지 공간을 차지합니다.
바닥글은 내용이 짧은 경우 페이지 하단에, 내용이 긴 경우 내용 아래에 위치합니다.

먼저 HTML 파일을 생성하고 다음 기본 구조와 스타일을 추가해야 합니다.

<!DOCTYPE html>
<html>
<head>
    <title>创意与实用并存的CSS Positions布局示例</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .header {
            background-color: #333;
            color: #fff;
            padding: 15px;
            position: fixed;
            top: 0;
            width: 100%;
        }

        .content {
            margin-top: 60px;
            padding: 15px;
        }

        .footer {
            background-color: #333;
            color: #fff;
            padding: 15px;
            position: absolute;
            width: 100%;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>这是页眉</h1>
    </div>

    <div class="content">
        <h2>这是内容</h2>
        <p>这是一个示例文本，用于展示内容区域的自适应性。</p>
    </div>

    <div class="footer">
        <h3>这是页脚</h3>
    </div>
</body>
</html>

로그인 후 복사

위 코드에서는 먼저 본문의 여백과 패딩을 0으로 정의하고 기본 여백을 제거한 후 다음을 확인합니다. 레이아웃은 상단의 시작부터입니다.

다음으로 .header 클래스에서는 헤더(header) 배경색을 #333, 텍스트 색상을 흰색, 패딩을 15px로 설정하고 상단에 고정(고정 위치)으로 배치했습니다. 페이지 너비는 100%입니다.

.content 클래스에서는 내용이 헤더에 의해 가려지지 않도록 상단 여백을 60px(.header와 동일한 높이)로 설정하고 패딩을 15px로 설정했습니다.

.footer 클래스에서는 제목(바닥글)의 배경색을 #333으로, 텍스트 색상을 흰색으로, 패딩을 15px로 설정하고 페이지 하단에 절대 위치(절대 위치)를 지정했습니다. 너비가 100%입니다.

위 코드를 통해 창의적이면서도 실용적인 CSS 위치 레이아웃 예제를 구현했습니다. 콘텐츠 영역의 높이가 더 짧든 길든 관계없이 머리글과 바닥글은 항상 페이지 상단과 하단에 고정됩니다.

실제 필요에 따라 레이아웃과 스타일을 추가로 조정할 수 있습니다. 이 예제가 웹 디자인의 레이아웃 작업에 도움이 되기를 바랍니다!

위 내용은 창의적이고 실용적인 CSS 위치 레이아웃 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!