felx布局实现登陆页面 - 我的前端笔记

首页 > 博客列表 > felx布局实现登陆页面

博主信息

博文 9

粉丝 0

访问量 6189

专题推荐

更多>

页面效果图

实现代码

<!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. 未来科技&nbsp;
      版权所有
    </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;
}
```

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

chrome安装以及插件的安装

2023-03-09 23:05:37

页面效果图

实现代码

CSS样式代码