Maison >interface Web >tutoriel CSS >Tutoriel d'introduction à la mise en page Web CSS 5 : Tutoriel adaptive_Basic à deux largeurs de colonnes

Tutoriel d'introduction à la mise en page Web CSS 5 : Tutoriel adaptive_Basic à deux largeurs de colonnes

WBOY
WBOYoriginal
2016-05-16 12:07:171568parcourir

À partir de la largeur fixe à deux colonnes, lorsque vous commencez à essayer la disposition à deux colonnes, la largeur des colonnes de gauche et de droite peut être adaptative. À partir de la disposition adaptative à une colonne, nous savons que le paramètre adaptatif est principalement défini par. la valeur en pourcentage de la largeur, donc dans les deux colonnes. La disposition adaptative à la largeur utilise également des valeurs de largeur en pourcentage. En continuant avec le code CSS ci-dessus, nous devons définir à nouveau la valeur de largeur de la deuxième colonne :

.

Copiez le code Le code est le suivant :

#left {
background-color : # E8F5FE ;
bordure : 1px solide #A9C9E2 ;
float : gauche ;
hauteur : 300px ;
}
#right {
couleur d'arrière-plan ; : #F2FDDB;
bordure : 1px solide #A5CF3D ;
float : gauche
hauteur : 300px ; la largeur de la colonne de gauche est définie sur 20 % de la largeur et la largeur de la colonne de droite est définie sur 70 % de la largeur. %, ressemble à une page Web commune avec la navigation à gauche et le contenu à droite.





Adaptatif à deux largeurs de colonnes——AA25.CN
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