Maison > Article > interface Web > Introduction à l'utilisation des positions en HTML
Introduction à l'utilisation des positions en HTML
- php中世界最好的语言original
- 2018-02-08 10:01:504029parcourir
Cette fois je vais vous présenter comment utiliser la position en html, et quelles sont les précautions pour utiliser la position en html Voici un cas pratique, jetons un oeil. .
Je viens d'apprendre du contenu sur le HTML hier, et j'avais hâte de créer une barre de recherche sur JD.com. J'ai finalement réussi, mais lorsque je faisais le paiement du panier, il y avait un numéro. affiché dessus. Je ne sais pas comment l'ajouter. Si vous souhaitez que les numéros se déplacent avec le panier, vous devez les positionner ensemble. Tout d'abord, définissez la position du div des numéros sur absolu. . Il semble qu'étant donné que la balise parent de la position du numéro à ce moment est le corps, lors du réglage en haut et à gauche, vous pouvez également la définir sur la position souhaitée du panier. modifiez la marge du panier, les deux ne peuvent pas bouger ensemble, donc définissez la position du panier sur relative, de sorte que l'étiquette parent de la position du numéro devienne le panier, quelle que soit la marge du panier. est ajusté, les chiffres évolueront avec lui....
<html>
<head>
<title>day03.html</title>
<style type="text/css">
/*首先写一个position的div*/
#car{
width:150px;height:30px;
background: #999999;
color:white;text-align: center;
line-height: 30px;margin: 232px 300px;
border:1px solid black;position: relative;
}
#num{
width:20px;height:20px;background: red;
color:white;text-aligh:center;
line-height:20px;position: absolute;
top:-15px;left:25px;
}
</style>
</head>
<body>
<div id="car">
去购物车付款
<div id="num">0</div>
</div>
</body>
</html>Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site php chinois !
Lecture connexe :
Comment utiliser le déclencheur de bouton pour obtenir le clignotement de la couleur d'arrière-plan
Définir plusieurs attributs de classe en HTML est invalide
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!