简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  Exemple de code CSS3 multi-colonnes et effet cascade

Exemple de code CSS3 multi-colonnes et effet cascade

高洛峰
高洛峰original
2017-03-09 18:37:511253parcourir

Cet article présente un exemple de code CSS3 multi-colonnes et effet de flux en cascade

bloc de contenu CSS3, effet multi-colonnes (similaire à la disposition des sections de journaux) :

.p02{    /*count:内容分为几列，gap:内容与分割线的距离，rule:分割线样式*/
    column-count:4;
    column-gap:30px;
    column-rule:5px outset #ff0000;
    -webkit-column-count: 4;
    -webkit-column-gap: 30px;
    -webkit-column-rule: 5px outset #ff0000;
}

CSS3 implémente la composition des images en cascade : 

.container {
    column-width: 350px;
    -webkit-column-width: 350px;
    column-gap: 5px;
    -webkit-column-gap: 5px;
}img {
    width: 400px;
}.container p {
    width: 350px;
    margin: 5px;
}p {
    text-align: center;
}

Le code HTML pour l'effet de flux en cascade est le suivant : 

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="pubuliu.css" />
    </head>
    <body>
        <p class="container">
            <p><img src="../../image/5.jpg" /></p>
            <p><img src="../../image/2.jpg" /><p>文字描述</p></p>
            <p><img src="../../image/5.jpg" /></p>
            <p><img src="../../image/2.jpg" /></p>
            <p><img src="../../image/5.jpg" /><p>文字描述</p></p>
            <p><img src="../../image/3.jpg" /></p>
            <p><img src="../../image/5.jpg" /></p>
            <p><img src="../../image/5.jpg" /></p>
            <p><img src="../../image/3.jpg" /></p>
            <p><img src="../../image/5.jpg" /></p>
            <p><img src="../../image/5.jpg" /><p>文字描述</p></p>
            <p><img src="../../image/5.jpg" /></p>
            <p><img src="../../image/5.jpg" /></p>
            <p><img src="../../image/5.jpg" /></p>
            <p><img src="../../image/5.jpg" /><p>文字描述</p></p>
            <p><img src="../../image/5.jpg" /></p>
            <p><img src="../../image/5.jpg" /></p>
        </p>
    </body></html>

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!

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：Description des sélecteurs CSS3Article suivant：Description des sélecteurs CSS3

Articles Liés

Voir plus