做个响应式登陆页面

首先做出来的效果图如图所示：每次做一个页面，我们首先要搞懂的就是它一共分为几个部分，可以由哪几个盒子来组成，如下图：相关的 html 部分如下所示：<body><div class="big-box"><div class="small-box"><div class="box-1"></div>&

我就不信还能重复

1990人浏览 · 2022-02-22 17:10:14

我就不信还能重复 · 2022-02-22 17:10:14 发布

首先做出来的效果图如图所示：

每次做一个页面，我们首先要搞懂的就是它一共分为几个部分，可以由哪几个盒子来组成，如下图：

相关的 css 样式如下：

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height:100%;
    background-image: url(../images/18.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.big-box{
    width:850px;
    height: 500px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    background: rgba(0,0,0,.5);
}
.small-box{
    width:830px;
    height: 480px;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}
.box-1{
    width: 490px;
    height: 480px;
    background-image: url(../images/14.jpg);
    background-size: cover;
    float: left;
}
.box-2{
    width: 340px;
    height: 480px;
    background:rgba(255,255,255,.8);
    float: left;
}
.box-text1{
    width: 340px;
    height: 60px;
    margin-top: 85px;
    margin-left: 30px;
}
.box-text2{
    width:340px;
    height:420px;
    margin-top: 10px;
}
.box-text{
    display:block;
    width: 340px;
    height: 20px;
    margin-left: 30px;
}
.box-password{
    display:block;
    width: 340px;
    height: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 30px;
}
.box-checkbox{
    display: block;
    width: 340px;
    height: 30px;
    margin-bottom:20px;
}
.box-button{
    display: block;
    width:340px;
    height:40px;
    font-size: 18px;
}
input[type=text]:focus{
    outline: 0px;
}
/* 移除选中时会出现的框*/
input[type=text] {
    font-size: 15px;
    width: 250px; /*文本框的长度，即下划线的长度*/
    border-bottom: 2px solid black; /*下划线*/
    border-top: none; 
    border-left: none;
    border-right: none;
    background-color:rgba(255,255,255,0)
}
input[type=password]:focus{
    outline: 0px;
}
input[type=password] {
    font-size: 15px;
    width: 250px;
    border-bottom: 2px solid black; 
    border-top: none; 
    border-left: none;
    border-right: none;
    background-color:rgba(255,255,255,0)
}
/*input[type=password]::-ms-reveal{
    display:none;
}*/
/*去掉右边的眼睛图标*/
.ma {
    margin: 0px 30px 0px 5px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    opacity: 0;
}
.ma[type=checkbox]+span{
    display: inline-block;
    margin-left: -30px;
    width: 25px;
    height: 25px;
    border: .02rem solid #0D1529;
    background-color: transparent;
    position: absolute;
    cursor: pointer;
}
.ma[type=checkbox]:checked+span::after{
    content:'\2714' ;
    color: black;
    position: absolute;
    font-size: 25px;
    left: 2px;
    bottom: -2px;
}

button{
    outline: 0px;
}
button{
    font-size: 18px;
    width:250px;
    height:35px;
    border-radius: 30px;
    border: none;
    background-color:rgba(41, 113, 139, 0.61);
    -webkit-text-fill-color:white;
    margin-left: 47px;
    margin-top: 40px;
}
/*响应式*/
@media screen and (max-width: 749px){
.big-box{
    width: 510px;
    height:270px ;
}
.small-box{
    width:490px;
    height: 250px;
}
.box-1{
    width: 250px;
    height: 250px;
}
.box-2{
    width: 240px;
    height: 250px;
}
.box-text1{
    margin-top: 25px;
    margin-left: 20px;
}
.box-text2{
    margin-top: -15px;
}
.box-text{
    margin-left: 20px;
}
.box-password{
    margin-left: 20px;
}
input[type=text]{
    width: 180px;
}
input[type=password]{
    width: 180px;
}
.ma{
    margin:0px 25px 0px 5px; ;
    width: 10px;
    height: 10px;
}
.ma[type=checkbox]+span{  /*被遮住小方格的尺寸*/
    width: 15px;
    height: 15px;
    font-size: 10px;
}
.ma[type=checkbox]:checked+span::after{  /*上面小方格的尺寸*/
    width: 15px;
    height: 15px;
    font-size: 15px;
    bottom: 2px;
}
.box-button{
    font-size: 15px;
}
button{
    font-size: 15px;
    width:160px;
    height:25px;
    border-radius: 30px;
    border: none;
    background-color:rgba(41, 113, 139, 0.61);
    -webkit-text-fill-color:white;
    margin-left: 38px;
    margin-top: 10px;
}
}

注释：

background-size: 100% 100%; background-repeat: no-repeat; 可以让背景图片全部铺展；
margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; 可以让该盒子在屏幕的最中央显示（其中的 left、right、top、bottom 值可以不是0，但必须相等）；
background: rgba(0,0,0,.5); 可以给 div 块设置半透明效果，其中第四个数字是半透明度，必须满足：（1≤ 半透明度 ≥0），写 .5 和 0.5 是一个意思；
input[type=text]:focus{ outline: 0px; } 这里用到了伪元素，focus 表明被点击时的伪元素，这句代码可以去除这个表单在被点击时的外边框；
input[type=password]::-ms-reveal{ display:none; } 用于去除 password 右边的眼睛图标；
content:'\2714' ; 这是复选框被选中时对勾的另一个样式；
@media screen and (max-width: 749px){ ... } 这里面再对不同屏幕尺寸的页面设置新的样式，则完成了响应式的制作。