Comment créer une disposition d'axe de lumière réactive en utilisant HTML et CSS-tutoriel HTML-php.cn

Comment créer une disposition d'axe de lumière réactive en utilisant HTML et CSS

WBOY

Libérer： 2023-10-26 11:28:57

original

1137 Les gens l'ont consulté

Comment créer une disposition daxe de lumière réactive en utilisant HTML et CSS

Comment utiliser HTML et CSS pour créer une mise en page de chronologie réactive

La mise en page de chronologie est une méthode de mise en page unique qui peut afficher le contenu par ordre chronologique et est très appropriée pour afficher des événements historiques, des CV personnels ou l'avancement de projets, etc. Cet article explique comment utiliser HTML et CSS pour créer une disposition d'axe lumineux réactive et fournit des exemples de code spécifiques.

Tout d’abord, nous devons créer une structure HTML de base. Le code est le suivant :

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

Copier après la connexion

Ensuite, nous devons créer une feuille de style CSS pour définir l'apparence et le comportement réactif de la mise en page de la timeline. Le code est le suivant :

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

Copier après la connexion

Maintenant, expliquons ce que fait le code ci-dessus.

En HTML, nous créons un conteneur de chronologie .timeline qui contient des événements. Chaque événement est enveloppé avec .timeline-item. code>.timeline-content pour l'habillage. .timeline，每个事件使用 .timeline-item 进行包裹，事件的具体描述则使用 .timeline-content 进行包裹。
在CSS中，我们设置了时光轴的宽度、最大宽度和居中对齐。我们还使用 ::before 伪元素创建了一条垂直线，用于表示时间线。
.timeline-item 类的样式定义了事件项的位置和填充间隔。
.timeline-content 类的样式定义了事件项的具体内容，并设置了背景颜色和内边距。
使用 @media

::before

.timeline-item définit la position et l'intervalle de remplissage des éléments d'événement. Le style de la classe

.timeline-content définit le contenu spécifique de l'élément d'événement et définit la couleur d'arrière-plan et le remplissage.

À l'aide de la requête @media, nous définissons un style adaptatif pour les appareils à petit écran (largeur maximale 768 px), en plaçant la timeline en haut et en la définissant sous forme de ligne horizontale. 🎜🎜🎜Avec le code ci-dessus, nous avons réalisé une disposition de base des axes de lumière réactifs. Vous pouvez personnaliser les styles et ajouter plus d'événements en fonction de vos besoins, et l'étendre via la structure HTML. 🎜🎜Résumé : 🎜Cet article explique comment utiliser HTML et CSS pour créer une mise en page de chronologie réactive et fournit des exemples de code spécifiques. Grâce à cette mise en page, les événements historiques ou l'avancement du projet peuvent être clairement affichés, rendant le contenu Web plus attrayant et interactif. J'espère que cet article vous aidera à créer de superbes mises en page ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!