简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS学习（浮动与定位的应用、实现登录模态框）
Blogger Information
Blog 40
fans 0
comment 1
visits 34289
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
CSS学习（浮动与定位的应用、实现登录模态框）
景云
Original
530 people have browsed it

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>浮动与定位的应用、实现登录模态框</title>
  7.     <style>
  8.         /* 1.浮动的初心是为了解决元素并排显示的问题
  9.             浮动只限于水平方向
  10.             浮动元素脱离文档流，后面的元素会上移填充它原来的空间
  11.             浮动元素不会影响它前面元素的布局，只会影响后面元素的排列
  12.             任何元素浮动后（包括行内元素）浮动后，都具备了块级元素的特征
  13.             父级元素计算高度的时候，会忽略其内浮动的元素（父级高度的塌陷） */
  14.         *{
  15.             margin: 0;
  16.             padding: 0;
  17.             box-sizing: border-box;
  18.             text-decoration: none;
  19.         }
  20.         h1{
  21.             margin-left: 10%;
  22.         }
  23.         .box{
  24.             width: 80%;
  25.             overflow: hidden;
  26.             padding: 1em;
  27.             position: relative;
  28.             left: 10%;
  29.         }
  30.         .box img{
  31.             width: 30%;
  32.             float: left;
  33.             margin-right: 1em;
  34.             border-radius: 0.5em;
  35.         }
  36.         /* 2.清除浮动元素的影响 */
  37.         /* a.附加元素（不推荐使用） */
  38.         /* .clear{
  39.             clear: both;
  40.         } */
  41.         /* b.伪元素 */
  42.         /* .box::after{
  43.             content: "";
  44.             display: block;
  45.             clear: both;
  46.         } */
  47.         /* 将左右两边设置为独立的元素，右边的元素不受左面元素浮动的影响，反之亦然 */
  48.         .desc{
  49.             overflow: hidden;
  50.             line-height: 3em;
  51.         }
  52.         /* 3.定位属性：position
  53.             a.定位类型：
  54.                 Ⅰ.静态定位static：默认值，也就是文档流定位，元素的显示位置与源码顺序一直；
  55.                 Ⅱ.相对定位relative：相对于该元素在文档流中的原始位置进行偏移；
  56.                 Ⅲ.绝对定位absolute：相对于它的祖先中离它最近的定位元素（含有relative或absolute属性值的元素）的位置发生偏移，而且只有定位元素才有资格充当绝对定位元素的定位祖先元素（定位参考元素），如果祖先中没有定位参考元素，则以根元素做参考（html）；可以使用绝对定位的完全定位空间（被定位元素的四个方向紧贴父级的四个边沿，及方向偏移设置为0）来快速实现水平和垂直居中。
  57.                 Ⅳ.固定定位fixed：是绝对定位的一个特殊案例，它始终相对于html进行定位的；
  59.          */
  60.          .study{
  61.              width: 8em;
  62.              height: 3em;
  63.              border: 1px solid red;
  64.              border-radius: 0.5em;
  65.              color: red;
  66.              text-align: center;
  67.              line-height: 3em;
  68.              /* 绝对定位设置 */
  69.              position: absolute;
  70.              top: 0;right: 3em;bottom: 0;
  71.              margin: auto;
  72.          }
  73.          /* 4.模态框 */
  74.          .down2{
  75.              position: fixed;
  76.              bottom: 1em;right: 1em;
  77.              padding: 0.5em 1em;
  78.              border-radius: 0.5em;
  79.              border: 0;
  80.              background-color: coral;
  81.              color: white;
  82.          }
  83.          .down2:hover{
  84.              background-color: tomato;
  85.              cursor: pointer;
  86.          }
  87.          .modal{
  88.              display: none;
  89.          }
  90.          .modalBackdrop{
  91.              position: absolute;
  92.              top: 0;right: 0;bottom: 0;left: 0;
  93.              background-color: rgb(0, 0, 0,0.5);
  94.          }
  95.          .modalBody{
  96.             width: 15em;
  97.             height: 10em;
  98.             padding: 2em;
  99.             border: 1px solid black;
  100.             background: linear-gradient(to right,lightcyan,#fff);
  101.             text-align: center;
  102.             line-height: 2em;
  103.             border-radius: 0.5em;
  104.             position: fixed;
  105.             top: 0;right: 0;bottom: 0;left: 0;
  106.             margin: auto;
  107.          }
  108.          .modalBody .sub{
  109.              width: 40%;
  110.          }
  111.          .modalBody button{
  112.             position: absolute;
  113.             right: 10px;
  114.             top: 10px;
  115.             padding: 0.2em;
  116.             border-radius: 0.5em;
  117.             border: 0;
  118.             background-color: lightseagreen;
  119.             color: white;
  120.          }
  121.          .modalBody input{
  122.             border-radius: 0.2em;
  123.             padding: 0.2em;
  124.          }
  125.     </style>
  126. </head>
  127. <body>
  128.     <h1>2020-12-22</h1>
  129.     <div class="box">
  130.         <img src="https://img.php.cn/upload/course/000/000/001/5ec659c41669a893.png">
  131.         <div class="desc">
  132.             <h2>作业标题：1221作业</h2>
  133.             <p>作业内容：1. 简述定位的类型与应用场景和使用条件 ; 2. 模仿课堂案例，实现一个模态框</p>
  134.             <p>笔记 0</p>
  135.         </div>
  136.         <a href="#" class="study">继续学习</a>
  137.         <!-- <div class="clear"></div> -->
  138.     </div>
  139.             <button class="down2">个人中心</button>
  140.     <!-- 模态框 -->
  141.     <div class="modal">
  142.         <!-- 蒙版：用来盖住后面内容，使用半透明效果最佳 -->
  143.         <div class="modalBackdrop"></div>
  144.         <!-- 主体 -->
  145.         <div class="modalBody">
  146.             <button class="close">关闭</button>
  147.             <form action="" method="POST">
  148.                 <input type="text" value="" placeholder="帐号">
  149.                 <input type="password" value="" placeholder="密码">
  150.                 <input type="submit" value="登录" class="sub" />
  151.             </form>
  152.         </div>
  153.     </div>
  154.     <!-- 设置点击事件显示/隐藏模态框 -->
  155.     <script>
  156.         const down2=document.querySelector(".down2");//获取登录按钮
  157.         const modal=document.querySelector('.modal');//获取模态框
  158.         const close=document.querySelector('.close');//获取关闭按钮
  160.         // 添加模态框显示/隐藏事件
  161.         down2.addEventListener('click',setModal,false);
  162.         close.addEventListener('click',setModal,false);
  164.         //模态框显示/隐藏回调函数
  165.         function setModal(ev){
  166.             ev.preventDefault();//禁用默认事件（点击按钮会默认提交）
  167.             let status=window.getComputedStyle( modal , null).getPropertyValue('display');//拿到模态框的样式
  168.             modal.style.display= status === 'none' ? 'block' : 'none';//判断模态框的样式，设置相对的值
  169.         }
  170.     </script>
  171. </body>
  172. </html>
Correcting teacher：天蓬老师天蓬老师

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！