左侧菜单，右侧内容的布局，使用iframe（常见于系统后台）

这种布局多见于系统后台管理，基本分为三部分，即顶部标、左侧菜单、右侧内容。
基本功能是点击左侧菜单，右侧内容转到相应的界面。点击顶部logo回到首页。
一种方式是用iframe，在内容区里使用框架。
顶部代码

<!--
        	作者：offline
        	时间：2020-03-19
        	描述：顶部蓝条
        -->
		<div class="head">
			<div class="logo">
				<a href="HTindex.html" target="dd"><img src="pto/02.jpg" /></a>
			</div>
			<div class="zi">
				<p>商城管理界面</p>
			</div>
		</div>

左侧菜单代码，点击相应的超链接，内容区会出现相应的界面

<!--
        	作者：offline
        	时间：2020-03-23
        	描述：左侧菜单
        -->
		<div class="big-content">
			<div class="menu">
					<ul><p>商品管理</p>
					<li><a href="SPsj.php" target="dd">商品上架</a></li>
					<li>商品下架</li>
					<li>商品查询</li>
					<li>商品修改</li>
				</ul>
				
				<ul><p>信息管理</p>
					<li>发布公告</li>
					<li>商品交易情况</li>
					<li>商品查询</li>
					<li>商品修改</li>
				</ul>
				<ul class="dd"><p>用户管理</p>
					<li>用户</li>
					<li data-id="yhdl">修改用户信息</li>
					<li>用户交易信息</li>
					<li>删除用户信息</li>
				</ul>
			</div>
			<!--

右侧内容区

<div class="content">
				<iframe src="HTindex.html" class="content-1" name="dd" frameborder="0"></iframe>
				
			</div>
		</div>

这是首页

点击商品上架后，其他界面可以自制简单界面来测试

后台界面css，记得导入

body{
	margin: 0 auto;
}
p{
	margin: auto;
}
li{
	list-style-type:none;
}
ul{
	padding: 0;
}
a:link {text-decoration:none;color: white;}
a:visited {text-decoration:none;color: white;}
a:hover {text-decoration:none;color: white;}
a:active {text-decoration:none;color: white;}
/*顶部黑条*/
.head{
	height: 50px;
	background-color: #23262E;
	color: white;
}

.big-content .menu{
	position: fixed;
	top: 50px;
	left: 0;
	bottom: 0;
	width: 200px;
	background-color: #23262E;
}
.big-content .content{
	position: fixed;
            top: 50px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: #F8F9FA;
            overflow: hidden;
            }

.head .logo img{
	width: 200px;
	height: 45px;
	float: left;
	margin-top: 3px;
	margin-left: 40px;
}

.head .zi {
	font-size: 30px;
	text-align: center;
}
.head .zi p{
	padding: 5px;
}

/*左侧菜单栏*/
.big-content .menu ul{
	font-size: 25px;
	margin: 0;
	background-color: #2E2D3C;
	text-align: center;
	color: white;
}
.big-content .menu p{
	padding: 10px 0;

}
.big-content .menu li{
	font-size: 16px;
	line-height: 30px;
	background-color: #23262E;
	color: white;
}
.big-content .menu a{
	display: block;
}
.big-content .menu li:hover{
	background-color: #2F4056;
}

.big-content .content{
	border: 0 solid #DEE2E6;
}
.content-1{
	width: 100%;
	height: 100%;
	
}