写一个含有窗口框架的网页
时间: 2023-08-25 10:01:11 浏览: 37
好的,以下是一个简单的含有窗口框架的网页示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Window Frame Demo</title>
<style>
body {
margin: 0;
padding: 0;
}
#frame-container {
position: relative;
height: 100vh;
}
#frame-container iframe {
position: absolute;
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
border: none;
}
#header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="header">Window Frame Demo</div>
<div id="frame-container">
<iframe src="https://www.example.com"></iframe>
</div>
</body>
</html>
```
解释一下代码:
1. `#header` 定义了一个固定在页面顶部的导航栏,高度为 50px,背景颜色为深灰色,文字为白色。
2. `#frame-container` 定义了一个相对定位的容器,高度设为 100vh,即占满整个视口。
3. `#frame-container iframe` 定义了一个绝对定位的 iframe 元素,宽度和高度都设为 100%,即占满整个容器。
4. 通过以上的样式定义,我们实现了一个含有窗口框架的网页。在 iframe 中加载的是 `https://www.example.com` 这个网址,你可以将其替换成你想要的网址。