html+css仿QQ邮箱静态界面

最新推荐文章于 2022-08-10 18:43:48 发布

听你唱微笑ˊ

最新推荐文章于 2022-08-10 18:43:48 发布

阅读量3.4k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43511607/article/details/85037102

初学者通过HTML和CSS实现了QQ邮箱的静态界面，遇到并解决了布局、鼠标悬停效果和边框样式等问题。利用CSS的hover、vertical-align、position属性以及border和border-radius实现界面效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初学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的位置）：</

最低0.47元/天解锁文章

200万优质内容无限畅学