什么是noframes？
在HTML 4.01规范中，noframes是一个不常使用的元素。当页面用<frame>元素组合创建时，它是一个容错机制，允许在浏览器不支持框架时显示一个消息。
无框架布局
无框架布局是指使用HTML和CSS创建一个没有使用<frame>标签的框架布局。这种布局是一种常用的响应式布局，可以使网站在不同的设备上进行适应，而不需要使用框架。
使用div来替代框架布局
要创建无框架布局，我们可以使用<div>标签来替代<frame>标签。以下是一个简单的示例，其中使用了<div>标签来创建两个不同的区域：
<div class="wrapper">
<div class="header">Header</div>
<div class="content">Content</div>
</div>
在这个示例中，<div>标签的类用于控制页面的样式，<wrapper>类是一个用于包含头部和内容的容器，而<header>和<content>类分别表示网站的头部和内容。
使用CSS布局元素
要使无框架布局实现响应式，可以使用CSS中的位置和浮动属性。下面是一些常用的布局元素：
1.位置属性
使用position属性可以控制HTML元素在页面中的位置。以下是一些常用的position属性：
static：元素的默认属性。
absolute：元素相对于其最近的非静态父元素定位。如果没有非静态元素，则相对于文档定位。
relative：元素相对于它自己本来所在位置进行定位。
fixed：元素相对于浏览器窗口进行定位。
2.浮动属性
使用float属性可以使HTML元素左浮动或右浮动，使其不占据页面的全部宽度。以下是一些常用的float属性：
left：元素向左浮动。
right：元素向右浮动。
none：元素不浮动。
示例代码
以下是一个基本的无框架布局示例，使用了CSS的position和float属性来控制HTML元素的位置和布局：
<!DOCTYPE html>
<html>
<head>
<title>无框架布局</title>
<style>
body {
margin: 0;
padding: 0;
}
.header {
background-color: #1E90FF;
color: #fff;
height: 50px;
text-align: center;
line-height: 50px;
}
.nav {
background-color: #4682B4;
color: #fff;
width: 200px;
height: calc(100vh - 50px);
position: fixed;
top: 50px;
left: 0;
}
.content {
margin-left: 200px;
padding: 20px;
}
.box {
background-color: #eee;
padding: 10px;
margin-bottom: 10px;
}
.footer {
background-color: #1E90FF;
color: #fff;
height: 50px;
text-align: center;
line-height: 50px;
clear: both;
}
@media (max-width: 768px) {
.nav {
width: 100%;
height: auto;
position: static;
margin-bottom: 20px;
}
.content {
margin-left: 0;
}
}
</style>
</head>
<body>
<div class="header">Header</div>
<div class="nav">Navigation</div>
<div class="content">
<div class="box">
<h3>标题1</h3>
这是一个段落
这是一个重要部分
</div>
<div class="box">
<h3>标题2</h3>
这是一个段落
这是一个重要部分
</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
在这个示例中，使用了CSS的position和float属性来控制页面元素的位置和布局。媒体查询用于在不同的设备上进行响应式设置，页面在手机设备上将重新布局。