<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
此处特别注意,应该把body换成frameset
<frameset rows="100,*">
<frame src="后台登录系统.html" style="height: 30%;" noresize="noresize"/>
<frameset cols="150,*">
<frame src="左边.html" cols="200,*" noresize="noresize"/>
<frame src="右边.html" noresize="noresize" name="abd"/>
<!--在分割栏的右栏中设置一个名字,在左边的列表属性中target的值设置为其名字的值-->
</frameset>
</frameset>
</html>
主题的框架 分上下两个大的部分,然后再下边的一部分分为左右两个小块
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
margin-top: 40px;
margin-left: 10px;
}
li{
height: 50px;
}
li a{
text-decoration: none;
font-size: 20px;
color: black;
font-family: "微软雅黑";
}
/*伪类选择器*/
</style>
</head>
<body>
<div>
<ul type="none">
<li><a href="https://www.baidu.com/" target="abd">产品与服务</a></li>
<li><a href="https://www.hao123.com/" target="abd">站点管理</a></li>
<li><a href="https://www.baidu.com/" target="abd">短 信</a></li>
<li><a href="https://www.baidu.com/" target="abd">用户中心</a></li>
<li><a href="https://www.baidu.com/" target="abd">账号管理</a></li>
<li><a href="https://www.baidu.com/" target="abd"实名认证</a></li>
<li><a href="https://www.baidu.com/" target="abd">消息中心</a></li>
<li><a href="https://www.baidu.com/" target="abd">金币管理</a></li>
<li><a href="https://www.baidu.com/" target="abd">订单管理</a></li>
</ul>
</div>
</body>
</html>
这是左边的部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>欢迎来到后台登录系统</h1>
</body>
</html>
这是右边的部分
让左边的内容在右边显示,有两个要求
(1)<frame src="右边.html" noresize="noresize" name="abd"/>
(2)<li><a href="https://www.baidu.com/" target="abd">产品与服务</a></li>