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>
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%; } }
Sekarang, mari kita terangkan apa yang dilakukan oleh kod di atas.
.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
进行包裹。::before
伪元素创建了一条垂直线,用于表示时间线。.timeline-item
类的样式定义了事件项的位置和填充间隔。.timeline-content
类的样式定义了事件项的具体内容,并设置了背景颜色和内边距。@media
::before
untuk mewakili garis masa. Gaya kelas .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.
@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!