How to create a responsive light axis layout using HTML and CSS-HTML Tutorial-php.cn

How to create a responsive light axis layout using HTML and CSS

WBOY

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

Original

1136 people have browsed it

How to create a responsive light axis layout using HTML and CSS

How to use HTML and CSS to create a responsive timeline layout

Timeline layout is a unique page layout method that can display content in chronological order. Very suitable for displaying historical events, personal resume or project progress, etc. This article will introduce how to use HTML and CSS to create a responsive light axis layout, and provide specific code examples.

First, we need to create a basic HTML structure. The code is as follows:

<!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>

Copy after login

Next, we need to create a CSS style sheet to define the appearance and responsive behavior of the timeline layout. The code is as follows:

.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%;
    }
}

Copy after login

Now, let us explain what the above code does.

In HTML, we create a timeline container .timeline that contains events. Each event is wrapped with .timeline-item. The event The specific description is wrapped with .timeline-content.
In CSS, we set the width, maximum width and center alignment of the light axis. We also create a vertical line using the ::before pseudo-element to represent the timeline.
.timeline-item The style of the class defines the position and padding interval of the event item. The style of the
.timeline-content class defines the specific content of the event item and sets the background color and padding.
Using the @media query, we defined an adaptive style for small screen devices (maximum width 768px), placing the timeline on top and setting it to a horizontal line.

Through the above code, we have completed a basic responsive light axis layout. You can customize styles and add more events according to your needs, and extend it through HTML structure.

Summary:
This article introduces how to use HTML and CSS to create a responsive light axis layout, and provides specific code examples. Through this layout, historical events or project progress can be clearly displayed, making web content more attractive and interactive. I hope this article helps you create stunning layouts!

The above is the detailed content of How to create a responsive light axis layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!