2024年大数据最全HTML+CSS+JS实现仿QQ个人资料卡（思路+源码，2024年最新在字节跳动我是如何当面试官的

于 2024-05-13 17:33:00 发布
阅读量137 收藏 1
点赞数 1
分类专栏： 程序员 文章标签： 大数据 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84164576/article/details/138811964
版权

img
img

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到小新的个人主页</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="index\_1.html">
    <audio src="etc/qfl.mp3" id="audio"></audio>
</head>

<body>
    <div class="container">
        <div class="user-form">
            <div class="bg-user">
                <div class="top"><img src="images/riluo.jpg"></div>
                <div class="circle"><img src="http://q1.qlogo.cn/g?b=qq&nk=2085324623&s=640"></div>
                <p class="user-title">&nbsp&nbsp&nbsp五月</p>
                <p class="user-qq">QQ: 2085324623</p>
                <div class="idcard"><img src="images/svip.png"></div>
                <div class="zan"><img src="images/zan.png"></div>
                <p class="sign-text"><img src="images/person.jpeg">&nbsp;男&nbsp;|&nbsp;金牛座&nbsp;|&nbsp;中国&nbsp;</p>
                <p class="sign-text"><img src="images/sign.jpeg"><a href="https://blog.csdn.net/m0\_68089732">#将温柔寄予信~</a></p>
                <p class="sign-text"><img src="images/qzone.jpeg"><a href="https://mp.qzone.qq.com/u/327893?uin=2085324623&is\_famous\_space=0&brand\_flag=0">&nbsp;Ta的空间</a></p>
                <p class="sign-text"><img src="images/camera.jpeg">&nbsp;精选照片</p>
                <div class="border-img"><img src="images/012.gif"></div>
                <button class="btn-blue" onclick="window.open('tencent://message/?uin=2085324623&Menu=yes')">添加好友</button>
                <button class="btn-music" id="music">音乐设置</button>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/sweetalert.min.js"> </script>
    <script src="js/main.js"></script>
</body>

</html>
CSS：

\*{
    padding: 0px;
    margin:0px;
    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
}
body::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(125deg,#c5e6e8,#ced396,#a1c4fd,#a8edea,#d299c2);
    /\*background: transparent url('../img/bg.jpg') no-repeat fixed;\*/
    /\*filter: blur(8px);\*/
    background-size: cover;
    z-index: -1;
    
}
.container{
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top:50%;

}
.btn-blue{
    display: block;
    width:100%;
    height: 40px;
    margin-top:10px;
    background-color: #a1c4fd;
    border:2px solid #a1c4fd;
    border-color: #a1c4fd;
    border-radius: 5px 5px 5px 5px;
    outline: none;
    color:#fff;
    transition: 0.3s;
    transform: translateZ(0);
}
.btn-blue:hover{
    transform: scale(1.01);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/
.bg-user{
    width: 300px;
    padding: 20px;
    background-color: #fff;
    border-radius: 15px;
    transition: 0.3s;
}
.circle > img{
    border:0px solid #fff;
    height:80px;
    width: 80px;
    border-radius: 50%;
    margin-top: -50px;
}
@keyframes rotation{
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.circle > img:hover{
   animation: rotation 3s linear infinite;
}
.user-title{
    position: relative;
    display: inline;
    float: right;
    margin-top: -65px;
    margin-right: 160px;
    color:#ffffff;
    font-size: 15px;
    font-weight: 500;
}
.user-qq{
    display: inline;    
    float: right;
    margin-top: -30px;
    margin-right: 100px;
    font-size:15px;
    font-weight: 300;
}
.top{
    margin-top: -10px;
    margin-left: -10px;
    margin-right: -10px;
}
.top > img{
    width: 100%;
    height: 200px;
    border:0px solid #fff;
    border-radius: 15px;
}
.idcard{
    float: right;
    margin-top: -30px;
    margin-right: 45px;
}
.idcard > img{
    width: 40px;
    height: 13px;
}
.zan{
    position: relative;
    display: inline;
    float: right;
    margin-top: -75px;
    margin-right: -30px;
    transition: 0.5s;
}
.zan:hover{
    transform: scale(1.05);
    transform:rotate(10deg);
    -ms-transform:rotate(10deg); 	/\* IE 9 \*/
    -moz-transform:rotate(10deg); 	/\* Firefox \*/
    -webkit-transform:rotate(10deg); /\* Safari 和 Chrome \*/
    -o-transform:rotate(10deg); 
}
.zan > img{
    height: 40%;
    width: 50%;
}
.sign-text{
    text-align: left;
    font-size: .85rem;
    margin-top: 10px;
    cursor: default;
}
.sign-text:hover{
    transition: 0.3s;
    color: #007bff;
    transform: scale(1.05);
}
a{
 text-decoration:none;
 color: inherit;
}
.sign-text>img{
width:20px;
height:20px;
vertical-align:middle;
}
.sign-img{
    text-align: left;
    font-size: .85rem;
    margin-top: 10px;
    cursor: default;
}
.sign-img:hover{
    transition: 0.3s;
    color: #007bff;
    transform: scale(1.05);
}
.border-img > img{
    width: 100%;
    margin-top: 10px;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 15px;
    transition: 0.3s;
}
.whj{
  float:right;
}
.border-img > img:hover{
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.btn-music{
    display: block;
    width:100%;
    height: 40px;
    margin-top:10px;
    background-color: #fecfef;
    border:2px solid #fecfef;
    border-color: #fecfef;
    border-radius: 5px 5px 5px 5px;
    outline: none;
    color:#fff;
    transition: 0.3s;
}
.btn-music:hover{
    transform: scale(1.01);
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
背景音乐：

这里突发奇想想添加个，能穿越时空的音乐——带你回到18年的夏天，还附赠了一个视频，转载自b站，所以外加了个JS，最后连接到HTML即可。

JavaScript
function playMusic() {
        var audioEle = document.getElementById("audio");
      if (audioEle.paused){
        audioEle.play();
      }else {
        audioEle.pause();
      }
    }
    
    $("#music").click(function(){
      play();
    });

    var player = document.getElementById("audio");
    play();
    function play(){
    swal("点击开启音乐-起风了\n可以边浏览边听哦~", {
            buttons: {
                cancel: "开启",
                allow: "关闭"
            }
        }).then(function(value) {
            if (value == "allow") {
                player.pause()
            } else {
                player.play();
            }
        });
    }

最终效果：

在这里插入图片描述

知识点补充：

window.open(‘tencent://message/?uin=2085324623&Menu=yes’)"

 添加自己的QQ号，点击对应按钮，即可打开QQ，跳转添加好友页面


![img](https://img-blog.csdnimg.cn/img_convert/2f8f73bc445f011c78da257cb63a4e1d.png)
![img](https://img-blog.csdnimg.cn/img_convert/ebe388d6e182e427991721c882e09c79.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

图片转存中...(img-WAJ38cLO-1715592757718)]
[外链图片转存中...(img-HG8oINty-1715592757718)]

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**
2401_84164576
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值