<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浮动与定位的应用、实现登录模态框</title> <style> /* 1.浮动的初心是为了解决元素并排显示的问题 浮动只限于水平方向 浮动元素脱离文档流，后面的元素会上移填充它原来的空间 浮动元素不会影响它前面元素的布局，只会影响后面元素的排列 任何元素浮动后（包括行内元素）浮动后，都具备了块级元素的特征 父级元素计算高度的时候，会忽略其内浮动的元素（父级高度的塌陷） */ *{ margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; } h1{ margin-left: 10%; } .box{ width: 80%; overflow: hidden; padding: 1em; position: relative; left: 10%; } .box img{ width: 30%; float: left; margin-right: 1em; border-radius: 0.5em; } /* 2.清除浮动元素的影响 */ /* a.附加元素（不推荐使用） */ /* .clear{ clear: both; } */ /* b.伪元素 */ /* .box::after{ content: ""; display: block; clear: both; } */ /* 将左右两边设置为独立的元素，右边的元素不受左面元素浮动的影响，反之亦然 */ .desc{ overflow: hidden; line-height: 3em; } /* 3.定位属性：position a.定位类型： Ⅰ.静态定位static：默认值，也就是文档流定位，元素的显示位置与源码顺序一直； Ⅱ.相对定位relative：相对于该元素在文档流中的原始位置进行偏移； Ⅲ.绝对定位absolute：相对于它的祖先中离它最近的定位元素（含有relative或absolute属性值的元素）的位置发生偏移，而且只有定位元素才有资格充当绝对定位元素的定位祖先元素（定位参考元素），如果祖先中没有定位参考元素，则以根元素做参考（html）；可以使用绝对定位的完全定位空间（被定位元素的四个方向紧贴父级的四个边沿，及方向偏移设置为0）来快速实现水平和垂直居中。 Ⅳ.固定定位fixed：是绝对定位的一个特殊案例，它始终相对于html进行定位的； */ .study{ width: 8em; height: 3em; border: 1px solid red; border-radius: 0.5em; color: red; text-align: center; line-height: 3em; /* 绝对定位设置 */ position: absolute; top: 0;right: 3em;bottom: 0; margin: auto; } /* 4.模态框 */ .down2{ position: fixed; bottom: 1em;right: 1em; padding: 0.5em 1em; border-radius: 0.5em; border: 0; background-color: coral; color: white; } .down2:hover{ background-color: tomato; cursor: pointer; } .modal{ display: none; } .modalBackdrop{ position: absolute; top: 0;right: 0;bottom: 0;left: 0; background-color: rgb(0, 0, 0,0.5); } .modalBody{ width: 15em; height: 10em; padding: 2em; border: 1px solid black; background: linear-gradient(to right,lightcyan,#fff); text-align: center; line-height: 2em; border-radius: 0.5em; position: fixed; top: 0;right: 0;bottom: 0;left: 0; margin: auto; } .modalBody .sub{ width: 40%; } .modalBody button{ position: absolute; right: 10px; top: 10px; padding: 0.2em; border-radius: 0.5em; border: 0; background-color: lightseagreen; color: white; } .modalBody input{ border-radius: 0.2em; padding: 0.2em; } </style></head><body> <h1>2020-12-22</h1> <div class="box"> <img src="https://img.php.cn/upload/course/000/000/001/5ec659c41669a893.png"> <div class="desc"> <h2>作业标题：1221作业</h2> <p>作业内容：1. 简述定位的类型与应用场景和使用条件 ; 2. 模仿课堂案例，实现一个模态框</p> <p>笔记 0</p> </div> <a href="#" class="study">继续学习</a> <!-- <div class="clear"></div> --> </div> <button class="down2">个人中心</button> <!-- 模态框 --> <div class="modal"> <!-- 蒙版：用来盖住后面内容，使用半透明效果最佳 --> <div class="modalBackdrop"></div> <!-- 主体 --> <div class="modalBody"> <button class="close">关闭</button> <form action="" method="POST"> <input type="text" value="" placeholder="帐号"> <input type="password" value="" placeholder="密码"> <input type="submit" value="登录" class="sub" /> </form> </div> </div> <!-- 设置点击事件显示/隐藏模态框 --> <script> const down2=document.querySelector(".down2");//获取登录按钮 const modal=document.querySelector('.modal');//获取模态框 const close=document.querySelector('.close');//获取关闭按钮 // 添加模态框显示/隐藏事件 down2.addEventListener('click',setModal,false); close.addEventListener('click',setModal,false); //模态框显示/隐藏回调函数 function setModal(ev){ ev.preventDefault();//禁用默认事件（点击按钮会默认提交） let status=window.getComputedStyle( modal , null).getPropertyValue('display');//拿到模态框的样式 modal.style.display= status === 'none' ? 'block' : 'none';//判断模态框的样式，设置相对的值 } </script></body></html>
