Tutoriel d'introduction à la mise en page Web CSS 2 : Tutoriel Adaptive width_Basic sur une colonne

La mise en page adaptative est un formulaire de mise en page courant dans la conception Web. La mise en page adaptative peut automatiquement modifier ses valeurs de largeur et de hauteur en fonction de la taille de la fenêtre du navigateur. Il s'agit d'un formulaire de mise en page très flexible qui peut répondre à différentes résolutions. Les moniteurs à haute efficacité peuvent fournir les meilleurs effets d'affichage. En fait, l'état par défaut de div occupe toute la ligne d'espace, ce qui est l'expression d'une disposition adaptative avec une largeur de 100 %. Le travail que nous devons faire pour une colonne de disposition adaptative est également très simple. pour changer la largeur d'une valeur fixe en une valeur en pourcentage dans le formulaire.

Copier le code Le code est le suivant :

#layout {
border: 2px solid #A9C9E2 ;
background-color : #E8F5FE ;
height : 200px ;
width : 80%

CSS utilise des valeurs numériques comme paramètres ; pour la plupart des propriétés de style, toutes fournissent des pourcentages, et l'attribut width ne fait pas exception. Ici, nous modifions la largeur d'une colonne de largeur fixe de 300 px à 80 %. % de la largeur du navigateur. L'avantage de l'adaptatif est que lorsque la fenêtre du navigateur est agrandie ou réduite, sa largeur restera proportionnelle à la largeur actuelle du navigateur.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">AA25.CN_One largeur adaptative de colonne<title> </title> <style type="text/css"> <!-- #layout { border: 2px solid #A9C9E2; background-color: #E8F5FE; height: 200px; width: 80%; } --> </style> Largeur adaptative d'une colonne (AA25.CN)<div id="layout"> </div>