Maison > Article > interface Web > qu'est-ce qu'une mise en page fluide en CSS
qu'est-ce qu'une mise en page fluide en CSS
- 王林original
- 2020-11-13 13:44:372482parcourir
La mise en page fluide en CSS signifie que lorsque la page Web est réduite ou agrandie, la mise en page de la page Web changera avec la taille du navigateur. L'avantage d'une mise en page fluide est que si la fenêtre de l'utilisateur est petite, la page se rétrécit pour s'adapter à la fenêtre sans avoir à la faire défiler latéralement.
Mise en page fluide :
En termes simples, la mise en page de la page Web changera avec la taille du navigateur lorsque la page Web est réduite et agrandi !
(Partage vidéo d'apprentissage : tutoriel vidéo CSS)
Avantages :
La page s'étendra sur toute la fenêtre du navigateur, donc même sur une grande screen , il n'y a pas d'espace blanc autour de la page ;
Si la fenêtre de l'utilisateur est petite, la page se rétrécira pour s'adapter à la fenêtre sans avoir à défiler horizontalement
Même si la police est définie par ; l'utilisateur est plus grand que le préréglage du concepteur n'est plus grand, ce design peut également être adapté (puisque la page peut s'étirer).
Inconvénients :
Si la largeur de chaque partie de la page n'est pas contrôlée, la conception de la page sera très différente de l'effet attendu, par exemple, certains éléments ou éléments sont serrés ensemble et leur environnement Des espaces inattendus apparaissent
Si la fenêtre de l'utilisateur est très large, les lignes de texte peuvent être si longues qu'elles sont difficiles à lire
Si la fenêtre de l'utilisateur est très large ; étroit, les mots peuvent être compressés, ce qui donne seulement quelques mots par ligne ;
Si un élément de largeur fixe se trouve dans une boîte qui ne peut pas l'accueillir, alors l'élément débordera de la boîte.
Exemple :
Le code suivant illustre une mise en page fluide. La technologie clé consiste à définir l'unité de largeur sous forme de pourcentage.
<!DOCTYPE html>
<html>
<head>
<title>Liquid Layout</title>
<style type="text/css">
* {
color: #fff;
text-align: center;}
body {
width: 90%;
margin: 0 auto;}
#content {
overflow: auto;}
#nav, #feature, #footer {
margin: 1%;}
.column1, .column2, .column3 {
width: 31.3%;
float: left;
margin: 1%;}
.column3 {
margin-right: 0%;}
li {
display: inline;
padding: 0.5em;}
#nav, #footer {
padding: 0.5em 0;}
#feature, .article {
color:#fff;
height: 10em;
margin-bottom: 1em;
}
</style>
</head>
<body>
<h1 style="color:#706fd3">软件开发，成就梦想</h1>
<h2><a href="https://www.liyongzhen.com/" style="color:#000">学编程，上利永贞网</a></h2>
<div id="header">
<h1>Logo</h1>
<div id="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">产品</a></li>
<li><a href="">服务</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="feature">
<p>功能</p>
</div>
<div class="article column1">
<p>第一列</p>
</div>
<div class="article column2">
<p>第二列</p>
</div>
<div class="article column3">
<p>第三列</p>
</div>
</div>
<div id="footer">
<p>© Copyright 2019</p>
</div>
</body>
</html>Recommandations associées : Tutoriel 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!