网站后台管理页面

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>
    <link rel="stylesheet" href="static/css/admin.css" />
  </head>
  <body>
    <header>
      <h1>网站后台管理系统<small>(v1.0)</small></h1>
      <section>
        <em>admin</em>
        <button onclick="location.href='logout.php'">退出</button>
      </section>
    </header>
    <nav>
      <a href="../1017/demo1.html" target="content">元素属性</a>
      <a href="../1017/demo2.html" target="content">布局元素</a>
      <a href="../1017/demo3.html" target="content">图文列表</a>
      <a href="../1017/demo4.html" target="content">图片链接与列表</a>
      <a href="../1017/demo5.html" target="content">细说表格</a>
      <a href="../1018/demo1.html" target="content">表单元素与控件</a>
      <a href="demo1.html" target="content">音频与视频元素</a>
    </nav>
    <iframe src="default.html" name="content"></iframe>
  </body>
</html>

CSS代码

* {
  margin: 10;
  padding: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #555;
}
body {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-columns: 12em 1fr;
  grid-template-rows: 5em 1fr;
}
body header {
  grid-column-end: span 2;
  background-color: rgb(65, 65, 65);
  letter-spacing: 2px;
  padding: 2em;
  display: flex;
  place-items: center;
}
body header h1 {
  color: #fff;
  font-weight: 500;
  text-shadow: 1px 1px 1px #000;
}
body header section {
  margin-left: auto;
  padding-right: 2em;
}
body header section em {
  color: #eee;
  margin-right: 1em;
}
body header section button {
  padding: 3px 10px;
  border: none;
  outline: none;
  transition: 0.3s;
}
body header section button:hover {
  background-color: coral;
  color: #fff;
  cursor: pointer;
}
nav {
  display: grid;
  grid-auto-rows: min-content;
  border-right: 1px solid currentColor;
  background-color: rgb(233, 233, 233);
  padding: 1em;
  list-style: none;
}
nav a {
  padding: 0.5em 0;
  margin-bottom: 4px;
  background-color: rgb(202, 202, 202);
  border-left: 3px solid rgb(65, 65, 65);
}
nav a:hover {
  background-color: rgb(65, 65, 65);
  transition: 0.3s;
  font-size: 1.01em;
  color: rgb(255, 255, 255);
}
body iframe {
  width: calc(100vw - 10em);
  height: calc(100vh - 6em);
  border: none;
  background-color: #efefef;
}

html 代码

CSS代码

相关文章