Einführung in die Positionsverwendung in HTML-HTML-Tutorial-php.cn

Einführung in die Positionsverwendung in HTML

php中世界最好的语言

Freigeben： 2018-02-08 10:01:50

Original

4159 Leute haben es durchsucht

Dieses Mal werde ich Ihnen vorstellen, wie Sie Position in HTML verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Position in HTML gelten. Hier ist ein praktischer Fall, schauen wir uns das an .

Ich habe gestern erst ein paar Inhalte über HTML gelernt und konnte es kaum erwarten, eine Suchleiste auf JD.com zu erstellen. Ich habe es endlich geschafft, aber als ich zur Kasse ging, war da eine Zahl Darauf angezeigt. Ich weiß nicht, wie ich es hinzufügen soll. Wenn Sie möchten, dass sich die Zahlen mit dem Warenkorb verschieben, müssen Sie die Position der Zahlen unbedingt auf „absolut“ setzen Es scheint, dass die übergeordnete Position der Nummer zu diesem Zeitpunkt der Körper ist. Wenn Sie sie jedoch oben und links festlegen, können Sie sie auch auf die gewünschte Position festlegen Wenn Sie den Rand des Warenkorbs ändern, können sich die beiden nicht zusammen bewegen. Stellen Sie daher die Position des Warenkorbs auf relativ ein, sodass das übergeordnete Tag der Position der Nummer zum Warenkorb wird. Unabhängig vom Rand des Warenkorbs angepasst wird, werden sich die Zahlen mitbewegen....

<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>

Nach dem Login kopieren

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Verwandte Lektüre:

So verwenden Sie den Button-Trigger, um das Blinken der Hintergrundfarbe zu erreichen

Das Definieren mehrerer Klassenattribute in HTML ist ungültig

Das obige ist der detaillierte Inhalt vonEinführung in die Positionsverwendung in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!