后台管理及标签属性选择器

一.后台管理

1.输出结果

2.代码部分

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    * {
  margin: 0;
  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: seagreen;
  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: #efc;
  padding: 1em;
  list-style: none;
}
nav a {
  padding: 0.5em 0;
  border-bottom: 1px solid #555;
}
nav a:hover {
  background-color: lightgreen;
  transition: 0.3s;
  font-size: 1.01em;
  color: orangered;
}
body iframe {
  width: calc(100vw - 10em);
  height: calc(100vh - 6em);
  border: none;
  background-color: #efefef;
}
  </style>
</head>
<body>
  <header>
    <h2>梦行后台管理</h2>
  <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>  
 </nav>
 <iframe src="first.html" name="content"></iframe> 
</body>
</html>

二.标签及属性选择器

1.输出结果

2.代码部分

<!DOCTYPE html>
<html lang="zh-CN">
<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>
        h2 {
  color: red;
}
h2[title='php.cn老师'] {
  color: blue;
}
h2#active {
  color: cyan;
}
h2[class='hello'] {
  color: violet;
}
h2.hello {
  color: skyblue;
  border: 1px solid;
}
h1,
h3,
h4 {
  color: rebeccapurple;
}
h2[title],
h2.hello {
  background-color: lightgreen;
}
body * {
  background-color: yellow;
}     
    </style>
</head>
<body>
    <h2>Hello world</h2>
    <h2 title="php.cn老师">Hello, 朱老师</h2>
    <h2 id="active">Hello, php中文网</h2>
    <h2 class="hello">Hello, php.cn</h2>
    <h1>合肥</h1>
    <h3>南京</h3>
    <h4>杭州</h4>
</body>
</html>

一.后台管理

1.输出结果

2.代码部分

二.标签及属性选择器

1.输出结果

2.代码部分

相关文章