Community Learn Tools Library Leisure
search
English
Home > List of blog posts > felx布局实现登陆页面
Blogger Information
Blog 9
fans 0
comment 0
visits 3931
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
felx布局实现登陆页面
靠近你深拥你
Original
313 people have browsed it

页面效果图

  • 实现代码
    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>登录页</title>
    8.   <link rel="stylesheet" href="felx-login.css" />
    9.   <link
    10.     rel="stylesheet"
    11.     href="//at.alicdn.com/t/c/font_3962778_0fyvy9jjizwi.css"
    12.   />
    13. </head>
    14. <body>
    15.   <header>
    16.     <span>未来科技</span>
    17.     <select name="" id="">
    18.       <option value="1">中文</option>
    19.       <option value="2">English</option>
    20.     </select>
    21.   </header>
    22.   <main>
    23.     <div class="warp">
    24.       <!-- 左边区域 -->
    25.       <div class="left">
    26.         <div class="title">邮箱登陆</div>
    27.         <form action="">
    28.           <input type="text" name="uname" placeholder="请输入邮箱地址/账号" />
    29.           <input type="password" name="pwd" placeholder="请输入密码" />
    30.           <button>登陆</button>
    31.         </form>
    32.         <div class="other-mod">
    33.           <div class="other-tit">
    34.             <span>其他登陆方式</span>
    35.           </div>
    36.           <div class="other-con">
    37.             <div class="other-link">
    38.               <a href=""><i class="iconfont icon-QQ"></i><span>QQ</span></a>
    39.             </div>
    40.             <div class="other-link">
    41.               <a href=""
    42.                 ><i class="iconfont icon-weixin"></i><span>微信</span></a
    43.               >
    44.             </div>
    45.             <div class="other-link">
    46.               <a href=""
    47.                 ><i class="iconfont icon-baidu"></i><span>百度</span></a
    48.               >
    49.             </div>
    50.             <div class="other-link">
    51.               <a href=""
    52.                 ><i class="iconfont icon-baidu"></i><span>微博</span></a
    53.               >
    54.             </div>
    55.             <div class="other-link">
    56.               <a href=""
    57.                 ><i class="iconfont icon-douyin"></i><span>抖音</span></a
    58.               >
    59.             </div>
    60.           </div>
    61.           <div class="other-tool">
    62.             <div class="other-tool-item"><a href="">立即注册</a></div>
    63.             <div class="other-tool-item"><a href="">忘记密码</a></div>
    64.           </div>
    65.         </div>
    66.         <div class="tips">
    67.           <p>登录遇到问题？</p>
    68.           <p>
    69.             原登录方式不可用、密码无法找回、账号管理员变动，前往进行
    70.             <a href="" target="_blank">自助申诉</a>
    71.             <br />
    72.             其他登录异常，请参考
    73.             <a href="" target="_blank">登录异常帮助文档</a>
    74.           </p>
    75.         </div>
    76.       </div>
    77.       <!-- 右边区域 -->
    78.       <div class="right"></div>
    79.     </div>
    80.   </main>
    81.   <footer>
    82.     <p>
    83.       Copyright © 2023 Tencent Cloud. All Rights Reserved. 未来科技&nbsp;
    84.       版权所有
    85.     </p>
    86.   </footer>
    87. </body>
    88. </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：PHPzPHPz

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!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post