search

博客列表 >1019作业

1019作业

PHP是世界上最好的语言
PHP是世界上最好的语言原创
2022年10月20日 15:31:01560浏览

作业内容：

  1. <iframe>写一个后台小案例: <a>+<iframe>实现
  2. 实例演示 标签,属性选择器, 以及群组选择器的使用场景

后台小案例

代码

index.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>php中文网后台管理系统</title>
  6.         <link rel="stylesheet" href="./css/admin.css"/>
  7.     </head>
  8.     <body>
  9.         <div class="content">
  10.             <div class="left">
  11.                 <div class="logo">
  12.                     <h3>php.cn 后台管理系统</h3>
  13.                 </div>
  14.                 <div class="menu">
  15.                     <nav>
  16.                       <a href="home.html" target="content">首页</a>
  17.                       <a href="courses.html" target="content">课程管理</a>
  18.                       <a href="teachers.html" target="content">教师管理</a>
  19.                       <a href="orders.html" target="content">订单管理</a>
  20.                     </nav>
  21.                 </div>
  22.             </div>
  23.             <div class="right">
  24.                 <header>
  25.                     <section>
  26.                         <em>admin</em>
  27.                         <button onclick="location.href='logout.php'">退出</button>
  28.                     </section>
  29.                 </header>
  31.             <iframe src="home.html" name="content"></iframe>
  32.             </div>
  33.         </div>
  34.     </body>
  35. </html>

home.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <h1>首页</h1>
  9.     </body>
  10. </html>

courses.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <h1>课程管理</h1>
  9.     </body>
  10. </html>

orders.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <h1>订单管理</h1>
  9.     </body>
  10. </html>

admin.css

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. a {
  7.   text-decoration: none;
  8.   color: #555;
  9. }
  10. .content {
  11.   height: 100vh;
  12.   width: 100vw;
  13.   display: grid;
  14.   grid-template-columns: 12em 1fr;
  15.     grid-template-areas: 
  16.     "left right";
  17. }
  19. .left {
  20.     grid-area: left;
  21.     background-color: gray;
  22. }
  24. .right {
  25.     grid-area: right;
  26. }
  28. .logo {
  29.     color: whitesmoke;
  30.     background-color: seagreen;
  31.     height: 5.5em;
  32.     text-align: center;
  33.     padding-top: 30px;
  34. }
  36. body header {
  37.   background-color: white;
  38.   letter-spacing: 2px;
  39.   padding: 2em;
  40.   display: flex;
  41.   place-items: center;
  42.     border-bottom: #eee;
  43. }
  44. body header h1 {
  45.   color: grey;
  46.   font-weight: 500;
  47.   text-shadow: 1px 1px 1px #000;
  48. }
  49. body header section {
  50.   margin-left: auto;
  51.   padding-right: 2em;
  52. }
  53. body header section em {
  54.   color: grey;
  55.   margin-right: 1em;
  56. }
  57. body header section button {
  58.   padding: 3px 10px;
  59.   border: none;
  60.   outline: none;
  61.   transition: 0.3s;
  62. }
  63. body header section button:hover {
  64.   background-color: coral;
  65.   color: #fff;
  66.   cursor: pointer;
  67. }
  69. nav {
  70.   display: grid;
  71.   grid-auto-rows: min-content;
  72.   border-right: 1px solid currentColor;
  73.   background-color: gray;
  74.   padding: 1em;
  75.   list-style: none;
  76. }
  78. nav a {
  79.   padding: 0.5em 0;
  80.   border-bottom: 1px solid #555;
  81.     color: #fff;
  82. }
  83. nav a:hover {
  85.   transition: 0.3s;
  86.   font-size: 1.01em;
  87.   color: black;
  88. }
  90. body iframe {
  91.   width: calc(100vw - 10em);
  92.   height: calc(100vh - 6em);
  93.   border: none;
  94.   background-color: #efefef;
  95. }

效果

选择器的使用

