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:

       
  
 
 
 
2000年
 
这是第一个事件的描述。
 
 
 
 
 
2005年
 
这是第二个事件的描述。
 
 
 
 
 
2010年
 
这是第三个事件的描述。
 
 
  
  

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.

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

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

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

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!