前端：登录界面

效果

代码

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/index.css"><title>Document</title><style></style>
</head><body><div class="out_layer"><div class="inner_layer"><div class="left_info"><image class="" src="img/work.png"></div><div class="right_info"><div class="right_content"><!-- <div class="log_icon">天浩集团</div> --><div class="log">Log In</div><div class="log_title">用户名</div><div class="log_input"><input type="text" placeholder="请输入用户名称"></div><div class="log_title">密码</div><div class="log_input"><input type="text" placeholder="请输入密码"></div><div class="log_btn"><button>登入</button></div><div class="right_reg"><a href="/tianhao/Regist.php" target="_blank">内部员工注册</a><a href="/tianhao/Regist1.php" target="_blank">供应商注册</a><a href="/tianhao/Regist2.php" target="_blank">客户注册</a></div></div></div></div></div>
</body></html>

css/index.css

* {padding: 0px;margin: 0px;
}body {width: 100%;height: 100vh;/* background-color: #4461d2; *//* background-image: url('../img/bg.jpg'); */background-color: #6173ee;background-image: linear-gradient(to top right, #3b56ff, #6173ee);
}.out_layer {width: 100%;height: 100%;display: flex;justify-content: center;position: relative;
}.inner_layer {width: 55%;height: 60%;display: flex;background-color: #fff;position: absolute;top: 50%;transform: translateY(-50%);align-items: center;/* 阴影(水平正右，竖直正下，模糊度，颜色) */box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.5);
}/* 左侧 */
.left_info {width: 50%;height: 98%;overflow: hidden;margin-left: 2%;display: flex;align-items: center;justify-content: center;/* border: 1px solid black; */
}.left_info img {height: 80%;width: 100%;object-fit: contain;/* 保持图片纵横比，使图片适应容器大小而不变形 */
}/* 右侧 */
.right_info {margin-left: 5%;width: 30%;height: 98%;overflow: hidden;display: flex;align-items: center;justify-content: center;/* border: 1px solid black; */
}.right_content {width: 100%;height: 70%;/* border: 1px solid black; */
}.log_icon {position: fixed;top: 0px;right: 0px;padding: 1% 5%;background-color: #4d8de0;/* background-color: #4362e4; */color: #fff;
}.log {font-size: 130%;font-weight: bold;margin: 10% 0 10% 0;
}.log_title {font-size: 80%;font-weight: bold;margin-bottom: 5%;
}.log_input input {margin-bottom: 10%;
}.log_input input {height: 30px;width: 95%;border: none;padding-left: 10px;
}.log_btn {margin-top: 5%;
}.log_btn button {width: 100%;height: 30px;color: #fff;border: none;border-radius: 5px;background-color: #3b56ff;/* background-color: #4362e4; */
}.right_reg {display: flex;justify-content: space-between;width: 94%;text-align: center;margin-top: 3%;font-size: 10%;margin-left: 3%;
}.right_reg a {text-decoration: none;color: #000000;
}.right_reg a:hover {color: #4262e3;
}