Implémenter une mise en page réactive simple en utilisant CSS3 (code)-tutoriel CSS-php.cn

Implémenter une mise en page réactive simple en utilisant CSS3 (code)

PHPz

Libérer： 2017-04-03 15:09:57

original

2836 Les gens l'ont consulté

Cet article explique brièvement comment utiliser CSS3 pour implémenter une mise en page réactive simple :

fichier CSS3 :

*{
    margin:0px;
    padding: 0px;}.heading,.container,.footing{
    margin: 10px auto;}.heading{
    height: 100px;
    background-color: red;}.left,.right,.main{
    height: 300px;
    background-color: yellow;}.footing{
    height: 100px;
    background-color: gray;}
<!--media="only screen and (max-width:640px)" 这句话的意思是:只要当渲染屏幕的宽度不大于640px的时候才会使用这个样式表-->
@media screen and (min-width: 960px){    .heading,    .container,    .footing{
        width:960px;

    }    .left,    .main,    .right{
        float: left;
        height: 500px;
    }    .left,    .right{
        width:200px;

    }    .main{
        margin: 0px 5px;
        width:550px;
    }    .container{
        height: 500px;
    }
}
@media screen and (min-width: 600px) and (max-width: 960px){    .heading,    .container,    .footing{
        width: 600px;

    }    .left,    .main{
        float: left;
        height:400px;

    }    .right{
        display: none;
    }    .left{
        width: 160px;

    }    .main{
        width: 435px;
        margin-left: 5px;
    }    .container{
        height: 400px;
    }
}

@media screen and (max-width: 600px){    .heading,    .container,    .footing{
        width: 400px;
    }    .left,    .right{
        width: 400px;
        height: 100px;
    }    .main{
        margin-top: 10px;
        width:400px;
        height:200px;
    }    .right{
        margin-top: 10px;

    }    .container{
        height: 420px;
    }
}

Copier après la connexion

Fichier html5 :

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <meta name ="viewport" content="width = device-width,initial-scale=1">
    <title>index01</title>
    <link href="style01.css" type="text/css" rel="stylesheet"></head><body>
    <p></p>
    <p>
        <p></p>
        <p></p>
        <p></p>
    </p>
    <p></p></body></html>

Copier après la connexion

Le code de cet article peut implémenter la même interface et afficher différentes mises en page sous différentes largeurs de rendu.

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!