正如標題所說，我想移動 html 檔案中的影像。我在 html 和 CSS 中嘗試了一些選項，但無濟于事。當我嘗試在 CSS 中更改圖片的屬性以便可以進一步降低它時，什么也沒有發生。
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
<style>
img {
float: right;
}
r1 {
float: center;
}
</style>
</head>
<body background="background.jpg">
<img class="manonmoon" src="C:\Users\raven\Desktop\Promo Page Rocketman (1)\Priloga\planet-violet-astronout.png" height="550"/>
<img class="r1" src="C:\Users\raven\Desktop\Promo Page Rocketman (1)\Priloga\r1.png" height="110"/>
<img class="r2" src="C:\Users\raven\Desktop\Promo Page Rocketman (1)\Priloga\r2.png" height="110"/>
<img class="r3" src="C:\Users\raven\Desktop\Promo Page Rocketman (1)\Priloga\r3.png" height="110"/>
</body>
</html>
也適用于 CSS：
.r2{
position: relative;
left: 20px;
}
uj5u.com熱心網友回復：
呼叫ri類名時添加css類符號
錯誤的 r1
正確的 .r1
uj5u.com熱心網友回復：
如果它是用于將在具有不同螢屏尺寸的許多不同設備上使用的站點，那么您可能希望使用帶有 CSS 的 flexbox 或網格。但這在開始時有點難以理解。
如果它是一個僅由您在具有您已經知道的螢屏解析度的設備上使用的頁面，那么僅使用position: absolute;和使用top:...;andleft:...;值可能會更容易。
body {
background-image: url('background.jpg');
}
img {
position: absolute;
border: solid 1px black; /*Remove this, just for visualation without img sources*/
}
.manonmoon {
width: 300px; /*Remove this or replace with auto*/
height: 550px;
top: 0px;
left: 0px;
}
.r1, .r2, .r3 {
width: 90px; /*Remove this or replace with auto*/
height: 110px;
}
.r1 {
top: 560px;
left: 0px;
}
.r2 {
top: 560px;
left: 105px;
}
.r3 {
top: 560px;
left: 210px;
}<img class="manonmoon" src=".." alt="...">
<img class="r1" src="..." alt="...">
<img class="r2" src="..." alt="...">
<img class="r3" src="..." alt="...">轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/411896.html
標籤：
上一篇：如何設定下拉選擇區域的最大高度？