本文说明:
经过几次的努力,一个完整的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;
}
}
问题&总结:
- 问题:
对于笔记一里面的问题,会在后续的面试题分析笔记里面进行分析
- 总结:
web开发是一个细心活,尤其前端部分,需要精确到像素上。
在兼容性、美观性、完善性、优化性多方面需要努力。
布局多需要总结,不要嫌繁琐,毕竟,我或者说每个前端人都因为喜欢前端而在努力。加油~~。
更多推荐
QQ邮箱登录PC布局实战笔记四
发布评论