Ce que nous avons maintenant dans l'attribut style est, "gauche: 0px; top: 0px;" Avec, les valeurs left et top zéro étant le bord synoptique est sur le bord gauche de la zone cliente de la page. Ensuite, nous avons une largeur de 1px. Ceci est la largeur du bord synoptique. Le reste des propriétés CSS sont explicites sur la base de ce que nous avons couvert dans les parties précédentes de la série. L'élément HR par défaut apparaît horizontalement. Si vous essayez de le faire verticale, par donné une grande hauteur et de faible largeur, cela ne fonctionnera pas.
Ceci est l'élément idéal pour le bord supérieur synoptique. Lorsque la souris est au-dessus, une fonction nommée l'doShiftDown () est appelée. Cette fonction prépare la page pour passer la calculatrice (volet) vers le bas. Les objectifs pour le reste des valeurs de l'élément de RH sont semblables à ceux du bord gauche imitent. Le Reste du CSS vous avez des propriétés de style dans les attributs de style. Le reste des propriétés CSS sont dans la feuille de style.
Ceci est la feuille de style: Les deux dernières déclarations sont pour l'élément de texte calculateur d'entrée et les touches de la calculatrice. Si vous avez couvert les bases, puis le reste des lignes du CSS devrait être auto-explicatif. La largeur de la bordure de la DIV extérieur est 0px. Cette frontière n'a pas besoin d'avoir toute la largeur. L'utilisateur doit même pas savoir que la DIV extérieur existe. Dans les parties précédentes de la série, je utilisé un border-width pour des fins d'illustration. La propriété CSS position pour l'élément DIV intérieure est «relative».
Cela lui permet de se déplacer (lorsque sa position est modifiée) dans la DIV extérieur. Afficher le volet Lorsque vous voulez le volet du bord gauche, la propriété d'affichage de l'élément DIV externe est changé en "bloc". Depuis la DIV externe n'a pas de frontière et il est transparent,