Rumah > Artikel > hujung hadapan web > Cara membuat susun atur paksi cahaya responsif menggunakan HTML dan CSS
Cara membuat susun atur paksi cahaya responsif menggunakan HTML dan CSS
- WBOYasal
- 2023-10-26 11:28:571127semak imbas
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.
- 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类的样式定义了事件项的具体内容，并设置了背景颜色和内边距。 - 使用
@mediaDalam CSS, kami menetapkan lebar, lebar maksimum dan penjajaran tengah paksi cahaya. Kami juga mencipta garis menegak menggunakan elemen pseudo
::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!