Maison >interface Web >tutoriel HTML >Quelles sont les techniques de mise en page des pages HTML ?
Quelles sont les techniques de mise en page des pages HTML ?
- 青灯夜游original
- 2021-12-03 11:13:3710593parcourir
La technologie de mise en page HTML comprend : 1. Technologie de mise en page flottante, relativement compatible, mais elle affectera la mise en page lorsque la largeur de la page n'est pas suffisante ; 2. Technologie de mise en page à positionnement absolu 3. Technologie de mise en page élastique flexible, bonne adaptabilité et hauteur ; peut être automatiquement étendu ; 4. technologie de disposition de table-cellule ; 5. technologie de disposition de grille.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Technologie de mise en page HTML
1. Technologie de mise en page flottante
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动布局</title>
<style type="text/css">
.wrap1 div{
min-height: 200px;
}
.wrap1 .left{
float: left;
width: 300px;
background: red;
}
.wrap1 .right{
float: right;
width: 300px;
background: blue;
}
.wrap1 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap1">
<div class="left"></div>
<div class="right"></div>
<div class="center">
浮动布局
</div>
</div>
</body>
</html>La mise en page flottante a une meilleure compatibilité, mais le flottement a plus d'impact Lorsque la largeur de la page n'est pas suffisante, cela affectera la mise en page.
2. Technologie de mise en page de positionnement absolu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绝对定位布局</title>
<style type="text/css">
.wrap2 div{
position: absolute;
min-height: 200px;
}
.wrap2 .left{
left: 0;
width: 300px;
background: red;
}
.wrap2 .right{
right: 0;
width: 300px;
background: blue;
}
.wrap2 .center{
left: 300px;
right: 300px;
background: pink;
}
</style>
</head>
<body>
<div class="wrap2 wrap">
<div class="left"></div>
<div class="center">
绝对定位布局
</div>
<div class="right"></div>
</div>
</body>
</html>La mise en page de positionnement absolu est rapide, mais l'efficacité est relativement faible car elle est séparée du flux de documents.
Troisième technologie de disposition élastique flexible
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex布局</title>
<style type="text/css">
.wrap3{
display: flex;
min-height: 200px;
}
.wrap3 .left{
flex-basis: 300px;
background: red;
}
.wrap3 .right{
flex-basis: 300px;
background: blue;
}
.wrap3 .center{
flex: 1;
background: pink;
}
</style>
</head>
<body>
<div class="wrap3 wrap">
<div class="left"></div>
<div class="center">
flex布局
</div>
<div class="right"></div>
</div>
</body>
</html>Bonne adaptabilité, la hauteur peut être automatiquement étendue
Quatrièmement, technologie de disposition de table à cellules de table
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>table-cell表格布局</title>
<style type="text/css">
.wrap4{
display: table;
width: 100%;
height: 200px;
}
.wrap4>div{
display: table-cell;
}
.wrap4 .left{
width: 300px;
background: red;
}
.wrap4 .right{
width: 300px;
background: blue;
}
.wrap4 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap4 wrap">
<div class="left"></div>
<div class="center">
表格布局
</div>
<div class="right"></div>
</div>
</body>
</html>Bonne compatibilité, mais parfois la hauteur ne peut pas être fixée car elle le fera Boosté par le contenu.
5. Technologie de mise en page de grille
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>网格布局</title>
<style type="text/css">
.wrap5{
display: grid;
width: 100%;
grid-template-rows: 200px;
grid-template-columns: 300px auto 300px;
}
.wrap5 .left{
background: red;
}
.wrap5 .right{
background: blue;
}
.wrap5 .center{
background: pink;
}
</style>
</head>
<body>
<div class="wrap5 wrap">
<div class="left"></div>
<div class="center">
网格布局
</div>
<div class="right"></div>
</div>
</body>
</html>Tutoriels recommandés : Tutoriel vidéo HTML, Tutoriel vidéo CSS
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!