关于弹窗的制作这里写的时候出现了很多问题,首先就是对齐的问题,以前我也觉的对比不是挺简单的嘛,真的是完全错了,这是简直是一场噩梦,真的被搞的头大,所以这里我会用两种方式来体现所谓 的无奈!废话不多说,直接贴代码。
第一种 的形式:
<!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>
<style>
body{
background-color: gray;
}
.box form{
width: 500px;
height: 300px;
background-color: white;
border: 1px solid #000;
/* 其实在我看来这一类的弹窗制作都可以用固定定位来做,比较方便,容易把握位置 */
position: fixed;
top: 50%;
left: 50%;
margin-top: -151px;
margin-left: -251px;
}
.box h3{
margin: 5px;
background: lightgreen;
height: 40px;
line-height: 40px;
text-indent: 10px;
}
.box .input{
width: 460px;
height: 24px;
margin: 30px auto 0;
text-indent: 100px;
}
.box label{
/* 这里用float 是用来lable对齐的,因为label和input都是行元素 为了省事会用 
可是你会发现 有的时候并不能实现对齐需求,反而会把自己搞的头大*/
/* float: left; */
width: 100px;
height: 28px;
text-align: right;
}
.box .input01{
width: 460px;
height: 24px;
margin: 40px auto 0;
text-indent: 180px;
}
.box input{
height: 30px;
width: 250px;
outline: none;
}
.box .btn1{
width: 80px;
}
</style>
</head>
<body>
<div class="box">
<form action="">
<h3>用户登录</h3>
<div class="input">
<label for="">用户名:</label>
<input type="text">
</div>
<div class="input">
<label for=""> 密码:</label>
<input type="password" name="" id="">
</div>
<div class="input01">
<input type="submit" value="提交" class="btn1">
<input type="reset" name="" id="" value="重置" class="btn1">
</div>
</div>
</form>
</body>
</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>
<style>
body{
background-color: gray;
}
.box form{
width: 500px;
height: 300px;
background-color: white;
border: 1px solid #000;
/* 其实在我看来这一类的弹窗制作都可以用固定定位来做,比较方便,容易把握位置 */
position: fixed;
top: 50%;
left: 50%;
margin-top: -151px;
margin-left: -251px;
}
.box h3{
margin: 5px;
background: lightgreen;
height: 40px;
line-height: 40px;
text-indent: 10px;
}
.box .input{
width: 460px;
height: 24px;
margin: 30px auto 0;
}
.box label{
/* 这里用float 是用来lable对齐的,因为label和input都是行元素 为了省事会用 
可是你会发现 有的时候并不能实现对齐需求,反而会把自己搞的头大*/
float: left;
width: 100px;
height: 28px;
text-align: right;
}
.box .input_text{
width: 240px;
height: 28px;
outline: none;
}
.box .btn1{
width: 100px;
height: 28px;
}
.btn{
/* 之所以在这里用margin-left,因为这两个按钮使用input写的上面已经定义了input的宽度为460px */
margin-left: 100px;
}
</style>
</head>
<body>
<div class="box">
<form action="">
<h3>用户登录</h3>
<div class="input">
<label for="">用户名:</label>
<input type="text" class="input_text">
</div>
<div class="input">
<label for="">密码:</label>
<input type="password" class="input_text">
</div>
<div class="input">
<input type="submit" value="提交" class="btn1 btn">
<input type="reset" name="" id="" value="重置" class="btn1">
</div>
</div>
</form>
</body>
</html>
代码效果图
