一、效果图
二、全部代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>码农魔盒</title><style>.bg{position: fixed;top: 0;left:0;object-fit: cover;width: 100vw;height: 100vh;}.box{width: 950px;height: 450px;box-shadow: 0 5px 15px rgba(0,0,0,.8);display: flex;position: fixed;top: 50%;left:50%;transform: translate(-50%,-50%);box-sizing: border-box;padding: 20px;background: rgba(47,1,74,.8);}.left{width: 65%;}.left>img{display: block;width: 100%;height: 100%;object-fit: cover;}.right{width: 35%;height: 100%;box-sizing: border-box;padding: 0 20px;}h1{color: #fff;text-align: center;margin-top: 45px;}.inputItem{height: 44px;padding: 0;padding-left: 8px;border: none;background: #fff;outline: none;width: 100%;font-size: 16px;margin-top: 20px;}.btn{background: linear-gradient(to right,#65CBF7,#B3A5FC);box-shadow: 0 5px 15px rgba(255, 255, 255, .6);color: #9C3493;font-weight: bold;border: none;border-radius: 30px;height: 46px;width: 100%;font-size: 18px;display: block;margin: auto;margin-top: 50px;}</style></head><body><img src="img/bg.jpg" alt="" class="bg"><div class="box"><div class="left"><img src="img/bg.jpg" alt=""></div><div class="right"><h1>用户登录</h1><input type="text" class="inputItem" placeholder="请输入账号"><input type="password" class="inputItem" placeholder="请输入密码"><button class="btn">登录</button></div></div></body>
</html>
三、代码详解
.bg{position: fixed;top: 0;left:0;object-fit: cover;width: 100vw;height: 100vh;
}
.box{width: 950px;height: 450px;box-shadow: 0 5px 15px rgba(0,0,0,.8);display: flex;position: fixed;top: 50%;left:50%;transform: translate(-50%,-50%);box-sizing: border-box;padding: 20px;background: rgba(47,1,74,.8);
}
-
box-shadow：添加阴影效果，增强立体感
-
display: flex：使用 Flexbox 布局
-
top:50%; left:50%：定位到页面中心
-
transform: translate(-50%,-50%)：向上向左移动自身宽高的 50%，实现精确居中
-
box-sizing: border-box：让内边距包含在元素总宽高内
-
rgba(47,1,74,.8)：半透明深紫色背景
.left{width: 65%;
}
.left>img{display: block;width: 100%;height: 100%;object-fit: cover;
}
.right{width: 35%;height: 100%;box-sizing: border-box;padding: 0 20px;
}
h1{color: #fff;text-align: center;margin-top: 45px;
}
.inputItem{height: 44px;padding: 0;padding-left: 8px;border: none;background: #fff;outline: none;width: 100%;font-size: 16px;margin-top: 20px;
}
.btn{background: linear-gradient(to right,#65CBF7,#B3A5FC);box-shadow: 0 5px 15px rgba(255, 255, 255, .6);color: #9C3493;font-weight: bold;border: none;border-radius: 30px;height: 46px;width: 100%;font-size: 18px;display: block;margin: auto;margin-top: 50px;
}
