爱好其实是一种惩罚
纪念我的放肆-消失的那么快
返回顶部
当前位置：首页 > 教学教程 > 正文

自适应嵌入网页的HTML代码

作者：冲灵 发布时间：2025-09-01 16:12 分类： 教学教程 浏览：18 评论：0

导读：一个美观且自适应的网页嵌入解决方案，它会自动调整大小以适应父容器，并添加了一些美化样式！ 代码说明 1. ​响应式设计​： •使用百分比宽度和16:9的宽高比确保嵌...

一个美观且自适应的网页嵌入解决方案，它会自动调整大小以适应父容器，并添加了一些美化样式！

灵狐文转图 (6).png

代码说明

  1. 1.

    ​响应式设计​：

    • •使用百分比宽度和16:9的宽高比确保嵌入内容适应不同屏幕尺寸
    • •添加了viewport meta标签确保在移动设备上正确显示
  2. 2.

    ​美化元素​：

    • •添加了阴影、圆角和适当的间距
    • •使用了柔和的配色方案
    • •包含了标题和页脚使布局更完整
  3. 3.

    ​使用方法​：

    • •将iframe的src属性替换为您想要嵌入的网页URL
    • •可以调整.embed-wrapper中的padding-bottom值来改变宽高比（例如75%是4:3）
  4. 4.

    ​额外功能​：

    • •支持全屏模式（通过allowfullscreen属性）
    • •在加载时显示背景色，避免空白区域显得突兀

这个解决方案在各种设备上都能良好工作，并且外观专业美观。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应网页嵌入</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
            color: #333;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: #2c3e50;
            text-align: center;
            margin-bottom: 20px;
        }

        .embed-wrapper {
            position: relative;
            width: 100%;
            padding-bottom: 56.25%; /* 16:9 宽高比 */
            height: 0;
            overflow: hidden;
            border-radius: 6px;
            border: 1px solid #e0e0e0;
            margin-bottom: 20px;
            background-color: #f9f9f9;
        }

        .embed-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        .description {
            color: #666;
            line-height: 1.6;
            margin-bottom: 30px;
        }

        .footer {
            text-align: center;
            margin-top: 30px;
            color: #7f8c8d;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>网页嵌入示例</h1>

        <p class="description">
            这是一个自适应网页嵌入的示例。下方嵌入的网页会自动调整大小以适应浏览器窗口。
            您可以替换iframe的src属性为您想要嵌入的网页URL。
        </p>

        <div class="embed-wrapper">
            <!-- 替换src为您想要嵌入的网页URL -->
            <iframe src="http://linghu.n26n.com/" allowfullscreen></iframe>
        </div>

        <div class="footer">
            © 2025 灵狐的窝 | 技术支持
        </div>
    </div>
</body>
</html>
手机扫码阅读

资源下载

暂无下载资源

相关文章

发表评论:

教学教程排行

个人资料

冲灵
冲灵
联系博主 网站留言

跳动时间

搜索

最新文章

热门文章

最新评论