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

最新推荐文章于 2022-08-02 15:49:04 发布

「已注销」

最新推荐文章于 2022-08-02 15:49:04 发布

阅读量407

点赞数 1

分类专栏：瞎折腾的一些东西文章标签：实战前端

本文链接：https://blog.csdn.net/ljxzuishuai/article/details/99691470

版权

瞎折腾的一些东西专栏收录该内容

154 篇文章 4 订阅

订阅专栏

本文记录了QQ邮箱登录页面PC版布局的实战过程，包括中间内容区域和底部区域的实现，讨论了圆角处理、兼容性问题及透明度问题的解决方案。已完成项目的大约2/3，剩余选项卡和表单留待后续完成。

摘要由CSDN通过智能技术生成

本次目标:

完成中间内容区域，和底部区域（很简单）,对于表单部分，先把布局写好，对于选项卡的的优化方面，等到下一次再去写。

相关代码:

html部分:

  <!-- 确定网站内容区域 -->
    <div class="content">
        <!-- 中间有一个版心区域 -->
        <div class="wrapper">
            <!-- 版心左边介绍标题介绍区域 -->
            <div class="intro">
                <!-- 这里就是一张图片来进行存放 -->
                <img src="./imgs/qmaillogin.jpg" alt="这是我的风度丫,哦。找不到了呢?">
            </div>
            <!-- 版心右边的表单区域 -->
            <div class="qform">
                <!-- form顶部区域 -->
                <div class="qtop">
                    <!-- 顶部区域又分为左边微信区域 -->
                    <div class="qtop_left">
                        <span>微信登录</span>
                    </div>
                    <!-- 顶部区域又划分为右边QQ登录区域 -->
                    <div class="qtop_right">
                        <span>QQ登录</span>
                    </div>
                </div>
                <div class="qbottom">
                    <!-- 微信底部区域 -->
                    <div class="bottom_wx">
                        <!-- 微信的顶部 -->
                        <div class="wx_top">
                            <!-- 二维码图片 -->
                            <img src="./imgs/wechart.jpg" alt="微信登录了呢吧">
                            <p>请使用微信扫描二维码登录</p>
                        </div>
                        <!-- 微信的底部 -->
                        <div class="wx_bottom">
                            <p>微信和QQ账号的邮箱数据不互通</p>
                        </div>
                    </div>
                    
                </div>
                <!-- form底部区域 -->
            </div>
        </div>
    </div>
    <!-- 确定网站底部信息-->
    <div class="footer">
            <a href="#">关于腾讯</a><span>|</span><a href="#">服务条款</a><span>|</span><a href="#">隐私政策</a><span>|</span><a href="#">客服中心</a><span>|</span>
            <a href="#">联系我们</a><span>|</span><a href="#">帮助中心</a><span>|</span><span class="bq">&copy 1998 - 2019 Tencent Inc. All Rights Reserved.</span>
    </div>

css区域:

