导读：一个美观且自适应的网页嵌入解决方案，它会自动调整大小以适应父容器，并添加了一些美化样式！
代码说明
1.
响应式设计：
•使用百分比宽度和16:9的宽高比确保嵌...
一个美观且自适应的网页嵌入解决方案，它会自动调整大小以适应父容器，并添加了一些美化样式！
代码说明
- 1.
响应式设计：
- •使用百分比宽度和16:9的宽高比确保嵌入内容适应不同屏幕尺寸
- •添加了viewport meta标签确保在移动设备上正确显示
- 2.
美化元素：
- •添加了阴影、圆角和适当的间距
- •使用了柔和的配色方案
- •包含了标题和页脚使布局更完整
- 3.
使用方法：
- •将iframe的
src属性替换为您想要嵌入的网页URL - •可以调整
.embed-wrapper中的padding-bottom值来改变宽高比（例如75%是4:3）
- •将iframe的
- 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>×
如果觉得文章对您有用，请随意打赏。
您的支持是我们继续创作的动力！
微信扫一扫
支付宝扫一扫
手机扫码阅读
发表评论: