页面效果图
实现代码
<!DOCTYPE html><html lang="zh-CN"><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" /><title>登录页</title><link rel="stylesheet" href="felx-login.css" /><linkrel="stylesheet"href="//at.alicdn.com/t/c/font_3962778_0fyvy9jjizwi.css"/></head><body><header><span>未来科技</span><select name="" id=""><option value="1">中文</option><option value="2">English</option></select></header><main><div class="warp"><!-- 左边区域 --><div class="left"><div class="title">邮箱登陆</div><form action=""><input type="text" name="uname" placeholder="请输入邮箱地址/账号" /><input type="password" name="pwd" placeholder="请输入密码" /><button>登陆</button></form><div class="other-mod"><div class="other-tit"><span>其他登陆方式</span></div><div class="other-con"><div class="other-link"><a href=""><i class="iconfont icon-QQ"></i><span>QQ</span></a></div><div class="other-link"><a href=""><i class="iconfont icon-weixin"></i><span>微信</span></a></div><div class="other-link"><a href=""><i class="iconfont icon-baidu"></i><span>百度</span></a></div><div class="other-link"><a href=""><i class="iconfont icon-baidu"></i><span>微博</span></a></div><div class="other-link"><a href=""><i class="iconfont icon-douyin"></i><span>抖音</span></a></div></div><div class="other-tool"><div class="other-tool-item"><a href="">立即注册</a></div><div class="other-tool-item"><a href="">忘记密码</a></div></div></div><div class="tips"><p>登录遇到问题？</p><p>原登录方式不可用、密码无法找回、账号管理员变动，前往进行<a href="" target="_blank">自助申诉</a><br />其他登录异常，请参考<a href="" target="_blank">登录异常帮助文档</a></p></div></div><!-- 右边区域 --><div class="right"></div></div></main><footer><p>Copyright © 2023 Tencent Cloud. All Rights Reserved. 未来科技 版权所有</p></footer></body></html>
CSS样式代码
```css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: black;
}
header,
main {
display: flex;
}
header {
height: 60px;
background-color: #2b303b;
padding: 0 20px;
width: 100%;
place-content: space-between;
place-items: center;
}
header > span {
line-height: 60px;
font-weight: bold;
font-size: 24px;
color: white;
}
header > select {
background-color: #2b303b;
border: solid 1px #666;
outline: none;
color: white;
height: 34px;
width: 200px;
}
@media (max-width: 768px) {
warp .right {
display: none;
}
}
main > .warp {
display: flex;
flex: 1;
padding: 60px 20px 90px;
place-items: center;
place-content: center;
}
main > .warp > .left,
main > .warp > .right {
display: flex;
height: calc(100vh - 120px);
width: 490px;
height: 570px;
/ flex: 1; /
flex-direction: column;
}
main > .warp > .left {
padding-right: 90px;
}
main > .warp > .right {
background-image: url(./img/aside.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}
main > .warp > .left > .title {
font-size: 30px;
line-height: 40px;
margin-bottom: 25px;
}
form {
display: flex;
flex-direction: column;
}
form > input {
border: solid 1px #ddd;
padding: 7px 10px;
height: 45px;
line-height: 28px;
margin-bottom: 15px;
}
input:focus,
input:hover {
outline: coral 1px solid;
border: none;
}
form > button {
background-color: coral;
color: white;
border: none;
height: 45px;
}
button:hover {
cursor: pointer;
opacity: 0.8;
transition: 0.3s;
}
.other-mod a {
color: black;
text-decoration: none;
}
.other-tit {
margin-top: 40px;
position: relative;
text-align: center;
color: #999;
}
.other-tit > span {
display: inline-block;
z-index: 2;
position: relative;
padding: 0 4px;
line-height: 14px;
background-color: white;
}
.other-tit::after {
content: “”;
position: absolute;
width: 100%;
height: 0;
border-bottom: 1px dashed #ddd;
overflow: hidden;
left: 0;
top: 10px;
z-index: 0;
}
.other-mod {
font-size: 14px;
}
.other-mod .iconfont {
color: #7c848e;
margin-right: 5px;
}
.other-con {
display: flex;
margin-top: 22px;
text-align: center;
}
.other-con > .other-link {
flex: auto;
}
.other-tool {
display: flex;
place-content: space-between;
margin-top: 20px;
padding-top: 20px;
border-top: 1px dashed #ddd;
}
.other-tool-item {
flex: 1;
text-align: center;
}
.other-tool-item ~ * {
border-left: 1px solid #e5e5e5;
}
.other-mod a:hover,
.other-mod .iconfont:hover {
color: coral;
}
.tips {
padding-top: 20px;
margin-top: 20px;
border-top: 1px dashed #ddd;
}
.tips > p:nth-child(1) {
color: #555;
font-size: 14px;
padding-bottom: 10px;
}
.tips > p:nth-child(2) {
font-size: 12px;
color: #999;
line-height: 22px;
}
.tips a {
color: coral;
}
footer {
height: 60px;
line-height: 60px;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #f7f8fa;
border-top: 1px solid #dedfe1;
font-size: 14px;
}
footer > p {
color: #999;
}
```