如何将文本和图像内的形状与HTML?



我试着自学HTML,我一直在这。我基本上试图将一个网页图像在HTML中创建的纯黑色矩形的顶部。矩形应该在顶部和底部有足够的空间放置文本,并与页面的右侧对齐。理想情况下,它应该是这样的。示例

你可以用这个作为起点:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
width: 200px;
background-color: #000;
color: #fff;
padding: 20px 40px;
}
a {
color: #fff;
}
h1 {
text-align: center;
padding-bottom: 20px;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="card">
<h1>TEXT HERE</h1> 
<img src="https://via.placeholder.com/200" alt="image">
<h2>Some text with a <a href="https://example.com">link</a>.</h2>
</div>
</body>
</html> 

进一步阅读:https://www.w3schools.com/howto/howto_css_cards.asp

相关内容

  • 没有找到相关文章

最新更新