Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1019作业
Blogger Information
Blog 12
fans 0
comment 0
visits 5771
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
1019作业
PHP是世界上最好的语言
Original
561 people have browsed it

作业内容：

  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.     }

效果

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