编写一个框架网页,在顶部创建一个用于显示网站标题的横幅框架,在左边创建一个用于显示网页连接的目录框架,并在右下方创建一个用于显示内容的主要框架。要求在目录框架中单击不同链接时,在主要框架中显示相应的网页,其中目录框架中设计一个链接“用户注册”页面(用表单设计)。
时间: 2023-06-16 14:03:00 浏览: 160
以下是一个简单的示例代码,实现了上述要求:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
/* 设置横幅框架样式 */
.banner {
background-color: #222;
color: white;
padding: 10px;
text-align: center;
}
/* 设置目录框架样式 */
.sidebar {
float: left;
width: 20%;
height: 500px;
background-color: #f1f1f1;
padding: 20px;
overflow-y: auto;
}
/* 设置链接样式 */
.sidebar a {
display: block;
margin-bottom: 10px;
color: #222;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
/* 设置选中链接样式 */
.sidebar a.active {
background-color: #222;
color: white;
}
/* 设置主要框架样式 */
.main {
float: right;
width: 80%;
height: 500px;
padding: 20px;
background-color: #f1f1f1;
overflow-y: auto;
}
</style>
</head>
<body>
<!-- 横幅框架 -->
<div class="banner">
<h1>My Website</h1>
</div>
<!-- 目录框架 -->
<div class="sidebar">
<a href="#" class="active">首页</a>
<a href="#">关于我们</a>
<a href="#">联系方式</a>
<a href="#">产品介绍</a>
<a href="#">用户注册</a>
</div>
<!-- 主要框架 -->
<div class="main">
<h2>欢迎访问我的网站!</h2>
<p>这里是网站的主要内容区域。</p>
</div>
<!-- JavaScript 代码 -->
<script>
// 获取所有链接元素
var links = document.getElementsByTagName('a');
// 遍历链接元素,为每个链接添加单击事件
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
// 取消所有链接的选中状态
for (var j = 0; j < links.length; j++) {
links[j].classList.remove('active');
}
// 为当前链接添加选中状态
this.classList.add('active');
// 获取链接的目标 URL
var url = this.getAttribute('href');
// 在主要框架中显示目标网页
document.querySelector('.main').innerHTML = '<h2>' + this.innerText + '</h2><p>正在加载...</p>';
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.querySelector('.main').innerHTML = xhr.responseText;
}
};
xhr.send();
return false;
}
}
</script>
</body>
</html>
```
在上述代码中,我们使用了 HTML 和 CSS 来创建横幅框架、目录框架和主要框架,并使用 JavaScript 代码为每个链接添加单击事件,当用户单击链接时加载相应的网页内容。其中,用户注册页面使用表单设计。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)