search

博客列表 >作业：后台管理小案例

作业：后台管理小案例

高如祥
高如祥原创
2022年10月20日 14:33:56392浏览

后台管理小案例

1.效果图如下

2.代码如下

  2. <!DOCTYPE html>
  3. <html lang="en-us">
  4.   <head>
  5.     <meta charset="utf-8" />
  6.     <meta name="viewport" content="width=device-width" />
  7.     <title>后台管理</title>
  8.     <style>
  9.       * {
  10.         margin: 0;
  11.         padding: 0;
  12.       }
  13.       html,
  14.       body {
  15.         margin: 0;
  16.         padding: 0;
  17.         border: 0;
  18.         overflow: hidden;
  19.         height: 100%;
  20.       }
  21.       header {
  22.         height: 2rem;
  23.         background-color: greenyellow;
  24.         display: flex;
  25.         justify-content: space-between;
  26.         align-items: center;
  27.       }
  28.       p {
  29.         margin-left: 10px;
  30.       }
  31.       header div {
  32.         margin-right: 10px;
  33.       }
  34.       main {
  35.         display: flex;
  36.       }
  37.       nav {
  38.         width: 20rem;
  39.         height: 100vh;
  40.         background-color: rgb(52, 50, 58);
  41.         display: flex;
  42.         flex-direction: column;
  43.         border-right: 1px solid #efc;
  44.         padding: 1em;
  45.       }
  46.       a {
  47.         text-decoration: none;
  48.         color: aliceblue;
  49.         font-size: 1rem;
  50.         padding: 0.5em 0;
  51.         border-bottom: 1px solid rgb(177, 255, 33);
  52.       }
  53.       nav a:hover {
  54.         background-color: lightgreen;
  55.         transition: 0.3s;
  56.         font-size: 1.01em;
  57.         color: orangered;
  58.       }
  59.       iframe {
  60.         width: 100vw;
  61.         height: 100vh;
  62.         border: none;
  63.         background-color: rgb(185, 220, 248);
  64.       }
  65.     </style>
  66.   </head>
  67.   <body>
  68.     <header>
  69.       <p>后台管理系统V1.0</p>
  70.       <div>
  71.         <em>admin</em>
  72.         <a href="">退出</a>
  73.       </div>
  74.     </header>
  75.     <main>
  76.       <nav>
  77.         <a href="1.html" target="nav">item-1</a
  78.         ><a href="demo1.html" target="nav">item-2</a
  79.         ><a href="demo2.html" target="nav">item-3</a
  80.         ><a href="demo3.html" target="nav">item-4</a>
  81.       </nav>
  82.       <iframe src="default.html" name="nav"></iframe>
  83.     </main>
  84.   </body>
  85. </html>
上一条：html简易后台小案例下一条：打造高效的前端开发环境
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多