feat: set img location

This commit is contained in:
sangge 2023-12-03 01:07:55 +08:00
parent d9e14d0352
commit 574a2fb9fe

View File

@ -15,7 +15,6 @@
}
#restaurant .character img {
position: absolute;
top: 0px;
width: 1024px;
height: 1024px;
}
@ -25,27 +24,33 @@
width: 512px;
height: 512px;
}
/* 根据图片实际位置调整left和top值 */
#customer1 { /* 中年男 */
#qinshihuang img{ /* 秦始皇 */
left: 100px;
top: 200px;
display: none;
}
#customer2 { /* 小女孩 */
left: 200px;
top: 200px;
#customer1 img{ /* 中年男 */
left: 800px;
display: none;
}
#customer3 { /* 老奶奶 */
left: 300px;
top: 200px;
#customer2 img{ /* 小女孩 */
left: 800px;
display: none;
}
#mapo-tofu { /* 麻婆豆腐 */
left: 400px;
#customer3 img{ /* 老奶奶 */
left: 800px;
}
#mapo-tofu img{ /* 麻婆豆腐 */
top: 500px;
display: none;
}
#roast-duck { /* 烤鸭 */
left: 500px;
#roast-duck img{ /* 烤鸭 */
top: 500px;
/*display: none; /* 一开始不显示烤鸭 */
display: none;
}
</style>
</head>
@ -55,6 +60,13 @@
<div id="desktop">
<img src="src/pic/desktop.png" alt="desktop">
</div>
<!-- empires elements-->
<div id="qinshihuang" class="character">
<img src="src/pic/QinShiHuang.png" alt="秦始皇">
</div>
<!-- customers elements -->
<div id="customer1" class="character">
<img src="src/pic/Customer1_YoungMan.png" alt="中年男">
</div>
@ -64,6 +76,8 @@
<div id="customer3" class="character">
<img src="src/pic/Customer3_OldLady.png" alt="老奶奶">
</div>
<!-- foods elements -->
<div id="mapo-tofu" class="dish">
<img src="src/pic/MapoTofu_FinishedDish.png" alt="麻婆豆腐">
</div>