part1

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>hw03-18</title>
  8. </head>
  9. <body>
  10.         <!-- part_1 登录表单 -->
  11. <form action="">
  12.     <div class="input">
  13.         <div>
  14.             <label for="email">邮箱:</label>
  15.             <input type="email" id="email" name="email" value="" placeholder="abc123@example.com">
  16.         </div>
  17.         <div>
  18.             <label for="pwd">密码:</label>
  19.             <input type="password" id="pwd" name="password" value="" placeholder="请输入密码">
  20.         </div>
  21.     </div>
  22.     <button>登录</button>
  23. </form>
  24. </body>
  25. </html>

part1

part2

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>hw03-18</title>
  8.     <style>
  9.         body {
  10.             height: 100vh;
  11.             width: 100vw;
  12.             display: grid;
  13.             grid-template-columns: 10em 1fr;
  14.             grid-template-rows: 6em 1fr;
  15.             margin: 0;
  16.         }
  18.         body .header {
  19.             grid-column-end: span 2;
  20.             border-bottom: 1px solid currentColor;
  21.             background-color: rgb(0, 0, 0, 0.5);
  22.             padding: 2em;
  23.             display: flex;
  24.             align-items: center;
  25.         }
  27.         body .header div {
  28.             margin-left: auto;
  29.         }
  31.         body .nav {
  32.             background-color: #efc;
  33.             margin: 0;
  34.             padding-top: 1em;
  35.             list-style: none;
  36.         }
  38.         body iframe {
  39.             width: calc(100vw - 10em);
  40.             height: calc(100vh - 6em);
  41.             border-left: 1px solid currentColor;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46. <div class="header">
  47.     <h1>管理后台</h1>
  48.     <div>
  49.         <span>admin</span>
  50.         <a href="">退出</a>
  51.     </div>
  52. </div>
  54. <ul class="nav">
  55.     <li><a href="https://j.map.baidu.com/b9/yd" target="showBox">地图1</a></li>
  56.     <li><a href="https://j.map.baidu.com/b9/yd" target="showBox">地图2</a></li>
  57.     <li><a href="https://j.map.baidu.com/b9/yd" target="showBox">地图3</a></li>
  58.     <li><a href="https://j.map.baidu.com/b9/yd" target="showBox">地图4</a></li>
  59. </ul> 
  61. <iframe src="" frameborder="2" name="showBox"></iframe>
  63. </body>
  64. </html>

part2

part3

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>hw03-18</title>
  8.     <link rel="stylesheet" href="hw1.css">
  9. </head>
  10. <body>
  11.     <h1>Hello</h1>
  12.     <h1 style="color: red;">Hello</h1>
  13.     <h1 style="color: red;"><p style="color: blue;">Hello</p></h1>
  14.     <div class="v1">
  15.         <h1>Hello</h1>
  16.     </div>
  17. </body>
  18. </html>
  1. .v1{
  2.     color: yellow;
  3. }

part3