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

本次目标:

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

相关代码:

• 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">
                            <