Contoh susun atur Kedudukan CSS yang kreatif dan praktikal-tutorial css-php.cn

Contoh susun atur Kedudukan CSS yang kreatif dan praktikal

王林

Lepaskan： 2023-09-26 13:12:25

asal

1485 orang telah melayarinya

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

Contoh susun atur Kedudukan CSS yang kreatif dan praktikal

Reka letak CSS memainkan peranan penting dalam reka bentuk web. Hari ini kami akan memperkenalkan contoh susun atur Kedudukan CSS yang kreatif dan praktikal, dan menunjukkan pelaksanaannya melalui contoh kod tertentu.

Dalam contoh ini, kami akan menunjukkan tiga elemen div, iaitu pengepala, kandungan dan pengaki, yang masing-masing mewakili pengepala, kandungan dan pengaki halaman web. Kami berharap dapat mencapai kesan berikut melalui susun atur Kedudukan CSS:

Pengepala sentiasa ditetapkan di bahagian atas halaman.
Kandungan sangat adaptif dan menempati ruang yang tinggal kecuali pengepala dan pengaki.
Pengaki terletak di bahagian bawah halaman apabila kandungan pendek, dan di bawah kandungan apabila kandungan lebih panjang.

Pertama, kita perlu mencipta fail HTML dan menambah struktur dan gaya asas berikut:

<!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>

Salin selepas log masuk

Dalam kod di atas, kita tentukan margin bagi badan dan padding ialah 0, yang mengalih keluar margin lalai dan memastikan reka letak bermula di bahagian atas.

Seterusnya, dalam kelas .header, kami menetapkan warna latar belakang pengepala kepada #333, warna teks kepada putih, padding kepada 15px dan meletakkannya sebagai tetap (kedudukan tetap ) di bahagian atas halaman dengan lebar 100%.

Dalam kelas .content, kami menetapkan margin atas kepada 60px (ketinggian yang sama dengan .header) untuk memastikan kandungan tidak dikaburkan oleh pengepala dan menetapkan padding kepada 15px.

Dalam kelas .footer, kami menetapkan warna latar belakang tajuk (footer) kepada #333, warna teks kepada putih, padding kepada 15px dan meletakkannya kepada mutlak (kedudukan mutlak). Bahagian bawah halaman, lebar 100%.

Melalui kod di atas, kami telah melaksanakan contoh susun atur Kedudukan CSS yang kreatif dan praktikal. Tidak kira sama ada ketinggian kawasan kandungan lebih pendek atau lebih panjang, pengepala dan pengaki sentiasa ditetapkan di bahagian atas dan bawah halaman.

Susun atur dan gaya boleh dilaraskan lagi mengikut keperluan sebenar. Saya harap contoh ini akan membantu kerja susun atur anda dalam reka bentuk web!

Atas ialah kandungan terperinci Contoh susun atur Kedudukan CSS yang kreatif dan praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!