|
最后效果：利用纯粹的html、css实现静态网页弹出层，并在弹出层中实现登录功能
利用html、css实现网页弹出层（是静态的），我在弹出层中加入了form表单实现了登录功能
一：先运用一个照片来做为页面：
html：
<div class="main">
<img src="./img/ahri.jpg" alt="">
</div>
css：
.main img{
object-fit: cover;
width: 100%;
}
object-fit通常在视频、照片中运用，暗示其适应方式 它有三个取值： fill默认值，不保持比例，照片所有表示contain保持宽高比例，照片不可溢出cover比例不变，填充满，牺牲掉照片信息二：通常弹出层出此刻网页上时，全部网页做为背景会虚化 必须一个遮罩层：
html：
<!-- 遮罩层 -->
<div class="modal">
</div>
css：
.modal{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
bac公斤round-color: rgba(0, 0, 0, 0.5);
}
固定定位 position: fixed 宽高为auto，适应内容 元素必定是块盒（即display: block） 无外边距合并 包括块：固定为视口（浏览器的可视窗口）一个元素，只要position的取值不是static，认为该元素为定位元素
定位元素会脱离文档流（相对定位position: relative除外） 文档流中的元素摆放时，会忽略掉脱离了文档流的元素文档流中元素计算auto高度时，会忽略脱离了文档流的元素（高度坍塌）
在颜色位置设置alpha通道 每一个颜色都有透明通道，取值0~1（0：完全透明；1：不透明） rgba(red, green, blue, alpha) hex：#rgba设置透明还有另一种： 利用opacity属性，然则它设置的是全部元素的透明度
由于我这里是为了实现弹出层，除了弹出层的网页部分必须虚化，而不是全部网页都虚华；因此我才用的是在颜色位置设置alpha通道
三：遮罩层的中间必须装一个弹出层：
| 
发表于 
