1.视口知识

  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.   </head>
  9.   <body>
  10.     <!-- 
  11.         em: 动态的字号，综实相对于自身或者父元素及根元素，如果根元素固定，em=rem
  12.         rem:静态的字号，总是相对于“根元素
  13.         vw:视口宽度百分比，1vm = 视口宽度1/100
  14.         vh:视口高度百分比，1vh = 视口高度1/100
  15.     -->
  16.     <div class="box"></div>
  17.     <style>
  18.       .box {
  19.         background-color: aqua;
  20.         /* width: 100%;
  21.         height: 100%; */
  22.         width: 50vw;
  23.         height: 80vh;
  24.       }
  25.     </style>
  26.   </body>
  27. </html>

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.   </head>
  9.   <body style="height: 1200px">
  10.     <!-- position:
  11.                 static   静态定位-默认定位
  12.                 relative  相对定位
  13.     -->
  14.     <h1>1.static 静态定位-默认定位</h1>
  15.     <h2>2.relative 相对定位,相对于自身</h2>
  16.     <div class="box">
  17.       <!-- 3.absolute 绝对定位 -->
  18.       <div class="wrap">3.absolute 绝对定位，相对于定位父级</div>
  19.     </div>
  20.     <div class="box2">4.fixed 固定定位，相对于body</div>
  21.     <style>
  22.       /* 添加边框 */
  23.       h1,
  24.       h2,
  25.       h3 {
  26.         border: 1px solid red;
  27.       }
  28.       h2 {
  29.         /* h2相对定位 */
  30.         position: relative;
  31.         top: 150px;
  32.         left: 100px;
  33.         right: 0;
  34.         bottom: 0;
  35.       }
  36.       /* h3绝对定位 */
  37.       .box {
  38.         width: 300px;
  39.         height: 250px;
  40.         border: 1px solid red;
  41.         background-color: wheat;
  42.         /* 父元素为非static的定位属性，就转为定位元素 */
  43.         position: relative;
  44.         /* position: absolute; */
  45.       }
  46.       .box .wrap {
  47.         width: 100px;
  48.         height: 80px;
  49.         border: 1px solid black;
  50.         background-color: lawngreen;
  51.         /* 相对定位 */
  52.         /* position: relative;
  53.         top: 20px;
  54.         left: 20px; */
  55.         /* 绝对定位 */
  56.         position: absolute;
  57.         top: 30px;
  58.         left: 50px;
  59.       }
  60.       .box2 {
  61.         width: 120px;
  62.         height: 120px;
  63.         background-color: gold;
  64.         position: fixed;
  65.         top: 450px;
  66.         right: 0;
  67.       }
  68.     </style>
  69.   </body>
  70. </html>

3.模态框

HTML代码

  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.     <link rel="stylesheet" href="modal.css" />
  9.   </head>
  10.   <body>
  11.     <!-- 头部 -->
  12.     <header>
  13.       <div class="title">某某内容管理系统</div>
  14.       <button onclick="showModal()">登录</button>
  15.     </header>
  16.     <div class="mail">网站中心内容区</div>
  17.     <!-- 模态框内容区 -->
  18.     <div class="modal">
  19.       <!-- 1.半透明的遮罩 -->
  20.       <div class="modal-bg" onclick="closeModal()"></div>
  21.       <!-- 2.弹层表单 -->
  22.       <form action="" class="modal-form">
  23.         <fieldset style="display: grid; gap: 1em">
  24.           <legend>用户登陆</legend>
  25.           <input type="text" name="username" placeholder="请输入用户名" />
  26.           <input type="password" name="password" placeholder="请输入密码" />
  27.           <button>登录</button>
  28.         </fieldset>
  29.       </form>
  30.     </div>
  31.     <script src="modal.js"></script>
  32.   </body>
  33. </html>

css代码

  1. /* 初始化 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. /* 头部样式 */
  8. header {
  9.   padding: 0.5em 1em;
  10.   background-color: grey;
  11.   display: flex;
  12. }
  13. header .title {
  14.   font-size: x-large;
  15.   font-weight: lighter;
  16.   letter-spacing: 2px;
  17.   text-shadow: 1px 1px 1px;
  18.   display: flex;
  19. }
  20. /* 登陆按钮 */
  21. header button {
  22.   margin-left: auto;
  23.   width: 5em;
  24.   border: none;
  25.   border-radius: 0.5em;
  26. }
  27. header button:hover {
  28.   cursor: pointer;
  29.   background-color: rebeccapurple;
  30.   color: floralwhite;
  31.   /* 盒子加阴影 发光效果 */
  32.   /* box-shadow: 向右，向下，模糊半径，颜色; */
  33.   box-shadow: 0 0 5px #fff;
  34.   /* 过渡效果 */
  35.   transition: 0.5s;
  36. }
  38. /* 模态框 */
  39. .modal .modal-form fieldset {
  40.   height: 15.5em;
  41.   background-color: lightcyan;
  42.   border: none;
  43.   padding: 2em 3em;
  44.   box-shadow: 0 0 5px #888;
  45. }
  47. /* 模态框表单标题 */
  49. .modal .modal-form fieldset legend {
  50.   padding: 7px 1.5em;
  51.   background-color: lightseagreen;
  52.   color: white;
  53. }
  55. .modal .modal-form fieldset input {
  56.   height: 3em;
  57.   padding-left: 1em;
  58.   outline: none;
  59.   border: 1px solid #ddd;
  60.   font-size: 14px;
  61. }
  62. /* :focus: 表单控件,获取焦点时的样式 */
  64. .modal .modal-form fieldset input:focus {
  65.   box-shadow: 0 0 8px #888;
  66.   border: none;
  67. }
  69. .modal .modal-form fieldset button {
  70.   background-color: lightseagreen;
  71.   color: white;
  72.   border: none;
  73.   height: 3em;
  74.   font-size: 16px;
  75.   height: 2.5em;
  76. }
  78. .modal .modal-form fieldset button:hover {
  79.   background-color: coral;
  80.   cursor: pointer;
  81. }
  82. /* 定位 */
  83. .modal .modal-form {
  84.   /* 固定定位 */
  85.   position: fixed;
  86.   top: 12em;
  87.   /* 正中间 */
  88.   left: 38em;
  89.   right: 38em;
  90. }
  92. /* 遮罩 */
  93. .modal .modal-bg {
  94.   position: fixed;
  95.   /* 定位到坐标的四个顶点 */
  96.   top: 0;
  97.   left: 0;
  98.   right: 0;
  99.   bottom: 0;
  100.   /* 半透明 */
  101.   background-color: rgba(0, 0, 0, 0.5);
  102. }
  104. /* 隐藏整个模态框 */
  105. .modal {
  106.   display: none;
  107. }
  109. /* 内容区显示 */
  110. .mail {
  111.   height: 500px;
  112.   width: auto;
  113.   top: 30px;
  114.   display: relative;
  115. }