请原谅我的无知,因为我是 html 编码的新手。是否可以使用不同的 img 标签来塑造不同的部分?我认为更改图像类名称然后调用该类会起作用,但两个图像仍然具有 img 属性。
我正在使用以下代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
border-radius: 0%;
}
</style>
</head>
<body>
<h2>Rounded Images</h2>
<img src="img_avatar.png" alt="Avatar" style="width:200px">
</body>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img1 {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Rounded Images</h2>
<img src="img_avatar.png" class="img1" alt="Avatar" style="width:200px">
</body>
</html>
注意:在 Power Automate 中发送电子邮件的格式需要为 html。
你也可以对两个 img 标签使用相同的类
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
border-radius: 0%;
}
.img1{
width: 200px;
}
</style>
</head>
<body>
<h2>Rounded Images</h2>
<img src="./img/IMG_0158.JPG" class="img1" alt="Avatar" >
</body>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img1 {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Rounded Images</h2>
<img src="./img/IMG_0158.JPG" class="img1" alt="Avatar" >
</body>
</html>
类选择器前面应该有
.
。并且您的 html 中不应有多个 body 和 head 标签。试试这个:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.rounded { border-radius: 50%; }
</style>
</head>
<body>
<h2>Square Images</h2>
<img src="img_avatar.png" alt="Avatar" style="width:200px">
<h2>Rounded Images</h2>
<img src="img_avatar.png" class="rounded" alt="Avatar" style="width:200px">
</body>
</html>
假设您使用的是 gmail,可能不允许使用样式标签,然后使用以下代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Square Images</h2>
<img src="img_avatar.png" alt="Avatar" style="width:200px">
<h2>Rounded Images</h2>
<img src="img_avatar.png" class="rounded" alt="Avatar" style="width:200px;border-radius:50%;">
</body>
</html>