1.视口知识

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>视口知识</title>
  </head>
  <body>
    <!-- 
        em: 动态的字号，综实相对于自身或者父元素及根元素，如果根元素固定，em=rem
        rem:静态的字号，总是相对于“根元素
        vw:视口宽度百分比，1vm = 视口宽度1/100
        vh:视口高度百分比，1vh = 视口高度1/100
    -->
    <div class="box"></div>
    <style>
      .box {
        background-color: aqua;
        /* width: 100%;
        height: 100%; */
        width: 50vw;
        height: 80vh;
      }
    </style>
  </body>
</html>

2.定位与定位元素

演示效果

代码部分

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定位与定位元素</title>
  </head>
  <body style="height: 1200px">
    <!-- position:
                static   静态定位-默认定位
                relative  相对定位
    -->
    <h1>1.static 静态定位-默认定位</h1>
    <h2>2.relative 相对定位,相对于自身</h2>
    <div class="box">
      <!-- 3.absolute 绝对定位 -->
      <div class="wrap">3.absolute 绝对定位，相对于定位父级</div>
    </div>
    <div class="box2">4.fixed 固定定位，相对于body</div>
    <style>
      /* 添加边框 */
      h1,
      h2,
      h3 {
        border: 1px solid red;
      }
      h2 {
        /* h2相对定位 */
        position: relative;
        top: 150px;
        left: 100px;
        right: 0;
        bottom: 0;
      }
      /* h3绝对定位 */
      .box {
        width: 300px;
        height: 250px;
        border: 1px solid red;
        background-color: wheat;
        /* 父元素为非static的定位属性，就转为定位元素 */
        position: relative;
        /* position: absolute; */
      }
      .box .wrap {
        width: 100px;
        height: 80px;
        border: 1px solid black;
        background-color: lawngreen;
        /* 相对定位 */
        /* position: relative;
        top: 20px;
        left: 20px; */
        /* 绝对定位 */
        position: absolute;
        top: 30px;
        left: 50px;
      }
      .box2 {
        width: 120px;
        height: 120px;
        background-color: gold;
        position: fixed;
        top: 450px;
        right: 0;
      }
    </style>
  </body>
</html>

3.模态框

HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模态框</title>
    <link rel="stylesheet" href="modal.css" />
  </head>
  <body>
    <!-- 头部 -->
    <header>
      <div class="title">某某内容管理系统</div>
      <button onclick="showModal()">登录</button>
    </header>
    <div class="mail">网站中心内容区</div>
    <!-- 模态框内容区 -->
    <div class="modal">
      <!-- 1.半透明的遮罩 -->
      <div class="modal-bg" onclick="closeModal()"></div>
      <!-- 2.弹层表单 -->
      <form action="" class="modal-form">
        <fieldset style="display: grid; gap: 1em">
          <legend>用户登陆</legend>
          <input type="text" name="username" placeholder="请输入用户名" />
          <input type="password" name="password" placeholder="请输入密码" />
          <button>登录</button>
        </fieldset>
      </form>
    </div>
    <script src="modal.js"></script>
  </body>
</html>

css代码

/* 初始化 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 头部样式 */
header {
  padding: 0.5em 1em;
  background-color: grey;
  display: flex;
}
header .title {
  font-size: x-large;
  font-weight: lighter;
  letter-spacing: 2px;
  text-shadow: 1px 1px 1px;
  display: flex;
}
/* 登陆按钮 */
header button {
  margin-left: auto;
  width: 5em;
  border: none;
  border-radius: 0.5em;
}
header button:hover {
  cursor: pointer;
  background-color: rebeccapurple;
  color: floralwhite;
  /* 盒子加阴影 发光效果 */
  /* box-shadow: 向右，向下，模糊半径，颜色; */
  box-shadow: 0 0 5px #fff;
  /* 过渡效果 */
  transition: 0.5s;
}
/* 模态框 */
.modal .modal-form fieldset {
  height: 15.5em;
  background-color: lightcyan;
  border: none;
  padding: 2em 3em;
  box-shadow: 0 0 5px #888;
}
/* 模态框表单标题 */
.modal .modal-form fieldset legend {
  padding: 7px 1.5em;
  background-color: lightseagreen;
  color: white;
}
.modal .modal-form fieldset input {
  height: 3em;
  padding-left: 1em;
  outline: none;
  border: 1px solid #ddd;
  font-size: 14px;
}
/* :focus: 表单控件,获取焦点时的样式 */
.modal .modal-form fieldset input:focus {
  box-shadow: 0 0 8px #888;
  border: none;
}
.modal .modal-form fieldset button {
  background-color: lightseagreen;
  color: white;
  border: none;
  height: 3em;
  font-size: 16px;
  height: 2.5em;
}
.modal .modal-form fieldset button:hover {
  background-color: coral;
  cursor: pointer;
}
/* 定位 */
.modal .modal-form {
  /* 固定定位 */
  position: fixed;
  top: 12em;
  /* 正中间 */
  left: 38em;
  right: 38em;
}
/* 遮罩 */
.modal .modal-bg {
  position: fixed;
  /* 定位到坐标的四个顶点 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 半透明 */
  background-color: rgba(0, 0, 0, 0.5);
}
/* 隐藏整个模态框 */
.modal {
  display: none;
}
/* 内容区显示 */
.mail {
  height: 500px;
  width: auto;
  top: 30px;
  display: relative;
}

视口、定位和模态框

1.视口知识

2.定位与定位元素

演示效果

代码部分

3.模态框

HTML代码

css代码