html、css 实现网页弹出层
最终效果：利用纯粹的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;
background-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通道
三：遮罩层的中间需要装一个弹出层：
html：
<!-- 遮罩层 -->
<div class="modal">
<div class="container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius modi est minus cupiditate tempore voluptatibus aperiam temporibus, quis commodi laboriosam delectus! Sed aspernatur harum adipisci sint eum, provident officiis. Magni!
</div>
</div>
container容器中的文字： lorem 乱数假文，在网页的开发中，很多文本标签中的内容其实是无所谓的，到了后面会被替换成动态页面，但是开发时，还是要写啊，用乱数假文就好了，自动生成内容，长度不一的东东。
css：
.modal .container{
width: 404px;
height: 512px;
background-color: #fff;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
box-sizing: border-box;
border-radius: 6px;
padding: 1em;
}
绝对定位
其他情况和固定定位完全相同
只有包含快不同：找祖先元素中第一个定位元素，该元素的填充盒；若找不到，则它的包含块为整个网页（初始化包含块）
它的父元素是固定定位（即：定位元素），所以它的包含块为父元素的填充盒
定位下的居中 1. 定宽（高） 2. 将左右（上下）距离设置为0 3. 将左右（上下）margin设置为auto
在绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间
每一个html元素，都可以看作一个盒子：
以我给的这个图为例，1536 × 40 ，1536为width，40为height （默认情况下，height、width决定的区域：内容盒，content-box）
但是
box-sizing
- css3中的新属性，改变宽高（height、width）的影响范围
- box-sizing: border-box;宽高影响范围为边框盒
- 比如说：（width = 内容宽 + padding-left + padding-right + border-left + border-right），当width设置好之后，内容宽的值会随border和padding的取值而随之变化
- 注意啊：box-sizing的取值只有content-box和border-box；前两者加paddding-box是background-clip的取值
- 内容盒 content-box = 内容区（默认情况下，height、width决定的区域）
- 填充盒 padding-box = 内容区 + 填充区
- 边框盒 border-box = 内容区 + 填充区 + 边框
圆角由border-radius属性决定
四：在弹出层上加一个关闭：
加入的关闭按钮只是给你看的，点不了（只用HTML、CSS只能实现静态页面）
看起来虽然很丑，但实际上弹出层的静态页面的框架已经搭的差不多了
html：
<!-- 遮罩层 -->
<div class="modal">
<div class="container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius modi est minus cupiditate tempore voluptatibus aperiam temporibus, quis commodi laboriosam delectus! Sed aspernatur harum adipisci sint eum, provident officiis. Magni!
<!-- 关闭 -->
<div class="close">
X
</div>
</div>
</div>
css：
.modal .container .close{
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
right: -10px;
top: -10px;
border: 2px solid #fff;
cursor: pointer;
background-color: #008c8c;
text-align: center;
line-height: 30px;
}
鼠标样式
- cursor: pointer
- 鼠标放置到此区域时，鼠标显示的样式
- cursor常用取值:
- auto 默认值，由浏览器控制鼠标样式
- url(""), autourl中填写.ico或者.cur文件，当文件不可用时，采用auto
- pointer小手
- help帮助
- 还有很多取值
文本水平居中:
text-align: center;
文本垂直居中:
height: 30px;
line-height: 30px;
使line-height和height取相同值
自此，教程基本结束，下面的内容是我在弹出层的框架上进行一些修改，也改了一点点css样式（改了宽高）并且加入了form表单，让弹出层实现登录功能 然后， 为了美化这个登录弹出窗口，我加入了大量css属性（这里不赘诉了），最后还剩下表单元素还没有美化：
五：美化弹出窗口
我在这里就只说明一下，我对form表单的操作：
html：
表单元素其实挺特殊的，首先我们要了解一个伪元素focus
- 元素聚焦时的样式
- 浏览器中，每个元素都有聚焦时样式
比如说Chrome中：
:focus{
outline: -webkit-focus-ring-color auto 5px;
}
第一个参数代表的是一种浏览器提供的颜色 第二个参数是设置外边框样式 第三个参数是设置边框宽度（当第二个参数为auto时，此参数无效）
若我们自己写一个focus样式
:focus{
outline: 1px solid #008c8c;
}
会发现不是我们想要出现的样子，边框向内移动了2px 因为，浏览器还添加了这么个样式：
outline-offset: -2px;
解决办法： 1. 将solid改为auto（outline-offset会无效） 2. 重置outline-offset: 0;
所以在写表单元素时，需要进行表单元素重置：
input,textarea,button,select{
border: none;
}
input:focus,
textarea:focus,
button:focus,
select:focus{
outline: none;
outline-offset: 0;
}
input[type="text"],
input[type="password"],
textarea,
select{
border: 1px solid #999;
box-sizing: border-box;
}
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus{
border: 1px solid #008c8c;
}
button{
border: 2px solid #008c8c;
border-radius: 6px;
}
input[type="text"],
input[type="password"],
textarea{
text-indent: 0.5em;
}
最后对表单元素这块区域利用css进行了微调（不再赘述）
完整代码如下：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 常见充重置样式表 -->
<link rel="stylesheet" href="css/meyer.css">
<!-- 自己写的样式 -->
<link rel="stylesheet" href="css/popup.css">
<!-- 针对表单元素的样式 -->
<link rel="stylesheet" href="css/myform.css">
</head>
<body>
<div class="main">
<img src="./img/ahri.jpg" alt="">
</div>
<!-- 遮罩层 -->
<div class="modal">
<div class="container">
<!-- 登录 -->
<div class="login-top-img">
</div>
<div class="login-bottom clearfix">
<div class="left">
<img src="img/zgh.jpg" alt="">
</div>
<div class="center">
<form name="form1" method="POST" action="" >
<input type="text" class="user">
<input type="password" class="password">
<p class="radio-item">
<label class="remember">
<input type="checkbox" name="remember">
<span>记住密码</span>
</label>
<label class="auto">
<input type="checkbox" name="auto">
<span>自动登录</span>
</label>
</p>
<input type="submit" value="登录" class="submit">
</form>
</div>
<div class="right">
<div class="register">
<a href="">注册账号</a>
</div>
<div class="get-back-password">
<a href="">找回密码</a>
</div>
</div>
</div>
<!-- 关闭 -->
<div class="close">
X
</div>
</div>
</div>
</body>
</html>
css：meyer.css：
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 我自己再加的： */
a{
text-decoration: none;
color: inherit;
}
input,textarea,button,select{
border: none;
}
input:focus,
textarea:focus,
button:focus,
select:focus{
outline: none;
outline-offset: 0;
}
myform.css
input[type="text"],
input[type="password"],
textarea,
select{
border: 1px solid #999;
box-sizing: border-box;
}
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus{
border: 1px solid #008c8c;
}
button{
border: 2px solid #008c8c;
border-radius: 6px;
}
input[type="text"],
input[type="password"],
textarea{
text-indent: 0.5em;
}
popup.css：
/* 解决高度塌陷 */
.clearfix::after{
content: "";
display: block;
clear: both;
}
.main img{
object-fit: cover;
width: 100%;
}
.modal{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.modal .container{
width: 430px;
height: 330px;
background-color: #fff;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
box-sizing: border-box;
}
.modal .container .close{
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
right: 3px;
top: 3px;
border: 2px solid #fff;
cursor: pointer;
background-color: #008c8c;
text-align: center;
line-height: 30px;
}
.modal .container .login-top-img{
width: 100%;
height: 180px;
background-image: url(../img/login-top.jpg);
background-position: 43% 59%;
}
.modal .container .login-bottom{
width: 100%;
height: 150px;
background-color: #fff;
}
.modal .container .login-bottom .left{
float: left;
width: 125px;
height: 100%;
/* background-color: #008c8c; */
}
.modal .container .login-bottom .center{
float: left;
margin: 10px 10px;
width: 195px;
height: 130px;
/* background-color: #ccc; */
}
.modal .container .login-bottom .right{
float: left;
width: 90px;
height: 100%;
/* background-color: #f40; */
}
.modal .container .login-bottom .left img{
width: 84px;
height: 84px;
border-radius: 50%;
object-fit: cover;
position: absolute;
left: 41px;
bottom: 56px;
}
.modal .container .login-bottom .center form .user,
.modal .container .login-bottom .center form .password{
height: 30px;
width: 100%;
}
.modal .container .login-bottom .center form .radio-item{
height: 14px;
width: 100%;
margin: 13px 0;
}
.modal .container .login-bottom .center form .submit{
height: 30px;
width: 100%;
color: #008c8c;
}
.modal .container .login-bottom .right .register,
.modal .container .login-bottom .right .get-back-password{
font-family: 楷体, consolas, sans-serif;
height: 30px;
width: 100%;
text-align: left;
line-height: 30px;
color: #008c8c;
}
.modal .container .login-bottom .right .register{
margin-top: 10px;
}
