亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 9
粉絲 0
評論 0
訪問量 5990
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
felx布局實現(xiàn)登陸頁面
靠近你深擁你
原創(chuàng)
523人瀏覽過

頁面效果圖

  • 實現(xiàn)代碼
    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="http://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.       <!-- 左邊區(qū)域 -->
    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.       <!-- 右邊區(qū)域 -->
    78.       <div class="right"></div>
    79.     </div>
    80.   </main>
    81.   <footer>
    82.     <p>
    83.       Copyright ? 2023 Tencent Cloud. All Rights Reserved. 未來科技&nbsp;
    84.       版權(quán)所有
    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;
}
```

批改老師：PHPzPHPz

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓，幫助PHP學習者快速成長！
關(guān)注服務號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學習！
    全站2000+教程免費學