页面效果图
实现代码
<!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" />
<link
rel="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;
}
```
Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!