Maison >interface Web >tutoriel CSS >Une introduction de cas simple de mise en page réactive
Une introduction de cas simple de mise en page réactive
- 高洛峰original
- 2017-03-07 14:14:371044parcourir
Mise en page réactive
La mise en page réactive a une grande flexibilité pour faire face à des appareils avec différentes résolutions et est essentiellement utilisée dans la conception Web quotidienne. Pour utiliser une mise en page réactive design, il nous offre une bonne page de navigation utilisateur et peut nous apporter une meilleure expérience client Permettez-moi de partager avec vous une mise en page simple et réactive que j'ai réalisée :
.
Différentes pages s'adapteront aux différentes tailles de page du navigateur, qui changeront à mesure que la résolution change. Le code est affiché ci-dessous :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
p{
font-size: 12px;
}
header{
width: 100%;
}
header img{
width: 100%;
}
@media (min-width: 1300px) and (max-width:1400px) {
#left{
float: left;
width: 30%;
margin: 0px 50px;
}
#left #logo-bg{
margin: 10% 10%;
width: 80%;
position: relative;
}
#left #logo{
float: left;
width: 12%;
position: absolute;
left: 13%;
top: 230px;
}
#left p{
margin-bottom: -20px;
}
#left p,h4{
text-align: center;
color: red;
}
#right{
float: left;
width: 60%;
margin: 15% 0px;
}
#right h2{
text-align: center;
}
#right fieldset{
text-align: center;
border-left: none;
border-right: none;
border-bottom: none;
}
#right fieldset legend{
padding: 0px 20px;
}
#fen{
width: 100%;
-webkit-column-count: 6;
-moz-column-count: 6;
-o-column-count: 6;
-ms-column-count: 6;
column-count: 6;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
-o-column-gap: 1em;
-ms-column-gap: 1em;
column-gap: 1em;
}
#fen img{
width: 100%;
border-radius: 10px 10px 10px 10px;
}
#fen p,h4{
text-align: center;
color: red;
}
#fen p{
margin-bottom: -20px;
}
#di p{
text-align: center;
}
#di p span{
color: red;
}
}
@media (min-width: 1000px) and (max-width:1300px){
#left{
float: left;
width: 30%;
margin: 0px 50px;
}
#left #logo-bg{
margin: 10% 10%;
width: 80%;
position: relative;
}
#left #logo{
width: 12%;
position: absolute;
left: 14%;
top: 190px;
}
#left p{
margin-bottom: -20px;
}
#left p,h4{
text-align: center;
color: red;
}
#right{
float: left;
width: 60%;
margin: 15% 0px;
}
#right h2{
text-align: center;
}
#right fieldset{
text-align: center;
border-left: none;
border-right: none;
border-bottom: none;
}
#right fieldset legend{
padding: 0px 20px;
}
#fen{
width: 100%;
-webkit-column-count: 3;
-moz-column-count: 3;
-o-column-count: 3;
-ms-column-count: 3;
column-count: 3;
-webkit-column-gap: 1em;
-moz-column-gap: 1em;
-o-column-gap: 1em;
-ms-column-gap: 1em;
column-gap: 1em;
}
#fen img{
width: 100%;
border-radius: 10px 10px 10px 10px;
}
#fen p,h4{
text-align: center;
color: red;
}
#fen p{
margin-bottom: -20px;
}
#di p{
text-align: center;
}
#di p span{
color: red;
}
}
</style>
</head>
<body>
<header>
<img src="img/rag.png" / alt="Une introduction de cas simple de mise en page réactive" >
</header>
<aside id="left">
<img src="img/logo-bg.png" id="logo-bg"/ alt="Une introduction de cas simple de mise en page réactive" >
<img src="img/logo.png" id="logo" / alt="Une introduction de cas simple de mise en page réactive" >
<hr />
<p>THE</p>
<h4>WEBLOCUE</h4>
<hr />
<p>THE</p>
<h4>WEBLOCUE</h4>
<hr />
<p>THE</p>
<h4>WEBLOCUE</h4>
<hr />
</aside>
<article id="right">
<h2>“Give me problems, give me work.”</h2>
<p>In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course.</p>
<p>In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course,In the year 1878 I took dogree of Doctor of Medicline of the Unibertive of the London and problems to Netbody to go through the course.</p>
<fieldset><legend>victors</legend></fieldset>
<p id="fen">
<img src="img/1.jpg" / alt="Une introduction de cas simple de mise en page réactive" >
<p>SETCOME</p>
<h4>HOLEMES</h4>
<img src="img/2.jpg" / alt="Une introduction de cas simple de mise en page réactive" >
<p>SETCOME</p>
<h4>HOLEMES</h4>
<img src="img/3.jpg" / alt="Une introduction de cas simple de mise en page réactive" >
<p>SETCOME</p>
<h4>HOLEMES</h4>
<img src="img/4.jpg" / alt="Une introduction de cas simple de mise en page réactive" >
<p>SETCOME</p>
<h4>HOLEMES</h4>
<img src="img/5.jpg" / alt="Une introduction de cas simple de mise en page réactive" >
<p>SETCOME</p>
<h4>HOLEMES</h4>
<img src="img/6.jpg" / alt="Une introduction de cas simple de mise en page réactive" >
<p>SETCOME</p>
<h4>HOLEMES</h4>
</p>
<fieldset><legend>*</legend></fieldset>
<p id="di">
<p>In the year 1878 I took <span>Suing table</span> dogree of Doctor</p>
<p>What the year 2016 I took dogree <span>Ruing roid</span> of Doctor</p>
</p>
</article>
</body>
</html>
Je ne suis pas assez rigoureux à cause de problèmes de temps, veuillez me pardonner.
Le cas simple de mise en page réactive ci-dessus est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère que vous soutiendrez le site Web PHP chinois.
Pour des introductions de cas plus simples de mise en page réactive et des articles connexes, veuillez faire attention au site Web PHP 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：Implémentation CSS3 de l'exemple de code de fonction de déverrouillage par diapositive iPhoneArticle suivant：Implémentation CSS3 de l'exemple de code de fonction de déverrouillage par diapositive iPhone