实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后台管理系统首页</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--头部-->
<header role="header">
<!--加div防止部padding撑开父级容器-->
<div>
<h1>后台管理系统</h1>
<nav>
<ul>
<li>欢迎管理员：<strong>admin</strong></li>
<li><a href="">修改密码</a></li>
<li><a href="javascript:;" onclick="logout()">退出登录</a></li>
</ul>
</nav>
</div>
</header>
<!--圣杯布局实现主体-->
<main class="role">
<!--主体内联框架-->
<article>
<iframe src="http://www.php.cn/blog/detail/8323.html" name="main"></iframe>
<footer role="copyright">
<p><a href="http://php.cn">php.cn</a>©版权所有</p>
</footer>
</article>
<!--左侧导航区-->
<aside role="menu">
<nav>
<ul>
<li><a href="" target="main">系统设置</a></li>
<li><a href="" target="main">用户管理</a></li>
<li><a href="" target="main">文档管理</a></li>
<li><a href="" target="main">分类管理</a></li>
<li><a href="" target="main">产品管理</a></li>
</ul>
</nav>
</aside>
</main>
<script>
function logout()
{
if(window.confirm('是否退出？')){
window.location.href="http://www.php.cn/blog/detail/8321.html";
}else
{
return false;
}
}
</script>
<style>
*{padding: 0;margin: 0}
body{background: #efefef;}
li{list-style: none;}
a{color: green;text-decoration-line: none;}
a:hover{color: brown;text-decoration-line: underline;}
/********顶部样式*********/
header{width: 100%;background: linear-gradient(to top ,lightgrey ,#efefef);border-bottom: solid 1px gray;overflow: hidden;height: 60px;}
header div{width: 1200px;margin: auto;}
header div h1{float: left;font-weight: lighter;line-height: 60px;margin-left: 20px;}
header div nav{float: right;margin-right: 20px;}
header div nav ul li{float: left;padding-left: 30px;line-height: 80px;}
/********主体区样式*********/
main{width:1000px;height: 800px;margin:0 auto;padding-left: 200px;overflow: hidden;
/*!*父容器能包住浮动区块*!border: solid 1px red;*/
}
/********右侧内容区样式*********/
main article{float: left;width: 100%;min-height: 100%;
/*background:pink;*/}
main article iframe{min-height: 650px;min-width: 100%;margin-right: auto;border: none;}
main article footer{text-align: center;}
/********菜单栏区样式*********/
main aside{float: left;background: linear-gradient(to left,lightgrey,#efefef);border: gray solid 1px;width: 200px;min-height: 100%;margin-left: -100%;position: relative;left: -200px;}
main aside nav{padding:20px 30px;}
main aside nav li{line-height: 2rem;}
</style>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
