我只需要完成我的代碼，我想把一張照片放到卡片上，但照片沒有顯示，只是瀏覽器的小圖片圖示。我嘗試了很多解決方案，但沒有幫助我。我想把圖片放在最后一張卡片上，我標記了。如果你能把正確的命令，或者你可以按照正確的方式下訂單....我將非常感激！請幫幫我！：） 謝謝！
我的代碼：
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-16">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>9.A</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 20px;
background: #020202;
}
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: rgb(85, 85, 85);
}
.leftcolumn {
float: left;
width: 75%;
}
.leftcolumn {
float: left;
width: 75%;
}
.leftcolumn {
float: left;
width: 75%;
}
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
</style>
</head>
<body>
<div class="header">
<h2 style="color:white " > 9.A </h2>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>Az A osztályok, avagy az Elektrotechnika</h2>
<p>Iskolánk 1962-es megalapítása óta folyamatosan képzünk villamosipari szakembereket. Kezdetben finommechanikai m?szerész, kés?bb elektronikai m?szerész osztályaink voltak, majd a technikusképzés bevezetése után ipari elektronikai technikusokat, jelenleg pedig elektronikai technikusokat képzünk. Az évek során esti munkarendben t?bb er?sáramú elektrotechnikus osztályunk is végzett, amely szakképesítés oktatására az iskolának jelenleg is van lehet?sége.
</p>
</div>
<div class="card">
<h2>Milyen szakképzési feladatokat tudnak ellátni az itt ballagott diákok?</h2>
<p>Az elektronikai technikus feladatai k?zé tartozik az elektronikai áramk?r?k tervezése, építése, az áramk?r?k m?k?d?képességének méréssel t?rtén? vizsgálata, áramk?r?k javítása, áramk?r?kh?z kapcsolódó dokumentáció készítése éppúgy, mint irányítástechnikai rendszerek programozása, vagy automatikus gyártósorok, robotok üzemeltetése, karbantartása.
</p>
</div>
<div class="card">
<h2>Milyen munkafeladatokat tud elvégezni?</h2>
<p>Az iparban egy gyártósor végén végezhet min?ségellen?rzési, vagy javítási feladatokat, dolgozhat szervizesként, k?zépvezet?ként irányíthatja egy kisebb munkacsoport munkáját, de elhelyezkedhet mint ipari elektronikai technikus, gyengeáramú villamosipari technikus, jelz?berendezés technikus, koncert fénytechnikus, koncert színpadtechnikus vagy világítástechnikus.
</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<img src="IMG/el_900.png" alt="Avatar">
<p> i need the picture here</p> ---------------------
</div>
</div>
</body>
</html>
uj5u.com熱心網友回復：
您的代碼完全沒問題，但問題是您的影像檔案位置。當您的 html 檔案和影像檔案位置相同時，此路徑將起作用，這意味著兩個檔案都保存在一個檔案夾中。我嘗試使用在線影像源
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-16">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>9.A</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 20px;
background: #020202;
}
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: rgb(85, 85, 85);
}
.leftcolumn {
float: left;
width: 75%;
}
.leftcolumn {
float: left;
width: 75%;
}
.leftcolumn {
float: left;
width: 75%;
}
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
</style>
</head>
<body>
<div class="header">
<h2 style="color:white " > 9.A </h2>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>Az A osztályok, avagy az Elektrotechnika</h2>
<p>Iskolánk 1962-es megalapítása óta folyamatosan képzünk villamosipari szakembereket. Kezdetben finommechanikai m?szerész, kés?bb elektronikai m?szerész osztályaink voltak, majd a technikusképzés bevezetése után ipari elektronikai technikusokat, jelenleg pedig elektronikai technikusokat képzünk. Az évek során esti munkarendben t?bb er?sáramú elektrotechnikus osztályunk is végzett, amely szakképesítés oktatására az iskolának jelenleg is van lehet?sége.
</p>
</div>
<div class="card">
<h2>Milyen szakképzési feladatokat tudnak ellátni az itt ballagott diákok?</h2>
<p>Az elektronikai technikus feladatai k?zé tartozik az elektronikai áramk?r?k tervezése, építése, az áramk?r?k m?k?d?képességének méréssel t?rtén? vizsgálata, áramk?r?k javítása, áramk?r?kh?z kapcsolódó dokumentáció készítése éppúgy, mint irányítástechnikai rendszerek programozása, vagy automatikus gyártósorok, robotok üzemeltetése, karbantartása.
</p>
</div>
<div class="card">
<h2>Milyen munkafeladatokat tud elvégezni?</h2>
<p>Az iparban egy gyártósor végén végezhet min?ségellen?rzési, vagy javítási feladatokat, dolgozhat szervizesként, k?zépvezet?ként irányíthatja egy kisebb munkacsoport munkáját, de elhelyezkedhet mint ipari elektronikai technikus, gyengeáramú villamosipari technikus, jelz?berendezés technikus, koncert fénytechnikus, koncert színpadtechnikus vagy világítástechnikus.
</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<img src="https://i.ibb.co/0JfYTnM/social-square-eab77323.jpg" alt="Avatar">
<p> i need the picture here</p> ---------------------
</div>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/532091.html
標籤：html图片卡片