html+css仿QQ邮箱静态界面

最新推荐文章于 2022-01-09 22:49:17 发布

听你唱微笑ˊ

最新推荐文章于 2022-01-09 22:49:17 发布

阅读量2.8k

点赞数 2

本文链接：https://blog.csdn.net/qq_43511607/article/details/85037102

版权

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

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

初学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>