html

  1. <div class="content">
  2.             <div class="left">
  3.                 <div class="logo">
  4.                     <h3>php.cn 后台管理系统</h3>
  5.                 </div>
  6.                 <div class="menu">
  7.                     <nav>
  8.                       <a class="active" href="home.html" target="content">首页</a>
  9.                       <a href="courses.html" target="content">课程管理</a>
  10.                       <a href="teachers.html" target="content">教师管理</a>
  11.                       <a href="orders.html" target="content">订单管理</a>
  12.                     </nav>
  13.                 </div>
  14.             </div>
  16.              <table id="time-table">
  17.                <caption><h2>课程表</h2></caption>
  18.                <thead>
  19.                 <tr>
  20.                   <th colspan="2">节次\星期</th>
  21.                   <th>星期一</th>
  22.                   <th>星期二</th>
  23.                   <th>星期三</th>
  24.                   <th>星期四</th>
  25.                   <th>星期五</th>
  26.                 </tr>
  27.                </thead>
  28.                <tbody>
  29.                 <tr>
  30.                   <td colspan="7" style="background-color: lightgray;">
  31.                     <p style="margin: 2;">早自习</p>
  32.                     <p style="margin: 2;">07:00 - 07:50</p>
  33.                   </td>
  34.                 </tr>
  35.                 <tr>
  36.                   <th rowspan="4">上午</th>
  37.                   <th>
  38.                     <p>第一节</p>
  39.                     <p>08:00 - 08:40</p>
  40.                   </th>
  41.                   <td>语文</td>
  42.                   <td>数学</td>
  43.                   <td>英语</td>
  44.                   <td>化学</td>
  45.                   <td>物理</td>
  46.                 </tr>
  47.                 <tr>
  48.                   <th>
  49.                     <p>第二节</p>
  50.                     <p>08:50 - 09:30</p>
  51.                   </th>
  52.                   <td>语文</td>
  53.                   <td>数学</td>
  54.                   <td>英语</td>
  55.                   <td>化学</td>
  56.                   <td>物理</td>
  57.                 </tr>
  58.                 <tr>
  59.                   <th>
  60.                     <p>第三节</p>
  61.                     <p>09:40 - 10:20</p>
  62.                   </th>
  63.                   <td>语文</td>
  64.                   <td>数学</td>
  65.                   <td>英语</td>
  66.                   <td>化学</td>
  67.                   <td>物理</td>
  68.                 </tr>
  69.                 <tr>
  70.                   <th>
  71.                     <p>第四节</p>
  72.                     <p>10:30 - 11:20</p>
  73.                   </th>
  74.                   <td>语文</td>
  75.                   <td>数学</td>
  76.                   <td>英语</td>
  77.                   <td>化学</td>
  78.                   <td>物理</td>
  79.                 </tr>
  80.                 <tr>
  81.                   <td colspan="7" style="background-color: lightgray;">
  82.                     <p>午休</p>
  83.                     <p>12:00 - 14:00</p>
  84.                   </td>
  85.                 </tr>
  86.                 <tr>
  87.                   <th rowspan="3">上午</th>
  88.                   <th>
  89.                     <p>第五节</p>
  90.                     <p>14:00 - 14:40</p>
  91.                   </th>
  92.                   <td>语文</td>
  93.                   <td>数学</td>
  94.                   <td>英语</td>
  95.                   <td>化学</td>
  96.                   <td>物理</td>
  97.                 </tr>
  98.                 <tr>
  99.                   <th>
  100.                     <p>第六节</p>
  101.                     <p>14:50 - 15:30</p>
  102.                   </th>
  103.                   <td>语文</td>
  104.                   <td>数学</td>
  105.                   <td>英语</td>
  106.                   <td>化学</td>
  107.                   <td>物理</td>
  108.                 </tr>
  109.                 <tr>
  110.                   <th>
  111.                     <p>第七节</p>
  112.                     <p>15:40 - 16:40</p>
  113.                   </th>
  114.                   <td>语文</td>
  115.                   <td>数学</td>
  116.                   <td>英语</td>
  117.                   <td>化学</td>
  118.                   <td>物理</td>
  119.                 </tr>
  120.                 <td colspan="7" style="background-color: lightgray;">
  121.                   <p>晚自习</p>
  122.                   <p>19:00 - 21:50</p>
  123.                 </td>
  124.               </tr>
  125.                </tbody>
  126.                <tfoot>
  127.                 <tr>
  128.                   <!-- 水平方向合并/列合并 : colspan  -->
  129.                   <th colspan="2">课程表有效期:</th>
  130.                   <td colspan="5">2022年10月1日-2023年5月1日</td>
  131.                 </tr>
  132.               </tfoot>
  133.              </table>
  135.         </div>

CSS代码

标签选择器

  1.     h3 {
  2.         color: red;
  3.     }
  4.     a {
  5.         text-decoration: none;
  6.         color: gray;
  7.     }
  8.     #time-table p {
  9.         margin: 2px;
  10.     }

属性选择器

  1.     a.active {
  2.         color: orange;
  3.     }

群组选择器

  1.     /* 群组选择器, 多个选择器之间用逗号分开 */
  2.     #time-table, th, td{
  3.         border: solid gray 2px; 
  4.         text-align: center;
  5.     }
  6.     /* 群组选择器, 多个选择器之间用逗号分开 */
  7.     tfoot th, tfoot td {
  8.         border: none;
  9.     }

效果

上一条：iframe网站管理后台+css选择器的使用下一条：html简易后台小案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多