Einführung in die Verwendung von Position in HTML

高洛峰
Freigeben: 2017-03-07 11:29:42
Original
3105 Leute haben es durchsucht

Ich glaube, jeder kennt das Positionsattribut in HTML. Es kann verwendet werden, um Aufgaben zu erledigen, die mit normalen Tags nicht erledigt werden können. Ich habe gestern gerade einige HTML-Inhalte kennengelernt und konnte es kaum erwarten, eine Suchleiste auf JD.com zu erstellen. Ich habe es endlich geschafft, aber als ich den Warenkorb auscheckte, wurde eine Nummer darauf angezeigt und ich habe es nicht geschafft. Wenn Sie nicht wissen, wie man sie hinzufügt, müssen Sie sie zusammen mit dem Warenkorb positionieren. Stellen Sie zunächst die Position von p der Zahl ein, was ein geschichtetes Gefühl hat. Denn zu diesem Zeitpunkt ist der übergeordnete Tag der digitalen Position der Körper. Wenn Sie ihn also oben und links festlegen, können Sie ihn auch auf die gewünschte Position im Warenkorb festlegen. Wenn Sie jedoch den Rand des Warenkorbs ändern, ist dies nicht möglich Bewegen Sie sich zusammen, sodass Sie die Position des Warenkorbs relativieren, sodass das übergeordnete Tag der Position der Nummer zum Warenkorb wird. Unabhängig davon, wie der Rand des Warenkorbs angepasst wird, verschieben sich die Nummern mit ....

Der Code lautet wie folgt:

<html> 
<head> 
<title>day03.html</title> 
<style type="text/css"> 
/*首先写一个position的p*/ 
#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> 
<p id="car"> 
去购物车付款 
<p id="num">0</p> 
</p> 
</body> 
</html>
Nach dem Login kopieren

Weitere verwandte Artikel zur Verwendung von Positionen in HTML finden Sie auf der chinesischen PHP-Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage