QQ邮箱登录PC布局实战笔记四

编程入门行业动态更新时间:2024-10-26 14:41:18

本文说明:

经过几次的努力，一个完整的QQ邮箱静态页面已经搭建完成，自己的确在一些细节方面并没有很好地和人家百分百一致，但是也是通过自己的方法，得到了功能的实现。老实来讲，HTML和CSS的布局是一件很繁琐的事情，当然这是在你完全不依靠框架的基础上。它很注重细节，不过作为一个熟练的前端，布局还是很需要努力和细心的。

最终效果图:

相关代码:

QQ登录部分实现(二维码快捷登录和微信类似，暂时省去)

html部分

 <div class="bottom_qq" id="qq">
                        <!-- QQ表单的内容区域 -->
                            <div class="qq_bottom">
                                <!-- 首先是一个表单 -->
                                <form action="https://blog.csdn/ljxzuishuai">
                                    <!-- 账号 -->
                                    <label for="username">
                                            <input type="text" id="username" name="username" placeholder=" 支持QQ号/邮箱/手机号登录"><br>
                                    </label>
                                   <!-- 密码 -->
                                   <label for="password">
                                        <input type="password" id="password" name="password" placeholder=" QQ密码"><br>
                                   </label>
                                   <!-- 单选框 -->
                                    <input type="checkbox" name="self_login" id="self_login"><span class="sl">下次自动登录</span> <br>
                                    <!-- 登录按钮 -->
                                    <input type="submit" id="btn" value="登录">
                                    <!-- 扫码登录 -->
                                    <div class="ewm"><img src="./imgs/qewm.png" alt="QQ邮箱二维码登录呢"><span>扫码快捷登录</span></div>
                                </form>
                            </div>
                                <span class="passreset"><a href="#">忘了密码?</a></span>
                    </div>

css部分

/* QQ登录部分开始 */
.bottom_qq{
    height: 289px;
    width: 283px;
    position: absolute;
    top: 37px;
    left: 26px;
    /* background: #416B94; */
}
.qq_bottom{
    width: 100%;
    height: 250px;
    /* background: purple; */
    position: relative;
}
/* 对账号进行设置 */
#username{
    width: 100%;
    height: 37px;
    border: 1px solid #B8C4D3;
    border-radius: 2px;
    -moz-border-radius:2px;
    /* 设置底部外边距10px */
    margin-bottom: 10px;
    font-weight: 0.5;
    font-size: 14px;
    color:#8d8989;
}
/* 对密码进行设置 */
#password{
    width: 100%;
    height: 37px;
    border: 1px solid #B8C4D3;
    border-radius: 2px;
    -moz-border-radius:2px;
    /* 设置底部外边距26px */
    margin-bottom: 26px;
    font-weight: 0.5;
    font-size: 14px;
    color:#8d8989;
}
/* 对单选框进行布局 */
#self_login{
    height: 18px;
    width: 18px;
    border: 1px solid #B8C4D3;
    cursor: pointer;
}
.sl{
    font-weight: 0.5;
    font-size: 12px;
    position: absolute;
    top: 113px;
    left: 21px;
    cursor: pointer;
}
/* 对于登录进行布局 */
#btn{
    width: 100%;
    height: 37px;
    border: 1px solid #B8C4D3;
    border-radius: 2px;
    -moz-border-radius:2px;
    background: #5A98DE;
    color: #ffffff;
    font-size: 18px;
    font-weight: 0.5;
    text-align: center;
    line-height: 37px;
    margin-top: 16px;
}
.ewm>img{
    height: 18px;
    width: 16px;
    position: absolute;
    left: 104px;
    top:204px;
    cursor: pointer;
}
.ewm>span{
    position: absolute;
    left: 122px;
    top:204px;
    font-size: 12px;
    font-family: Verdana;
    color: #225592;
    cursor: pointer;
}
.passreset{
    position: absolute;
    left: 227px;
    top: 260px;
}
.passreset>a{
    font-size: 12px;
    font-family: Verdana;
    color:#416B94;
    text-align: center;
}

JS选项卡

//配置全局入口函数
window.onload=()=>{
    //获取微信和qq标题
    const owxt=document.getElementById('wx_title');
    const oqqt=document.getElementById('qq_title');
    const owx=document.getElementById('wx');
    const oqq=document.getElementById('qq');
    //两个简单操作
    owxt.onclick=()=>{
        flag=true;
        oqqt.style.opacity=0.5;
        oqq.style.display='none';
        owx.style.display='block';
        owxt.style.opacity=1;
    }
    oqqt.onclick=()=>{
        owxt.style.opacity=0.5;
        owx.style.display='none';
        oqq.style.display='block';
        oqqt.style.opacity=1;
    }
}