Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 网站后台管理页面
Blogger Information
Blog 9
fans 0
comment 0
visits 4803
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
网站后台管理页面
兰博
Original
487 people have browsed it

html 代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>网站后台管理系统</title>
  8.     <link rel="stylesheet" href="static/css/admin.css" />
  9.   </head>
  10.   <body>
  11.     <header>
  12.       <h1>网站后台管理系统<small>(v1.0)</small></h1>
  13.       <section>
  14.         <em>admin</em>
  15.         <button onclick="location.href='logout.php'">退出</button>
  16.       </section>
  17.     </header>
  18.     <nav>
  19.       <a href="../1017/demo1.html" target="content">元素属性</a>
  20.       <a href="../1017/demo2.html" target="content">布局元素</a>
  21.       <a href="../1017/demo3.html" target="content">图文列表</a>
  22.       <a href="../1017/demo4.html" target="content">图片链接与列表</a>
  23.       <a href="../1017/demo5.html" target="content">细说表格</a>
  24.       <a href="../1018/demo1.html" target="content">表单元素与控件</a>
  25.       <a href="demo1.html" target="content">音频与视频元素</a>
  26.     </nav>
  27.     <iframe src="default.html" name="content"></iframe>
  28.   </body>
  29. </html>

CSS代码

  1. * {
  2.   margin: 10;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. a {
  7.   text-decoration: none;
  8.   color: #555;
  9. }
  10. body {
  11.   height: 100vh;
  12.   width: 100vw;
  13.   display: grid;
  14.   grid-template-columns: 12em 1fr;
  15.   grid-template-rows: 5em 1fr;
  16. }
  18. body header {
  19.   grid-column-end: span 2;
  20.   background-color: rgb(65, 65, 65);
  21.   letter-spacing: 2px;
  22.   padding: 2em;
  23.   display: flex;
  24.   place-items: center;
  25. }
  26. body header h1 {
  27.   color: #fff;
  28.   font-weight: 500;
  29.   text-shadow: 1px 1px 1px #000;
  30. }
  31. body header section {
  32.   margin-left: auto;
  33.   padding-right: 2em;
  34. }
  35. body header section em {
  36.   color: #eee;
  37.   margin-right: 1em;
  38. }
  39. body header section button {
  40.   padding: 3px 10px;
  41.   border: none;
  42.   outline: none;
  43.   transition: 0.3s;
  44. }
  45. body header section button:hover {
  46.   background-color: coral;
  47.   color: #fff;
  48.   cursor: pointer;
  49. }
  51. nav {
  52.   display: grid;
  53.   grid-auto-rows: min-content;
  54.   border-right: 1px solid currentColor;
  55.   background-color: rgb(233, 233, 233);
  56.   padding: 1em;
  57.   list-style: none;
  58. }
  60. nav a {
  61.   padding: 0.5em 0;
  62.   margin-bottom: 4px;
  63.   background-color: rgb(202, 202, 202);
  64.   border-left: 3px solid rgb(65, 65, 65);
  65. }
  66. nav a:hover {
  67.   background-color: rgb(65, 65, 65);
  68.   transition: 0.3s;
  69.   font-size: 1.01em;
  70.   color: rgb(255, 255, 255);
  71. }
  73. body iframe {
  74.   width: calc(100vw - 10em);
  75.   height: calc(100vh - 6em);
  76.   border: none;
  77.   background-color: #efefef;
  78. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：效果实现的很棒
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post