Cara membuat susun atur paksi cahaya responsif menggunakan HTML dan CSS-html tutorial-php.cn

Cara membuat susun atur paksi cahaya responsif menggunakan HTML dan CSS

WBOY

Lepaskan： 2023-10-26 11:28:57

asal

1152 orang telah melayarinya

Cara membuat susun atur paksi cahaya responsif menggunakan HTML dan CSS

Cara menggunakan HTML dan CSS untuk mencipta susun atur garis masa responsif

Susun atur garis masa ialah kaedah susun atur halaman unik yang boleh memaparkan kandungan dalam susunan kronologi dan sangat sesuai untuk memaparkan peristiwa bersejarah, resume peribadi atau projek Progress dll. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk mencipta reka letak paksi cahaya responsif dan memberikan contoh kod khusus.

Pertama, kita perlu mencipta struktur HTML asas. Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式时光轴布局</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="timeline">
        <div class="timeline-item">
            <div class="timeline-content">
                <h2>2000年</h2>
                <p>这是第一个事件的描述。</p>
            </div>
        </div>
        <div class="timeline-item">
            <div class="timeline-content">
                <h2>2005年</h2>
                <p>这是第二个事件的描述。</p>
            </div>
        </div>
        <div class="timeline-item">
            <div class="timeline-content">
                <h2>2010年</h2>
                <p>这是第三个事件的描述。</p>
            </div>
        </div>
        <!-- 更多事件... -->
    </div>
</body>
</html>

Salin selepas log masuk

Seterusnya, kita perlu mencipta helaian gaya CSS untuk mentakrifkan penampilan dan gelagat responsif reka letak garis masa. Kodnya adalah seperti berikut:

.timeline {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: #000;
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    padding: 50px 0;
}

.timeline-content {
    position: relative;
    width: 50%;
    padding: 20px;
    background-color: #f1f1f1;
}

.timeline-content h2 {
    margin-bottom: 10px;
}

.timeline-content p {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .timeline::before {
        left: 0;
        transform: none;
        width: 100%;
        height: 2px;
    }
    
    .timeline-item {
        padding: 20px 0;
    }
    
    .timeline-content {
        width: 100%;
    }
}

Salin selepas log masuk

Sekarang, mari kita terangkan apa yang dilakukan oleh kod di atas.

Dalam HTML, kami mencipta bekas garis masa .garis masa yang mengandungi acara Setiap acara dibalut dengan .timeline-item Penerangan khusus acara ialah Gunakan .timeline-content untuk pembalut. .timeline，每个事件使用 .timeline-item 进行包裹，事件的具体描述则使用 .timeline-content 进行包裹。
在CSS中，我们设置了时光轴的宽度、最大宽度和居中对齐。我们还使用 ::before 伪元素创建了一条垂直线，用于表示时间线。
.timeline-item 类的样式定义了事件项的位置和填充间隔。
.timeline-content 类的样式定义了事件项的具体内容，并设置了背景颜色和内边距。
使用 @media

::before

.timeline-item mentakrifkan kedudukan dan selang padding item acara. Gaya kelas

.timeline-content mentakrifkan kandungan khusus item acara dan menetapkan warna latar belakang dan padding.

Menggunakan pertanyaan @media, kami mentakrifkan gaya penyesuaian untuk peranti skrin kecil (lebar maksimum 768px), meletakkan garis masa di atas dan menetapkannya sebagai garis mendatar. 🎜🎜🎜Dengan kod di atas, kami telah melengkapkan susun atur paksi cahaya responsif asas. Anda boleh menyesuaikan gaya dan menambah lebih banyak acara mengikut keperluan anda, dan memanjangkannya melalui struktur HTML. 🎜🎜Ringkasan: 🎜Artikel ini memperkenalkan cara menggunakan HTML dan CSS untuk mencipta reka letak garis masa responsif dan menyediakan contoh kod khusus. Melalui susun atur ini, peristiwa bersejarah atau kemajuan projek dapat dipaparkan dengan jelas, menjadikan kandungan web lebih menarik dan interaktif. Saya harap artikel ini membantu anda membuat reka letak yang menakjubkan! 🎜

Atas ialah kandungan terperinci Cara membuat susun atur paksi cahaya responsif menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!