Vidéo: Tutoriel HTML5 / CSS3 - Créer une Calculatrice // Intégration du style (2/3) 2025
Il y a un certain nombre de considérations pour cette application CSS3 du point de vue du style. Cependant, le besoin le plus pressant est de fournir un moyen d'afficher les graphiques d'une manière à laquelle l'utilisateur s'attendrait, malgré la manière dont les étiquettes sont définies. Normalement, ces composants apparaissent l'un sur l'autre. Vous devez créer des CSS pour obtenir l'apparence requise.
Voici le CSS pour cet exemple:
h1 {text-align: center;} #Catégories {largeur: 220px;}. Sélections ui-selected {arrière-plan: bleu; Couleur blanche;}. Sélections {margin: 0; rembourrage: 0; largeur: 150px; type-style-liste: none;} #DrawingContainer {width: 533px; hauteur: 400px; bordure: solide; position: absolue; à gauche: 250px; haut: 80px;} #Dessin {largeur: 523px; hauteur: 390px; margin: 5px;}
Notez que la largeur de Categories est telle que DrawingContainer peut apparaître à sa droite. Les sélections sont configurées pour s'adapter pleinement aux catégories. Lorsque vous définissez la largeur des sélections, vous devez tenir compte du retrait que l'interface utilisateur jQuery fournit automatiquement dans le widget Accordéon.
La partie la plus importante de la configuration de DrawingContainer est le réglage de gauche, qui doit être configuré pour accueillir le widget Accordéon à sa gauche. La taille de Drawing est telle que l'application peut conserver le format des images qu'elle affichera.
Avec quelques travaux supplémentaires, vous pouvez intégrer facilement des images de tailles différentes dans l'espace - les images d'exemple ont toutes la même taille.
