HTML综合练习——网站后台管理系统 框架

页头

  1. <div class="header">
  2.   <h1>网站后台管理系统</h1>
  3.   <div><span>admin</span><a href="">退出</a></div>
  4. </div>

导航栏

  1. <ul class="nav">
  2.   <li><a href="linkAndImg.html" target="content">链接图像</a></li>
  3.   <li><a href="list.html" target="content">列表</a></li>
  4.   <li><a href="table.html" target="content">表格</a></li>
  5. </ul>

主题

  1. <div class="main">
  2.   <iframe
  3.     srcdoc="<h2>请点击左侧导航栏按钮</h2>"
  4.     frameborder="0"
  5.     name="content"
  6.   ></iframe>
  7. </div>

页脚

  1. <div class="footer">
  2.   <div>页脚</div>
  3. </div>

Css 样式

  1. <style>
  2.   body {
  3.     height: 100vh;
  4.     width: 100vw;
  5.     display: grid;
  6.     grid-template-columns: 10em 1fr;
  7.     grid-template-rows: 6em 1fr;
  8.     margin: 0;
  9.   }
  10.   body .header {
  11.     grid-column-end: span 2;
  12.     border-bottom: 1px solid currentColor;
  13.     background-color: #ddd;
  14.     padding: 2em;
  15.     display: flex;
  16.     align-items: center;
  17.   }
  18.   .header div {
  19.     margin-left: auto;
  20.   }
  21.   body .nav {
  22.     background-color: #eee;
  23.     margin: 0;
  24.     padding: top 1em;
  25.   }
  26.   body iframe {
  27.     width: calc(100vw - 10em);
  28.     height: calc(100vh - 6em);
  29.     border-left: 1px solid currentColor;
  30.   }
  31.   body .footer {
  32.     grid-column-end: span 2;
  33.     border-bottom: 1px solid currentColor;
  34.     background-color: #ddd;
  35.     padding: 2em;
  37.     display: flex;
  38.   }
  39.   .footer div {
  40.     margin: auto;
  41.   }
  42. </style>
  • 效果

更多相关文章

  1. 婚恋项目后台页面
  2. 完成婚恋网项目后台页面
  3. adminlte框架后台模板分块
  4. 婚恋网后台的资源路由 普通控制器和资源控制器
  5. 婚恋网后台管理路由
  6. 0902作业 常规形式定义婚恋网后台管理路由
  7. 婚恋网后台资源路由的建立与使用 控制器文件建立
  8. bootstrap常用组件样式使用之，导航，列表，按钮
  9. 8.【商城后台管理系统】单点登陆和单一登陆的区别与实现原理案例

随机推荐

  1. php chop函数是什么意思
  2. Android网络状态实时监听实例代码(二)
  3. Android百度地图Poi检索开发总结
  4. Android(安卓)设置 横屏 竖屏
  5. android 一键锁屏 开发
  6. Android中使用PreferenceActivity创建菜
  7. 安装 | Android(安卓)studio 3.5.2安装教
  8. Android(安卓)Rootkit开发技术要点 (一)
  9. Android(安卓)Messenger 进程间通信
  10. Android(安卓)make脚本简记