/* 中间内容区域进行布局开始 */
.content{
    width: 100%;
    height: 627px;
    /* background: #555; */
    position: relative;

}
/* 版心区域的布局 */
.wrapper{
    width: 930px;
    height: 389px;
    position: absolute;
    top: 72px;
    left: 321px;
    /* background: #416B94; */
}
/* 对版心左边intro区域进行布局 */
.wrapper>.intro{
    height: 100%;
    width: 520px;
    float: left;
    /* background: yellow; */
    position: relative;
}
/* 对于图片进行相关设置 */
.intro>img{
    position: absolute;
    width: 100%;
    height: 239px;
    left: 0;
    top:75px;
}
/* 对于左边区域进行进行设定 */
.qform{
    height: 100%;
    width: 332px;
    float: right;
    /* background: pink; */
    /* 设定边框是圆角 */
    border: 1px solid #B8C4D3;
    border-radius: 9px;
    /* 兼容低版本的浏览器 */
    -moz-border-radius:9px;
}
/* 对于表单的顶部区域进行设置 */
.qform>.qtop{
    height: 53px;
    width: 100%;
    background:#F9FBFE;
    /* border: 1px solid #B8C4D3; */
    border-radius: 9px;
    /* 兼容低版本的浏览器 */
    -moz-border-radius:9px;
    /* 这是一个细节部分，对于顶部有圆角和父元素进行冲突时，可以对子元素的右下角和左下角进行圆角取0 */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom:1px solid #B8C4D3;
}
/* 这是顶部微信区域 */
.qtop>.qtop_left{
    height: 100%;
    width: 164px;
    float: left;
    /* background:#EFF4FA;
    /* border: 1px solid #B8C4D3; */
    /* border-radius: 9px; */
    /* 兼容低版本的浏览器 */
    /* -moz-border-radius:9px; */ 
}
.qtop_left>span{
    font-size: 16px;
    font-family: "Microsoft YaHei";
    color: #333333;
    /* 设置透明度 */
    opacity: 0.5;
    text-align: center;
    line-height: 51px;
    margin-left: 51px;
    cursor: pointer;
}
.qtop>.qtop_right{
    height: 100%;
    width: 164px;
    float: right;
    /* background:#EFF4FA;
    border: 1px solid #B8C4D3;
    border-radius: 9px;
    /* 兼容低版本的浏览器 */
    /* -moz-border-radius:9px;  */
}
/* 这是右端qq名称部分 */
.qtop_right>span{
    font-size: 16px;
    font-family: "Microsoft YaHei";
    color: #333333;
    /* 设置透明度 */
    opacity: 0.5;
    text-align: center;
    line-height: 51px;
    margin-left: 49px;
    cursor: pointer;
}
/* 先设定底部区域 */
.qbottom{
    width: 100%;
    height: 334px;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    position: relative;
    /* background: #EFF4FA; */
}
/* 这是微信部分 */
.bottom_wx{
    height: 305px;
    width: 180px;
    position: absolute;
    top: 31px;
    left:77px;
    /* background: #416B94; */
}
.bottom_wx>wx_top{
    width: 100%;
    height: 262px;
}
.wx_top>img{
    width: 100%;
    height: 180px;
}
/* 这是微信图片说明部分 */
.wx_top>p{
    width: 100%;
    height: 82px;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    text-align: center;
    margin-top: 17px;
    opacity: 0.5;
}
.wx_bottom{
    width: 100%;
    height: 43px;
}
.wx_bottom>p{
    line-height: 0;
    text-align: center;
    font-size: 12px;
    opacity: 0.5;
    margin-left: 2px;
    font-family: "Microsoft YaHei";
}
/* 底部信息区域 */
.footer{
    width: 100%;
    height: 36px;
    background: #EFF4FA;
    line-height: 36px;
    text-align: center;
    /* opacity: 0.5; */
    /* 关于透明度 */
}
.footer>span{
    font-family: Verdana;
    font-size: 12px;
    color: #000000;
    opacity: 0.5;
}
.footer>a{
    font-size: 12px;
    font-family: "Microsoft YaHei, Verdana";
    color:#416B94;
    text-align: center;
}

目前效果图:

在这里插入图片描述

问题&探讨:

关于圆角的问题：
代码片段如下：（这是对于某些边框下边两个角不想变成圆角的处理办法）

	border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom:1px solid #B8C4D3;

兼容性的问题:(解决如下)

 	/* background: pink; */
    /* 设定边框是圆角 */
    border: 1px solid #B8C4D3;
    border-radius: 9px;
    /* 兼容低版本的浏览器 */
   -moz-border-radius:9px;

关于透明度的问题，如果父类设置透明度0.5，子类也会有，但是如果子类不想去变透明度，这时候只要将二者分离出来就行（即变成兄弟节点就OK）.
css代码如下:

.footer>span{
    font-family: Verdana;
    font-size: 12px;
    color: #000000;
    opacity: 0.5;
}
.footer>a{
    font-size: 12px;
    font-family: "Microsoft YaHei, Verdana";
    color:#416B94;
    text-align: center;
}

对应的html代码如下:

<div class="footer">
            <a href="#">关于腾讯</a><span>|</span><a href="#">服务条款</a><span>|</span><a href="#">隐私政策</a><span>|</span><a href="#">客服中心</a><span>|</span>
            <a href="#">联系我们</a><span>|</span><a href="#">帮助中心</a><span>|</span><span class="bq">&copy 1998 - 2019 Tencent Inc. All Rights Reserved.</span>

结语：

这个项目大体上完成了2/3,还有选项卡和QQ表单部分，放到下次再做。加油~~.

「已注销」

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
QQ邮箱登录PC布局实战笔记三

本次目标:完成中间内容区域，和底部区域（很简单）,对于表单部分，先把布局写好，对于选项卡的的优化方面，等到下一次再去写。相关代码:html部分:  <div class="content">  <div class="wrappe...
复制链接

扫一扫