felx布局实现登陆页面

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
页面效果图

  • 实现代码
    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;
}
```

【文章出处:阜宁网站建设公司 http://www.1234xp.com/funing.html 复制请保留原URL】
更多阅读