博主信息
博文 28
粉丝 0
评论 0
访问量 20079
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
后台管理及标签属性选择器
手机用户1594223549
原创
636人浏览过

一.后台管理

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. }
  25. body header {
  26. grid-column-end: span 2;
  27. background-color: seagreen;
  28. letter-spacing: 2px;
  29. padding: 2em;
  30. display: flex;
  31. place-items: center;
  32. }
  33. body header h1 {
  34. color: #fff;
  35. font-weight: 500;
  36. text-shadow: 1px 1px 1px #000;
  37. }
  38. body header section {
  39. margin-left: auto;
  40. padding-right: 2em;
  41. }
  42. body header section em {
  43. color: #eee;
  44. margin-right: 1em;
  45. }
  46. body header section button {
  47. padding: 3px 10px;
  48. border: none;
  49. outline: none;
  50. transition: 0.3s;
  51. }
  52. body header section button:hover {
  53. background-color: coral;
  54. color: #fff;
  55. cursor: pointer;
  56. }
  57. nav {
  58. display: grid;
  59. grid-auto-rows: min-content;
  60. border-right: 1px solid currentColor;
  61. background-color: #efc;
  62. padding: 1em;
  63. list-style: none;
  64. }
  65. nav a {
  66. padding: 0.5em 0;
  67. border-bottom: 1px solid #555;
  68. }
  69. nav a:hover {
  70. background-color: lightgreen;
  71. transition: 0.3s;
  72. font-size: 1.01em;
  73. color: orangered;
  74. }
  75. body iframe {
  76. width: calc(100vw - 10em);
  77. height: calc(100vh - 6em);
  78. border: none;
  79. background-color: #efefef;
  80. }
  81. </style>
  82. </head>
  83. <body>
  84. <header>
  85. <h2>梦行后台管理</h2>
  86. <section>
  87. <em>admin</em>
  88. <button onclick="location.href=`logout.php`">退出</button>
  89. </section>
  90. </header>
  91. <nav>
  92. <a href="../1017/demo1.html" target="content">后台首页</a>
  93. <a href="../1017/demo2.html" target="content">用户管理</a>
  94. <a href="../1017/demo3.html" target="content">订单管理</a>
  95. <a href="../1017/demo4.html" target="content">支付管理</a>
  96. <a href="../1017/demo5.html" target="content">渠道管理</a>
  97. <a href="../1018/demo1.html" target="content">数据统计</a>
  98. </nav>
  99. <iframe src="first.html" name="content"></iframe>
  100. </body>
  101. </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. }
  12. h2[title='php.cn老师'] {
  13. color: blue;
  14. }
  15. h2#active {
  16. color: cyan;
  17. }
  18. h2[class='hello'] {
  19. color: violet;
  20. }
  21. h2.hello {
  22. color: skyblue;
  23. border: 1px solid;
  24. }
  25. h1,
  26. h3,
  27. h4 {
  28. color: rebeccapurple;
  29. }
  30. h2[title],
  31. h2.hello {
  32. background-color: lightgreen;
  33. }
  34. body * {
  35. background-color: yellow;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <h2>Hello world</h2>
  41. <h2 title="php.cn老师">Hello, 朱老师</h2>
  42. <h2 id="active">Hello, php中文网</h2>
  43. <h2 class="hello">Hello, php.cn</h2>
  44. <h1>合肥</h1>
  45. <h3>南京</h3>
  46. <h4>杭州</h4>
  47. </body>
  48. </html>
批改老师:PHPzPHPz

批改状态:合格

老师批语:很好 , 继续加油, 有注意到你每一次作业完成的都不错 ,态度很认真
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学