学习笔记丨一个简单的框架网页代码！

需求：编写一个框架网页代码，将：https://studio.haidongboke.com引入框架中，宽度和高度自适应屏幕，且框架显示圆角

框架网页.jpg

编写一个框架网页代码，将https://studio.haidongboke.com引入其中，并使其<iframe>的宽度和高度自适应屏幕，同时给框架（即<iframe>）添加圆角效果，可以通过CSS来实现这一点。但是，需要注意的是，<iframe>的圆角效果在某些情况下可能不完全如你所期望，因为<iframe>是作为一个独立的文档嵌入的，其内部的文档可能会覆盖或“溢出”你设置的圆角效果。不过，大多数情况下，给<iframe>设置圆角还是能起到一定的美化作用的。

下面是一个简单的HTML和CSS示例，可以实现要求：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应框架嵌入 HaiDongBoKe Studio</title>
    <style>
        /* 使body和html占满整个视口 */
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden; /* 防止外部滚动条 */
            display: flex; /* 使用Flexbox来居中iframe */
            justify-content: center;
            align-items: center;
        }

        /* 设置iframe的大小以适应屏幕，并添加圆角 */
        iframe {
            width: 90%; /* 宽度设置为屏幕宽度的90%，留出一些空间 */
            height: 90vh; /* 高度设置为视口高度的90%，留出一些空间 */
            border: none; /* 移除边框 */
            border-radius: 20px; /* 添加圆角 */
            overflow: hidden; /* 防止iframe内部滚动条影响布局（如果需要的话） */
            /* 注意：overflow: hidden; 可能会影响iframe内部内容的滚动 */
        }
    </style>
</head>
<body>
    <!-- 嵌入HaiDongBoKe Studio网站 -->
    <iframe src="https://studio.haidongboke.com" frameborder="0"></iframe>
</body>
</html>

在这个示例中，我使用了Flexbox来将<iframe>在页面中水平和垂直居中。同时，我设置了<iframe>的width为屏幕宽度的90%，height为视口高度的90%，以留出一些空间，避免<iframe>完全占据整个屏幕。然后，我使用了border-radius属性来给<iframe>添加了圆角效果。

然而，请注意，如果https://studio.haidongboke.com的内容超出了<iframe>的指定大小，用户仍然可能需要滚动来查看全部内容（尽管这里的滚动是在<iframe>内部进行的，而不是整个页面）。另外，由于<iframe>的overflow: hidden;属性可能会影响内部内容的滚动行为，因此你可能需要根据实际情况来调整这个属性。如果你想要保留<iframe>内部内容的滚动条，但又不想让它影响到外部页面的布局，那么你可以考虑不设置overflow: hidden;，或者只在必要时才使用它。

手机扫描二维码访问