How do you create a responsive timeline using CSS and HTML?

When creating a responsive timeline using CSS and HTML, we can achieve this through the following steps:

1. Structure Definition (HTML)

First, we need to define the timeline structure using HTML. A simple timeline typically consists of multiple timeline items, each containing a date and a description of the related event. Here is a basic HTML structure example:

html
<div class="timeline">
    <div class="timeline-item">
        <div class="timeline-date">2021年1月1日</div>
        <div class="timeline-content">
            <h3>事件标题1</h3>
            <p>事件描述1...</p>
        </div>
    </div>
    <div class="timeline-item">
        <div class="timeline-date">2021年5月15日</div>
        <div class="timeline-content">
            <h3>事件标题2</h3>
            <p>事件描述2...</p>
        </div>
    </div>
    <!-- More timeline items -->
</div>

2. Style Design (CSS)

Next, we need to design the timeline's styles using CSS. To achieve a responsive layout, we use media queries to adjust the timeline's layout based on different screen sizes.

css
.timeline {
    position: relative;
    padding: 20px;
}

.timeline::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ddd;
}

.timeline-item {
    position: relative;
    width: 50%;
    padding: 10px 40px;
    box-sizing: border-box;
}

.timeline-date {
    position: absolute;
    top: 0;
    width: 60px;
    text-align: center;
}

.timeline-content {
    padding: 10px 20px;
    background: white;
    border-radius: 8px;
    border: 1px solid #ccc;
}

/* Media queries for responsive design */
@media (max-width: 600px) {
    .timeline::after {
        left: 10px;
    }

    .timeline-item {
        width: 100%;
        padding-left: 30px;
    }

    .timeline-date {
        left: 0;
    }
}

3. Responsive Adaptation

With the above CSS code, we have implemented a basic responsive layout. When the screen width is less than 600px, the timeline's main axis changes position, and all timeline items adjust to the left to accommodate narrower screens.

4. Interaction Enhancement (Optional)

To enhance user experience, we can add interactive effects such as scroll animations and hover effects. This can be achieved using JavaScript or CSS3 animations.

Summary

Through the above steps, we can create a simple and responsive timeline. This timeline is suitable for various devices, providing a good user experience on both desktop and mobile devices. Of course, depending on specific requirements, the timeline design can be more complex and detailed.