如何在同一页上显示圆形和矩形图像

在同一页上显示圆形和矩形图像可以通过使用HTML和CSS来实现。以下是一种可能的实现方法：

创建一个HTML文件，并在文件中添加一个div元素，用于容纳图像。

<!DOCTYPE html>
<html>
<head>
    <title>显示圆形和矩形图像</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .shape {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-color: red;
            margin-right: 20px;
        }

        .rectangle {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="shape"></div>
        <div class="rectangle"></div>
    </div>
</body>
</html>

在上述代码中，我们使用了一个名为.container的div元素来居中显示图像。通过设置display: flex，我们可以将内部元素水平居中。通过设置justify-content: center和align-items: center，我们可以将内部元素垂直居中。
我们创建了两个div元素，一个名为.shape，用于显示圆形图像，另一个名为.rectangle，用于显示矩形图像。我们使用CSS属性border-radius: 50%将.shape元素的边框半径设置为50%，从而使其呈现圆形。
我们可以通过修改.shape和.rectangle的样式来调整图像的大小、颜色等属性。