recherche

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

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

WBOY
WBOYoriginal
2023-10-26 11:28:571163parcourir

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>

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

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
    • En CSS, nous définissons la largeur, la largeur maximale et l'alignement central de l'axe de la lumière. Nous créons également une ligne verticale en utilisant le pseudo-élément ::before pour représenter la timeline. Le style de la classe

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

css html 事件 样式表 内边距 伪元素
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter une mise en page avec un menu de navigation fixe en utilisant HTML et CSSArticle suivant：Comment implémenter une mise en page avec un menu de navigation fixe en utilisant HTML et CSS

Articles Liés

Voir plus