简单的后台框架
16lz
2022-03-21
简单的后台框架
效果图
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>简单后台框架</title>
<style>
body {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 10em 1fr;
grid-template-rows: 6em 1fr;
margin: 0;
}
body .header {
grid-column-end: span 2;
border-bottom: 1px solid currentColor;
background-color: #008ead;
padding: 2em;
display: flex;
align-items: center;
color: #fff;
}
body .header div {
margin-left: auto;
}
body .nav {
background-color: #efc;
margin: 0;
padding-top: 1em;
list-style: none;
}
body iframe {
width: calc(100vw - 10em);
height: calc(100vh - 6em);
border-left: 1px solid currentColor;
}
</style>
</head>
<body>
<!-- 顶部 -->
<div class="header">
<h2>管理后台</h2>
<div>用户名:admin</div>
<a href="">退出</a>
</div>
<!-- 左侧导航 -->
<!-- li*5>a[href="demo$.html" target="content"]{菜单项$} -->
<ul class="nav">
<li><a href="demo1.html" target="content">菜单项1</a></li>
<li><a href="demo2.html" target="content">菜单项2</a></li>
<li><a href="demo4.html" target="content">菜单项3</a></li>
<li><a href="demo5.html" target="content">菜单项4</a></li>
<li><a href="demo6.html" target="content">菜单项5</a></li>
</ul>
<!-- 右侧内容 -->
<iframe srcdoc="<h2 style='color:red'>欢迎光临...</h2>" frameborder="1" name="content"></iframe>
</body>
</html>
更多相关文章
- 1. 写一个登录表单,要求有邮箱,密码,登录按钮 2. 写一个简单后台
- 一个简单的登陆表单、后台框架及实例演示元素样式来源和优先级
- 利用iframe做一个简单的后台界面
- 利用iframe做一个简单的后台界面
- form表单提交、使用iframe编写后台简单布局、css样式分类与优先
- 表单、内联框架以及CSS基础学习小结
- 用iframe实现简单后台架构
- Android(安卓)最火的快速开发框架XUtils
- Android异步处理二:使用AsyncTask异步更新UI界面