Heim > Artikel > Web-Frontend > Einführung in die Verwendung von Position in HTML
Einführung in die Verwendung von Position in HTML
- 高洛峰Original
- 2017-03-07 11:29:423083Durchsuche
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>Weitere verwandte Artikel zur Verwendung von Positionen in HTML finden Sie auf der chinesischen PHP-Website!