html+css仿QQ邮箱静态界面

初学html和css后，制作了自己的第一个静态网页
在制作过程中，遇到了不少问题：
1、右上角及最后一行，鼠标放上去出现下划线效果：

a:link{
        color:#46A3FF;
        text-decoration:none;
}
a:hover{
        text-decoration:underline;
}

利用hover，设置鼠标放上去时下划线效果即可。
2、右上角“基本版|English|手机版|企业邮箱”等置于左侧图中央：

<div class="header">
        <img src="/home/l-jia/图片/Screenshot_2018-12-14 登录QQ邮箱.png"/>
    <span>
        <a href="http://www">基本版</a><span style="color:#D0D0D0">|</span>
        <a href="http://www">English</a><span style="color:#D0D0D0">|</span>
        <a href="http://www">手机版</a><span style="color:#D0D0D0">|</span>
        <a href="http://www">企业邮箱</a>
    </span>
</div>

.header span,img{
        vertical-align:middle;
        display:inline-block;
        float:none;
}

利用vertical-align：middle即可实现。
3、中间主题部分的布局（控制div的位置）：

.wenzi{
        position:fixed;
        left:270px;
        top:190px;
}
.tupian{
        position:fixed;
        left:600px;
        top:300px;
}

利用绝对位置 position:fixed; left: ; top: ;即可实现。
4、登录板块的边框及边框样式：

.input{
        width:350px;
        height:410px;
        border:1px solid #a0b1c4;
        position:fixed;
        left:1000px;
        top:200px;
}

在这一部分，我定义了一个input类，然后对这个类进行属性定义，利用border:1px solid #a0b1c4;来设置边框及其颜色。

.input{
        border-top-left-radius:10px;
        border-top-right-radius:10px;
        border-bottom-left-radius:10px;
        border-bottom-right-radius:10px;
}

利用上述代码，将边框的角设为圆弧。

完成界面如下：