Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 后台管理及标签属性选择器
Blogger Information
Blog 28
fans 0
comment 0
visits 13019
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
后台管理及标签属性选择器
手机用户1594223549
Original
406 people have browsed it

一.后台管理

1.输出结果

2.代码部分

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.   <style>
  9.     * {
  10.   margin: 0;
  11.   padding: 0;
  12.   box-sizing: border-box;
  13. }
  14. a {
  15.   text-decoration: none;
  16.   color: #555;
  17. }
  18. body {
  19.   height: 100vh;
  20.   width: 100vw;
  21.   display: grid;
  22.   grid-template-columns: 12em 1fr;
  23.   grid-template-rows: 5em 1fr;
  24. }
  26. body header {
  27.   grid-column-end: span 2;
  28.   background-color: seagreen;
  29.   letter-spacing: 2px;
  30.   padding: 2em;
  31.   display: flex;
  32.   place-items: center;
  33. }
  34. body header h1 {
  35.   color: #fff;
  36.   font-weight: 500;
  37.   text-shadow: 1px 1px 1px #000;
  38. }
  39. body header section {
  40.   margin-left: auto;
  41.   padding-right: 2em;
  42. }
  43. body header section em {
  44.   color: #eee;
  45.   margin-right: 1em;
  46. }
  47. body header section button {
  48.   padding: 3px 10px;
  49.   border: none;
  50.   outline: none;
  51.   transition: 0.3s;
  52. }
  53. body header section button:hover {
  54.   background-color: coral;
  55.   color: #fff;
  56.   cursor: pointer;
  57. }
  59. nav {
  60.   display: grid;
  61.   grid-auto-rows: min-content;
  62.   border-right: 1px solid currentColor;
  63.   background-color: #efc;
  64.   padding: 1em;
  65.   list-style: none;
  66. }
  68. nav a {
  69.   padding: 0.5em 0;
  70.   border-bottom: 1px solid #555;
  71. }
  72. nav a:hover {
  73.   background-color: lightgreen;
  74.   transition: 0.3s;
  75.   font-size: 1.01em;
  76.   color: orangered;
  77. }
  79. body iframe {
  80.   width: calc(100vw - 10em);
  81.   height: calc(100vh - 6em);
  82.   border: none;
  83.   background-color: #efefef;
  84. }
  85.   </style>
  86. </head>
  87. <body>
  88.   <header>
  89.     <h2>梦行后台管理</h2>
  90.   <section>
  91.     <em>admin</em>
  92.     <button onclick="location.href=`logout.php`">退出</button>
  93.   </section>
  94.  </header>
  95.  <nav>
  96.   <a href="../1017/demo1.html" target="content">后台首页</a>
  97.   <a href="../1017/demo2.html" target="content">用户管理</a>
  98.   <a href="../1017/demo3.html" target="content">订单管理</a>
  99.   <a href="../1017/demo4.html" target="content">支付管理</a>
  100.   <a href="../1017/demo5.html" target="content">渠道管理</a>
  101.   <a href="../1018/demo1.html" target="content">数据统计</a>  
  102.  </nav>
  103.  <iframe src="first.html" name="content"></iframe> 
  104. </body>
  105. </html>

二.标签及属性选择器

1.输出结果

2.代码部分

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <style>
  9.         h2 {
  10.   color: red;
  11. }
  13. h2[title='php.cn老师'] {
  14.   color: blue;
  15. }
  17. h2#active {
  18.   color: cyan;
  19. }
  21. h2[class='hello'] {
  22.   color: violet;
  23. }
  25. h2.hello {
  26.   color: skyblue;
  27.   border: 1px solid;
  28. }
  30. h1,
  31. h3,
  32. h4 {
  33.   color: rebeccapurple;
  34. }
  36. h2[title],
  37. h2.hello {
  38.   background-color: lightgreen;
  39. }
  42. body * {
  43.   background-color: yellow;
  44. }     
  45.     </style>
  46. </head>
  47. <body>
  48.     <h2>Hello world</h2>
  50.     <h2 title="php.cn老师">Hello, 朱老师</h2>
  52.     <h2 id="active">Hello, php中文网</h2>
  54.     <h2 class="hello">Hello, php.cn</h2>
  56.     <h1>合肥</h1>
  57.     <h3>南京</h3>
  58.     <h4>杭州</h4>
  60. </body>
  61. </html>
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