设为首页收藏本站
QQ交流群：1025805328
  • 首页Portal
  • K网论坛BBS
  • 资源软件
  • K网圈子Group
  • 我的关注
  • 打赏赞助
    • 立即注册
    小K网-QQ活动_资源分享-源码基地-项目分享-安卓绿色软件基地»K网论坛 › 互联网相关 › 网页代码装饰 › 「怀旧向」HTML像素级复刻QQ2006经典界面
    返回列表 发布新帖

    「怀旧向」HTML像素级复刻QQ2006经典界面

    566 0
    小K网牛逼 发表于 3 小时前 | 查看全部 阅读模式 <

    马上注册，结交更多好友，享用更多功能，让你轻松玩转小K网。

    您需要 登录 才可以下载或查看，没有账号？立即注册 微信登录

    ×
    这是一个使用 HTML + CSS + JavaScript 实现的 QQ2006 像素级复刻项目，重现了80/90后网友的青春记忆——那个伴随我们成长的经典QQ界面！
    从登录框的珊瑚蓝渐变，到主面板的好友头像，再到聊天窗口的功能图标，所有素材全部从原版QQ2006安装包提取，力求还原最原始的体验。

    「怀旧向」HTML像素级复刻QQ2006经典界面

    「怀旧向」HTML像素级复刻QQ2006经典界面
    🎯 为什么做这个？
    20年前的 QQ2006，是很多80/90后的数字故乡。那时我们还说着“GG/MM”，攒钱买Q秀，为太阳等级熬夜挂机……这个项目不只是UI复刻，更是一次怀旧疗愈。
    本项目代码全是业余时间手搓，没有用到 AI，断断续续做了两周。
    🌟 未来计划
    • 增加更多交互逻辑，实现基础聊天功能模拟
    • 复刻更多子功能界面，如菜单面板、视频聊天界面等
    ⚠️ 注意事项
    • 仅供学习交流，请勿用于商业用途
    • 尊重版权，所有素材均来自原版 QQ2006 安装包，版权归腾讯公司所有
    🤝 贡献指南
    如果你对这个项目感兴趣，想一起打造更完整的 QQ2006 复刻版，欢迎提交 PR 或 Issue。让我们一起为这段数字记忆添砖加瓦！
    📜 开源许可
    你可以自由地分享和修改代码，但请保留出处。
    让我们一同重温那段青涩时光，用代码致敬经典！
    1. <!DOCTYPE html>

    2. <html xmlns="http://www.w3.org/1999/xhtml">

    3. <head>

    4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    5. <title>QQ2006</title>

    6. <meta name="author" content="mengkun">

    7. <link rel="shortcut icon" href="img/qq.png" type="image/x-icon">

    8. <style>

    9. * {

    10.     margin: 0;

    11.     padding: 0;

    12.     font-family: '宋体';

    13.     box-sizing: border-box;

    14. }

    15.  

    16. html, body {

    17.     width: 100%;

    18.     height: 100%;

    19.     overflow: hidden;

    20. }

    21. body {

    22.     font-size: 12px;

    23.     font-family: '宋体';

    24.     background: url('img/bg.jpeg') center center / cover no-repeat fixed;

    25. }

    26.  

    27. button {

    28.     outline: none;

    29.     border: none;

    30.     background: transparent;

    31.     background-repeat: no-repeat;

    32.     cursor: pointer;

    33. }

    34.  

    35. input {

    36.     font-family: 宋体;

    37.     font-size: 12px;

    38.     outline: none;

    39. }

    40.  

    41. img {

    42.     -webkit-user-drag: none;

    43. }

    44.  

    45. .drag-parent {

    46.     position: fixed;

    47. }

    48.  

    49. /*windows xp UI*/

    50. .app__header__buttons{opacity:1;height:22px;display:flex;gap:1px;-webkit-box-align:center;align-items:center;margin-top:-1px;margin-right:1px;}

    51. .app__header__buttons .header__button{margin-right:1px;position:relative;width:22px;height:22px;border:1px solid rgb(255, 255, 255);border-radius:3px;}

    52. .app__header__buttons .header__button:hover{filter:brightness(120%);}

    53. .app__header__buttons .header__button:hover:active{filter:brightness(90%);}

    54. .app__header__buttons .header__button--minimize{box-shadow:rgb(70, 70, 255) 0px -1px 2px 1px inset;background-image:radial-gradient(circle at 90% 90%, rgb(0, 84, 233) 0%, rgb(34, 99, 213) 55%, rgb(68, 121, 228) 70%, rgb(163, 187, 236) 90%, white 100%);}

    55. .app__header__buttons .header__button--minimize::before{content:"";position:absolute;left:4px;top:13px;height:3px;width:8px;background-color:white;}

    56. .app__header__buttons .header__button--maximize{box-shadow:rgb(70, 70, 255) 0px -1px 2px 1px inset;background-image:radial-gradient(circle at 90% 90%, rgb(0, 84, 233) 0%, rgb(34, 99, 213) 55%, rgb(68, 121, 228) 70%, rgb(163, 187, 236) 90%, white 100%);}

    57. .app__header__buttons .header__button--maximize::before{content:"";position:absolute;display:block;left:4px;top:4px;box-shadow:white 0px 3px inset, white 0px 0px 0px 1px inset;height:12px;width:12px;}

    58. .app__header__buttons .header__button--close{box-shadow:rgb(218, 70, 0) 0px -1px 2px 1px inset;background-image:radial-gradient(circle at 90% 90%, rgb(204, 70, 0) 0%, rgb(220, 101, 39) 55%, rgb(205, 117, 70) 70%, rgb(255, 204, 178) 90%, white 100%);}

    59. .app__header__buttons .header__button--close::before{content:"";position:absolute;left:9px;top:2px;transform:rotate(45deg);height:16px;width:2px;background-color:white;}

    60. .app__header__buttons .header__button--close::after{content:"";position:absolute;left:9px;top:2px;transform:rotate(-45deg);height:16px;width:2px;background-color:white;}

    61. .app__header__buttons .header__button--disable{outline:none;opacity:0.5;}

    62. .app__header__buttons .header__button--disable:hover{filter:brightness(100%);}

    63.  

    64. .xp_form{display:flex;position:absolute;padding:3px;background-color:rgb(8, 49, 217);flex-direction:column;border-top-left-radius:8px;border-top-right-radius:8px;}

    65. .xp_form .header__bg{background:linear-gradient(rgb(0, 88, 238) 0%, rgb(53, 147, 255) 4%, rgb(40, 142, 255) 6%, rgb(18, 125, 255) 8%, rgb(3, 111, 252) 10%, rgb(2, 98, 238) 14%, rgb(0, 87, 229) 20%, rgb(0, 84, 227) 24%, rgb(0, 85, 235) 56%, rgb(0, 91, 245) 66%, rgb(2, 106, 254) 76%, rgb(0, 98, 239) 86%, rgb(0, 82, 214) 92%, rgb(0, 64, 171) 94%, rgb(0, 48, 146) 100%);position:absolute;left:0px;top:0px;right:0px;height:28px;pointer-events:none;border-top-left-radius:8px;border-top-right-radius:8px;overflow:hidden;}

    66. .xp_form .header__bg::before{content:"";display:block;position:absolute;left:0px;opacity:1;background:linear-gradient(to right, rgb(22, 56, 230) 0%, transparent 100%);top:0px;bottom:0px;width:15px;}

    67. .xp_form .header__bg::after{content:"";opacity:1;display:block;position:absolute;right:0px;background:linear-gradient(to left, rgb(22, 56, 230) 0%, transparent 100%);top:0px;bottom:0px;width:15px;}

    68. .xp_form .app__header{user-select:none;display:flex;height:25px;line-height:25px;font-weight:700;font-size:12px;font-family:"宋体";text-shadow:#2f2f2f 1px 1px;color:white;position:absolute;left:3px;right:3px;-webkit-box-align:center;align-items:center;}

    69. .xp_form .app__header__icon{width:15px;height:15px;margin-left:1px;margin-right:3px;}

    70. .xp_form .app__header__title{flex:1 1 0%;pointer-events:none;padding-right:5px;letter-spacing:0.5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

    71. .xp_form .app__content{flex:1 1 0%;position:relative;margin-top:25px;height:calc(100% - 25px);}

    72.  

    73.  

    74. .qq-repeat-x {

    75.     repeat: repeat-x;

    76. }

    77. .qq-no-repeat {

    78.     repeat: no-repeat;

    79. }

    80. .qq-flex-bg {

    81.     position: absolute;

    82.     width: 100%;

    83.     height: 100%;

    84.     display: flex;

    85. }

    86. .qq-single-line {

    87.     white-space: nowrap;

    88.     overflow: hidden;

    89. }

    90.  

    91. .qq-btn {

    92.     font-size: 12px;

    93.     background: linear-gradient(to bottom, #ffffff, #9FD4FF);

    94.     border: 1px solid #00558E;

    95.     border-radius: 3px;

    96.     cursor: pointer;

    97. }

    98. .qq-btn:hover {

    99.     background: linear-gradient(to bottom, #ffffff, #B9E1FF);

    100. }

    101.  

    102. .qq-btn:active {

    103.     background: linear-gradient(to bottom, #97C5EC, #D2F8FD);

    104. }

    105.  

    106. .qq-panel {

    107.     width: 160px;

    108.     height: auto;

    109.     font-size: 12px;

    110.     font-family: 宋体;

    111.     position: relative;

    112.     border-radius: 8px;

    113.     overflow: hidden;

    114.     user-select: none;

    115.      

    116.     width: 190px;

    117.     height: 580px;

    118.     display: flex;

    119.     flex-direction: column;

    120. }

    121.  

    122. .qq-title {

    123.     width: 100%;

    124.     height: 24px;

    125.     display: flex;

    126.     position: relative;

    127. }

    128. .qq-title-left {

    129.     background-image: url('img/BackgroundTitleLeft.png');

    130.     background-repeat: no-repeat;

    131.     width: 64px;

    132. }

    133. .qq-title-center {

    134.     flex: 1;

    135.     background-image: url('img/BackgroundTitleCenter.png');

    136. }

    137. .qq-title-right {

    138.     background-image: url('img/BackgroundTitleRight.png');

    139.     background-repeat: no-repeat;

    140.     width: 14px;

    141. }

    142. .qq-title-btns {

    143.     display: flex;

    144.     gap: 1px;

    145.     position: absolute;

    146.     right: 5px;

    147.     top: 5px;

    148. }

    149. .qq-title-btns > button {

    150.     width: 16px;

    151.     height: 16px;

    152. }

    153. #qq-min {

    154.     background-image: url('img/MinButton_Normal.png');

    155. }

    156. #qq-min:hover {

    157.     background-image: url('img/MinButton_Hover.png');

    158. }

    159. #qq-min:active {

    160.     background-image: url('img/MinButton_Down.png');

    161. }

    162. #qq-color {

    163.     background-image: url('img/ColorButton_Normal.png');

    164. }

    165. #qq-color:hover {

    166.     background-image: url('img/ColorButton_Hover.png');

    167. }

    168. #qq-color:active {

    169.     background-image: url('img/ColorButton_Down.png');

    170. }

    171. #qq-close {

    172.     background-image: url('img/CloseButton_Normal.png');

    173. }

    174. #qq-close:hover {

    175.     background-image: url('img/CloseButton_Hover.png');

    176. }

    177. #qq-close:active {

    178.     background-image: url('img/CloseButton_Down.png');

    179. }

    180. .qq-head {

    181.     width: 100%;

    182.     height: 44px;

    183.     position: relative;

    184.     overflow: hidden;

    185. }

    186.  

    187. .qq-head-left {

    188.     background-image: url('img/BackgroundTitleLeft2.png');

    189.     width: 64px;

    190. }

    191. .qq-head-center {

    192.     background-image: url('img/BackgroundTitleCenter2.png');

    193.     flex: 1;

    194. }

    195. .qq-head-right {

    196.     background-image: url('img/BackgroundTitleRight2.png');

    197.     width: 14px;

    198. }

    199.  

    200. #qq-status-pic {

    201.     position: absolute;

    202.     width: 32px;

    203.     height: 32px;

    204.     left: 8px;

    205.     top: 6px;

    206.     cursor: pointer;

    207.     background-image: url('img/avatar/50.png');

    208.     background-size: cover;

    209. }

    210.  

    211. #qq-status-btn {

    212.     position: absolute;

    213.     width: 11px;

    214.     height: 36px;

    215.     left: 41px;

    216.     top: 4px;

    217.     background-image: url('img/StatusButton_Normal.png');

    218. }

    219. #qq-status-btn:hover {

    220.     background-image: url('img/StatusButton_Hover.png');

    221. }

    222. #qq-status-btn:active {

    223.     background-image: url('img/StatusButton_Down.png');

    224. }

    225.  

    226. #qq-num {

    227.     position: absolute;

    228.     left: 54px; 

    229.     top: 9px; 

    230.     width: 109px; 

    231.     height: 13px;

    232.     font-family: "MS Sans Serif"; 

    233.     font-size: 8pt; 

    234.     font-weight: 700;

    235.     color: #071E81;

    236. }

    237. #qq-num:hover {

    238.     color: #000000;

    239. }

    240.  

    241. .qq-head-btns {

    242.     position: absolute;

    243.     left: 54px;

    244.     top: 24px;

    245.     display: flex;

    246.     gap: 6px;

    247. }

    248. .qq-head-btns button {

    249.     height: 16px;

    250. }

    251. .qq-head-btns button > img {

    252.     vertical-align: middle;

    253. }

    254. .qq-head-btns button > label {

    255.     color: #071E81;

    256.     font-family: "MS Sans Serif";

    257.     font-size: 8pt;

    258.     font-weight: 400;

    259.     cursor: pointer;

    260.     height: 16px;

    261.     padding-left: 2px;

    262. }

    263. .qq-head-btns button:hover > label {

    264.     color: #FFFFFF;

    265. }

    266.  

    267. .qq-body {

    268.     flex: 1;

    269.     position: relative;

    270. }

    271. .qq-body-left {

    272.     background-image: url('img/BackgroundL.png');

    273.     width: 11px;

    274. }

    275. .qq-body-center {

    276.     background-image: url('img/BackgroundC.png');

    277.     flex: 1;

    278. }

    279. .qq-body-right {

    280.     background-image: url('img/BackgroundR.png');

    281.     width: 8px;

    282. }

    283.  

    284. .qq-panel-bar {

    285.     position: absolute;

    286.     left: 3px;

    287.     top: 4px; 

    288.     width: 29px;

    289.     height: 100%;

    290.     display: flex;

    291.     flex-direction: column;

    292. }

    293.  

    294. .qq-panel-bar button {

    295.     background: url('img/panel-bar/barback2_normal.png');

    296.     height: 37px; 

    297.     width: 27px;

    298.     margin-top: -4px;

    299. }

    300. .qq-panel-bar button:hover {

    301.     background: url('img/panel-bar/barback2_over.png');

    302. }

    303.  

    304. .qq-panel-bar button > img {

    305.     vertical-align: super;

    306.     width: 22px;

    307.     height: 22px;

    308. }

    309.  

    310. .qq-panel-bar button.active {

    311.     background: url('img/panel-bar/barback_disabled.png');

    312.     z-index: 1;

    313. }

    314.  

    315. /* 好友列表 */

    316. .qq-friend-box {

    317.     position: absolute;

    318.     left: 29px;

    319.     right: 4px;

    320.     height: 100%;

    321.     background: #fff;

    322.     border: 1px solid #2367c3;

    323.     border-radius: 2px;

    324.     overflow: hidden;

    325.     padding: 1px;

    326.     display: flex;

    327.     gap: 1px;

    328.     flex-direction: column;

    329. }

    330.  

    331. .qq-friend-box > button {

    332.     text-align: center;

    333.     font-size: 12px;

    334.     width: 100%;

    335.     color: #183c94;

    336.     padding: 1px 0;

    337. }

    338. .qq-friend-list {

    339.     flex: 1;

    340.     overflow-y: auto;

    341. }

    342.  

    343. .qq-friend-group {

    344.     background-image: url('img/group_close.png');

    345.     background-repeat: no-repeat;

    346.     background-position: 2px 4px;

    347.     padding: 5px 0 5px 20px;

    348.     color: #101c4a;

    349.     cursor: pointer;

    350.     overflow: hidden;

    351.     white-space: nowrap;

    352. }

    353. .qq-friend-group.on {

    354.     background-image: url('img/group_open.png');

    355. }

    356.  

    357. .qq-friend-item {

    358.     display: flex;

    359.     padding: 4px 0 4px 4px;

    360.     cursor: pointer;

    361. }

    362. .qq-friend-avatar {

    363.     width: 40px;

    364.     height: 40px;

    365. }

    366. .qq-friend-info {

    367.     padding: 0 0 0 5px;

    368.     overflow: hidden;

    369.     white-space: nowrap;

    370. }

    371. .qq-friend-name {

    372.     color: #000400;

    373. }

    374. .qq-friend-item.qq-vip .qq-friend-name {

    375.     color: #f00;

    376. }

    377. .qq-friend-item.qq-vip .qq-friend-motto {

    378.     color: #ff7d7b;

    379. }

    380. .qq-friend-item.qq-offline {

    381.     filter: grayscale(100%);

    382. }

    383. .qq-friend-item.qq-offline .qq-friend-name,

    384. .qq-friend-item.qq-offline .qq-friend-motto {

    385.     color: #a8a8a8;

    386. }

    387.  

    388. .qq-friend-icons {

    389.     display: flex;

    390.     gap: 3px;

    391. }

    392. .qq-friend-icons div {

    393.     width: 15px;

    394.     height: 15px;

    395.     background-size: contain;

    396.     background-repeat: no-repeat;

    397. }

    398. .qq-icon-music {

    399.     background-image: url('img/mms-bar/MMSBar_MediaRing.png');

    400. }

    401. .qq-icon-ring {

    402.     background-image: url('img/mms-bar/MMSBar_PhoneRing.png');

    403. }

    404. .qq-icon-mobile {

    405.     background-image: url('img/mms-bar/MMSBar_MobileQQ.png');

    406. }

    407.  

    408.  

    409. /* 底部的工具栏 */

    410. .qq-toolbar {

    411.     height: 62px;

    412.     position: relative;

    413. }

    414. .qq-toolbar-left {

    415.     background-image: url('img/ToolBarBackgroundL.png');

    416.     width: 15px;

    417. }

    418. .qq-toolbar-center {

    419.     background-image: url('img/ToolBarBackgroundC.png');

    420.     flex: 1;

    421. }

    422. .qq-toolbar-right {

    423.     background-image: url('img/ToolBarBackgroundR.png');

    424.     width: 15px;

    425. }

    426.  

    427. .qq-toolbar-btns {

    428.     position: absolute;

    429.     display: flex;

    430.     overflow: hidden;

    431.     gap: 8px;

    432.     height: auto;

    433.     left: 10px;

    434.     right: 10px;

    435.     top: 12px;

    436. }

    437. .qq-toolbar-btns > button {

    438.     width: 16px;

    439.     height: 16px;

    440.     background-size: cover;

    441.     flex-shrink: 0;

    442. }

    443. #qq-MenuButton {

    444.     position: absolute;

    445.     left: 0px;

    446.     top: 32px;

    447.     width: 65px;

    448.     height: 24px;

    449.     display: block;

    450.     background-image: url('img/MenuButton_Normal.png');

    451.     background-size: cover;

    452.     cursor: pointer;

    453. }

    454. #qq-MenuButton:hover {

    455.     background-image: url('img/MenuButton_Hover.png');

    456. }

    457. #qq-MenuButton:active {

    458.     background-image: url('img/MenuButton_Down.png');

    459. }

    460. .qq-toolbar-2 {

    461.     top: 37px;

    462.     left: 74px;

    463. }

    464. #qq-SearchButton {

    465.     width: 47px;

    466.     background-image: url('img/SearchButton.png');

    467.     background-size: auto 100%;

    468.     padding-left: 18px;

    469.     color: #fff;

    470.     font-family: 'MS Sans Serif';

    471.     font-weight: 400;

    472.     font-size: 8pt;

    473. }

    474. #qq-SearchButton:hover {

    475.     color: #000;

    476. }

    477.  

    478.  

    479. /* QQ 登陆界面 */

    480.  

    481. .qq-login {

    482.     width: 325px;

    483.     background-color: #ECF6FF;

    484.     user-select: none;

    485.     padding: 0;

    486. }

    487. .qq-login-banner {

    488.     text-align: center;

    489.     height: 47px;

    490.     background-image: url('img/login_banner.png');

    491.     background-size: 100%;

    492.     background-position: top;

    493. }

    494. .qq-login-form {

    495.     background: linear-gradient(to bottom, #E4F3FF, #F0F8FF, #F0F8FF, #F0F8FF, #E4F3FF);

    496.     border: 1px solid #2F74C5;

    497.     padding: 18px;

    498.     margin: 6px;

    499. }

    500. .qq-login-form-row {

    501.     margin-bottom: 18px;

    502.     display: flex;

    503.     align-items: left;

    504.     position: relative;

    505. }

    506. .qq-login-form-row label {

    507.     width: 55px;

    508.     text-align: left;

    509.     margin-right: 7px;

    510. }

    511. .qq-login-form-row input {

    512.     width: 150px;

    513.     height: 18px;

    514.     border: 1px solid #7F9DB9;

    515.     padding: 0 2px;

    516. }

    517. .qq-login-form-row input[type="checkbox"] {

    518.     width: auto;

    519.     height: auto;

    520.     margin-right: 5px;

    521. }

    522. #qq-login-method {

    523.     position: absolute;

    524.     left: 46px;

    525.     top: 4px;

    526. }

    527. #qq-login-num {

    528.     height: 20px;

    529. }

    530. #qq-login-num-select {

    531.     position: absolute;

    532.     width: 17px;

    533.     height: 18px;

    534.     left: 189px;

    535.     top: 1px;

    536.     background: url('img/dropdown.png');

    537. }

    538. #qq-login-num-select:hover {

    539.     background-image: url('img/dropdown_hover.png');

    540. }

    541. #qq-login-num-select:active {

    542.     background-image: url('img/dropdown_active.png');

    543. }

    544. #qq-login-reg, #qq-login-forget {

    545.     width: 60px;

    546.     margin: 0 0 0 10px;

    547. }

    548. #qq-login-forget {

    549.     text-decoration: none;

    550.     white-space: nowrap;

    551.     overflow: hidden;

    552. }

    553.  

    554. .qq-login-check {

    555.     margin-bottom: 0;

    556. }

    557. .qq-login-check label {

    558.     width: auto; 

    559.     text-align: left;

    560. }

    561. .qq-login-buttons {

    562.     display: flex;

    563.     padding: 8px 8px 10px;

    564. }

    565. .qq-login-buttons button {

    566.     height: 20px;

    567.     width: 75px;

    568.     margin: 0 5px;

    569. }

    570. .qq-login-buttons span {

    571.     flex: 1;

    572. }

    573.  

    574. /* 登陆中 */

    575. .qq-logging {

    576.     width: 190px;

    577.     height: 580px;

    578.     display: flex;

    579.     flex-direction: column;

    580.     border-radius: 8px;

    581.     overflow: hidden;

    582.     user-select: none;

    583. }

    584. .qq-logging .qq-title {

    585.     height: 190px;

    586. }

    587. .qq-logging .qq-title-left {

    588.     background-image: url('img/logging/BITMAP1741_1.png');

    589.     width: 64px;

    590. }

    591. .qq-logging .qq-title-center {

    592.     background-image: url('img/logging/BITMAP1734_1.png');

    593. }

    594. .qq-logging .qq-title-right {

    595.     background-image: url('img/logging/BITMAP1735_1.png');

    596.     width: 12px;

    597. }

    598. .qq-logging .qq-title-btns {

    599.     gap: 0;

    600. }

    601. .qq-logging .qq-flex-bg {

    602.     position: relative;

    603. }

    604. .qq-logging-body {

    605.     flex: 1;

    606. }

    607. .qq-logging .qq-body-left {

    608.     background-image: url('img/logging/BITMAP1736_1.png');

    609.     width: 15px;

    610. }

    611. .qq-logging .qq-body-center {

    612.     background-image: url('img/logging/BITMAP1737_1.png');

    613.     width: 15px;

    614. }

    615. .qq-logging .qq-body-right {

    616.     background-image: url('img/logging/BITMAP1738_1.png');

    617.     width: 15px;

    618. }

    619. .qq-logging .qq-bottom-left {

    620.     background-image: url('img/logging/BITMAP1739_1.png');

    621.     width: 15px;

    622. }

    623. .qq-logging .qq-bottom-center {

    624.     background-image: url('img/logging/BITMAP1740_1.png');

    625.     flex: 1;

    626. }

    627. .qq-logging .qq-bottom-right {

    628.     background-image: url('img/logging/BITMAP1733_1.png');

    629.     width: 15px;

    630. }

    631. .qq-logging-bottom {

    632.     height: 184px;

    633.     overflow: hidden;

    634. }

    635. #qq-logging-main {

    636.     display: flex;

    637.     flex-direction: column;

    638.     align-items: center;

    639.     justify-content: center;

    640.     position: absolute;

    641.     left: 0;

    642.     right: 0;

    643.     top: 24px;

    644.     bottom: 24px;

    645. }

    646. #qq-logging-main p {

    647.     margin: 2px 0 12px;

    648. }

    649. #qq-logging-cancel {

    650.     width: 90px;

    651.     height: 26px;

    652.     border: none;

    653.     outline: none;

    654.     background-image: url('img/logging/BITMAP1742_1.png');

    655. }

    656. #qq-logging-cancel:hover {

    657.     background-image: url('img/logging/BITMAP1744_1.png');

    658. }

    659. #qq-logging-cancel:active {

    660.     background-image: url('img/logging/BITMAP1743_1.png');

    661. }

    662.  

    663. .qq-im {

    664.     background: #5db7ff;

    665.     width: 500px;

    666.     height: 460px;

    667.     border-radius: 8px;

    668.     overflow: hidden;

    669. }

    670.  

    671.  

    672.  

    673. .qq-im .qq-title-btns {

    674.     gap: 0;

    675. }

    676. .qq-im .qq-title-btns > button {

    677.     width: 17px;

    678.     height: 16px;

    679. }

    680.  

    681. #qq-im-min {

    682.     background-image: url('img/im/IMMinButton_Normal.png');

    683. }

    684. #qq-im-min:hover {

    685.     background-image: url('img/im/IMMinButton_Hover.png');

    686. }

    687. #qq-im-min:active {

    688.     background-image: url('img/im/IMMinButton_Down.png');

    689. }

    690.  

    691. #qq-im-max {

    692.     background-image: url('img/im/IMMaxButton_Normal.png');

    693. }

    694. #qq-im-max:hover {

    695.     background-image: url('img/im/IMMaxButton_Hover.png');

    696. }

    697. #qq-im-max:active {

    698.     background-image: url('img/im/IMMaxButton_Down.png');

    699. }

    700.  

    701. #qq-im-close {

    702.     background-image: url('img/im/IMCloseButton_Normal.png');

    703. }

    704. #qq-im-close:hover {

    705.     background-image: url('img/im/IMCloseButton_Hover.png');

    706. }

    707. #qq-im-close:active {

    708.     background-image: url('img/im/IMCloseButton_Down.png');

    709. }

    710.  

    711. .qq-title-icon, .qq-title-text {

    712.     position: absolute;

    713.     color: #fff;

    714.     font-weight: bold;

    715.     cursor: default;

    716. }

    717. .qq-title-icon {

    718.     background-image: url('img/im/icon.png');

    719.     width: 16px;

    720.     height: 16px;

    721.     left: 5px;

    722.     top: 5px;

    723. }

    724. .qq-title-text {

    725.     left: 22px;

    726.     top: 6px;

    727. }

    728.  

    729. .qq-skin,

    730. .qq-contant {

    731.     position: absolute;

    732.     left: 0;

    733.     top: 0;

    734.     width: 100%;

    735.     height: 100%;

    736.     display: flex;

    737.     flex-direction: column;

    738. }

    739.  

    740. .qq-skin > div {

    741.     display: flex;

    742. }

    743. .qq-skin .qq-title-bg {

    744.     height: 26px;

    745. }

    746. .qq-skin .qq-body-bg {

    747.     flex: 1;

    748. }

    749.  

    750. .qq-im .qq-title-left {

    751.     background-image: url('img/im/IMBorderTop.png');

    752.     width: 25px;

    753. }

    754. .qq-im .qq-title-center {

    755.     background-image: url('img/im/IMBorderTop.png');

    756.     background-size: 10000px 26px;

    757.     background-position: top;

    758. }

    759.  

    760. .qq-im .qq-bottom-left,

    761. .qq-im .qq-bottom-center,

    762. .qq-im .qq-bottom-right {

    763.     background-image: url('img/im/IMBorderBottom.png');

    764.     height: 8px;

    765. }

    766. .qq-im .qq-bottom-left {

    767.     width: 10px;

    768. }

    769. .qq-im .qq-bottom-center {

    770.     background-size: 10000px 8px;

    771.     background-position: top;

    772.     flex: 1;

    773. }

    774. .qq-im .qq-bottom-right {

    775.     width: 10px;

    776.     background-position: right;

    777. }

    778.  

    779. .qq-im-big-toolbar {

    780.     margin: 0 4px;

    781.     padding-left: 6px;

    782.     height: 36px;

    783.     background-image: url('img/im/IMBigToolBarBackground.png');

    784.     display: flex;

    785. }

    786. .qq-im-big-toolbar button {

    787.     color: rgb(7,30,129);

    788.     font-weight: bold;

    789.     background-repeat: no-repeat;

    790.     background-position: center left;

    791.     background-position-x: 2px;

    792.     padding: 0 8px 0 28px;

    793.     border: 1px solid transparent;

    794. }

    795. .qq-im-big-toolbar button:hover {

    796.     border-color: rgb(70,136,201);

    797.     background-color: rgb(130,199,255);

    798. }

    799. .qq-im-big-toolbar button:active {

    800.     border-color: rgb(40,99,157);

    801.     background-color: rgb(83,168,245);

    802. }

    803. #qq-im-msg {

    804.     background-image: url('img/im/IMBigToolbarMQQ.png');

    805. }

    806. #qq-im-video {

    807.     background-image: url('img/im/IMBigToolbarVideo.png');

    808. }

    809. #qq-im-audio {

    810.     background-image: url('img/im/IMBigToolbarQQSQQ.png');

    811. }

    812. #qq-im-file {

    813.     background-image: url('img/im/IMBigToolbarSendFile.png');

    814. }

    815. #qq-im-3d {

    816.     background-image: url('img/im/IMBigToolbar3DShow.png');

    817. }

    818. #qq-im-invite {

    819.     background-image: url('img/im/IMBigToolbarInvite.png');

    820. }

    821.  

    822. .qq-im-contant {

    823.     display: flex;

    824.     flex: 1;

    825.     gap: 4px;

    826.     padding: 0 8px 8px;

    827.     overflow: hidden;

    828.     min-height: 0;

    829. }

    830.  

    831. .qq-im-main {

    832.     display: flex;

    833.     flex-direction: column;

    834.     flex: 1;

    835.     gap: 6px;

    836.     min-height: 0;

    837. }

    838. .qq-im-side, .qq-im-chat {

    839.     display: flex;

    840.     flex-direction: column;

    841.     border: 1px solid rgb(53,111,175);

    842.     width: 140px;

    843.     height: 100%;

    844.     overflow: hidden;

    845. }

    846.  

    847. /* 聊天框聊天区域 */

    848. .qq-im-chat {

    849.     width: 100%;

    850.     border-radius: 4px;

    851.     background-color: #fff;

    852.     overflow: hidden;

    853.     min-height: 0;

    854. }

    855.  

    856. .qq-im-chat-msg {

    857.     flex: 1;

    858.     display: flex;

    859.     flex-direction: column;

    860.     min-height: 0; 

    861. }

    862.  

    863. .qq-im-friend-info {

    864.     background: linear-gradient(to bottom, #ffffff, #b6d5f5);

    865.     border-bottom: 1px solid #84a6c6;

    866.     padding: 1px 2px;

    867.     color: rgb(7,30,129);

    868.     cursor: pointer;

    869. }

    870. .qq-im-friend-info:hover {

    871.     color: rgb(99,119,190);

    872. }

    873. .qq-im-friend-info img {

    874.     width: 20px;

    875.     height: 20px;

    876.     margin-right: 5px;

    877.     vertical-align: sub;

    878.     float: left;

    879. }

    880.  

    881. .qq-im-chat-msg-list {

    882.     flex: 1;

    883.     overflow-y: auto;

    884.     overflow-x: hidden;

    885.     padding: 5px;

    886.     min-height: 0;

    887.     max-height: 100%;

    888. }

    889. .qq-im-chat-msg-list li p {

    890.     color: #000;

    891.     padding-left: 15px;

    892.     line-height: 1.4;

    893. }

    894. .qq-im-chat-msg-list li p:first-of-type {

    895.     color: #210f95;

    896.     padding-left: 0;

    897. }

    898. .qq-im-chat-msg-list li.my p:first-of-type {

    899.     color: #2d794b;

    900. }

    901. .qq-im-chat-msg-list li p:first-of-type span {

    902.     font-size: 12px;

    903.     padding-left: 8px;

    904. }

    905.  

    906. .qq-im-chat-toolbar {

    907.     display: flex;

    908.     align-items: center;

    909.     gap: 4px;

    910.     height: 20px;

    911.     padding-left: 4px;

    912.     background: url('img/im/IMSmallToolbarBackground.png');

    913.     background-size: 10000px 100%;

    914.     background-position: center;

    915. }

    916.  

    917. .qq-im-chat-toolbar button {

    918.     width: 18px;

    919.     height: 18px;

    920.     border: 1px solid transparent;

    921.     background-image: url('img/im/IMSmallToolbarFace.png');

    922. }

    923.  

    924. .qq-im-chat-toolbar button:hover {

    925.     border-color: rgb(135,164,197);

    926.     background-color: rgb(183,214,245);

    927. }

    928. .qq-im-chat-toolbar button:active {

    929.     border-color: rgb(109,146,186);

    930.     background-color: rgb(170,200,230);

    931. }

    932. .qq-im-chat-toolbar .im-toolbar-font {

    933.     background-image: url('img/im/IMSmallToolbarFont.png');

    934. }

    935. .qq-im-chat-toolbar .im-toolbar-face {

    936.     background-image: url('img/im/IMSmallToolbarFace.png');

    937. }

    938. .qq-im-chat-toolbar .im-toolbar-other {

    939.     background-image: url('img/im/IMSmallToolbarOtherContent.png');

    940. }

    941. .qq-im-chat-toolbar .im-toolbar-picture {

    942.     background-image: url('img/im/IMSmallToolbarPicture.png');

    943. }

    944. .qq-im-chat-toolbar .im-toolbar-catch {

    945.     background-image: url('img/im/IMSmallToolbarCatch.png');

    946. }

    947. .qq-im-chat-toolbar .im-toolbar-scene {

    948.     background-image: url('img/im/IMSmallToolbarScene.png');

    949. }

    950. .qq-im-chat-toolbar .im-toolbar-bag {

    951.     background-image: url('img/im/IMSmallToolbarSuperbag.png');

    952. }

    953. .qq-im-chat-toolbar .im-toolbar-ptt {

    954.     background-image: url('img/im/IMSmallToolbarPtt.png');

    955. }

    956. .qq-im-chat-toolbar span {

    957.     background: rgb(114,149,188);

    958.     width: 1px;

    959.     height: 80%;

    960. }

    961.  

    962. .qq-im-chat-send {

    963.     height: 70px;

    964.     padding: 4px;

    965.     border: none;

    966.     outline: none;

    967.     resize: none;

    968. }

    969.  

    970. .qq-im-btns {

    971.     display: flex;

    972.     height: 20px;

    973.     gap: 5px;

    974. }

    975. .qq-im-btns span {

    976.     flex: 1;

    977. }

    978. .qq-im-btns .qq-btn {

    979.     padding: 0 2px;

    980. }

    981.  

    982. /* 聊天框右侧栏 */

    983. .qq-im-side-btn {

    984.     position: relative;

    985.     height: 20px;

    986.     width: 100%;

    987.     z-index: 2;

    988.     text-align: left;

    989.     padding-left: 20px;

    990.     background-image: url('img/im/IMSidebarButtonExpand_Normal.png');

    991.     background-size: 1000px 100%;

    992. }

    993. .qq-im-side-btn::before,

    994. .qq-im-side-btn::after {

    995.     position: absolute;

    996.     content: '';

    997.     height: 100%;

    998.     top: 0;

    999.     z-index: -1;

    1000. }

    1001. .qq-im-side-btn::before {

    1002.     background-image: url('img/im/IMSidebarButton_Normal.png');

    1003.     width: 50px;

    1004.     left: 0;

    1005. }

    1006. .qq-im-side-btn::after {

    1007.     background-image: url('img/im/IMSidebarMenu_Normal.png');

    1008.     width: 33px;

    1009.     right: 0;

    1010. }

    1011. .qq-im-side-btn:hover::before {

    1012.     background-image: url('img/im/IMSidebarButton_Hover.png');

    1013. }

    1014. .qq-im-side-btn:hover::after {

    1015.     background-image: url('img/im/IMSidebarMenu_Hover.png');

    1016. }

    1017. .qq-im-show {

    1018.     height: 100%;

    1019.     background-size: cover;

    1020.     background-position: 50%;

    1021. }

    1022. .qq-im-zone {

    1023.     background: #f6f6f6;

    1024.     color: #0f0657;

    1025. }

    1026. .qq-im-zone div {

    1027.     line-height: 1.4;

    1028.     padding: 0 2px;

    1029. }

    1030. .qq-im-zone span {

    1031.     color: red;

    1032. }

    1033. </style>

    1034. </head>

    1035.  

    1036. <body>

    1037.  

    1038. <div class="qq-im drag-parent" style="left: 40%; top: 20%; z-index: 9999">

    1039.     <div class="qq-skin">

    1040.         <div class="qq-title-bg">

    1041.             <div class="qq-title-left"></div>

    1042.             <div class="qq-title-center"></div>

    1043.             <div class="qq-title-right"></div>

    1044.         </div>

    1045.         <div class="qq-body-bg">

    1046.             <div class="qq-body-left"></div>

    1047.             <div class="qq-body-center"></div>

    1048.             <div class="qq-body-right"></div>

    1049.         </div>

    1050.         <div class="qq-bottom-bg">

    1051.             <div class="qq-bottom-left"></div>

    1052.             <div class="qq-bottom-center"></div>

    1053.             <div class="qq-bottom-right"></div>

    1054.         </div>

    1055.     </div>

    1056.     <div class="qq-contant">

    1057.         <div class="qq-title drag-handle">

    1058.             <div class="qq-title-icon"></div>

    1059.             <div class="qq-title-text">与 メ乖乖女ソ 聊天中</div>

    1060.             <div class="qq-title-btns">

    1061.                 <button id="qq-im-min" title="隐藏"></button>

    1062.                 <button id="qq-im-max" title="最大化"></button>

    1063.                 <button id="qq-im-close" title="关闭"></button>

    1064.             </div>

    1065.         </div>

    1066.         <div class="qq-im-big-toolbar">

    1067.             <button id="qq-im-msg">短信</button>

    1068.             <button id="qq-im-video">视频</button>

    1069.             <button id="qq-im-audio">语音</button>

    1070.             <button id="qq-im-file">传文件</button>

    1071.             <button id="qq-im-3d">3D秀</button>

    1072.             <button id="qq-im-invite">邀请</button>

    1073.         </div>

    1074.          

    1075.         <div class="qq-im-contant">

    1076.             <div class="qq-im-main">

    1077.                 <div class="qq-im-chat">

    1078.                     <!-- 聊天内容 -->

    1079.                     <div class="qq-im-chat-msg">

    1080.                         <div class="qq-im-friend-info">

    1081.                             <img src="img/avatar/97.png">

    1082.                             <p>メ乖乖女ソ(3453674)：为了躲开所有结局的可能，你连开始都直接按了暂停键</p>

    1083.                         </div>

    1084.                         <ul class="qq-im-chat-msg-list">

    1085.                             <li class="my">

    1086.                                 <p>痴情梦丶<span>20:37:01</span></p>

    1087.                                 <p>在吗？</p>

    1088.                             </li>

    1089.                             <li>

    1090.                                 <p>メ乖乖女ソ<span>20:37:08</span></p>

    1091.                                 <p>原来你也在网上冲浪啊~</p>

    1092.                             </li>

    1093.                         </ul>

    1094.                     </div>

    1095.  

    1096.                     <!-- 聊天工具栏 -->

    1097.                     <div class="qq-im-chat-toolbar">

    1098.                         <button class="im-toolbar-font"></button>

    1099.                         <button class="im-toolbar-face"></button>

    1100.                         <button class="im-toolbar-other"></button>

    1101.                         <span></span>

    1102.                         <button class="im-toolbar-picture"></button>

    1103.                         <button class="im-toolbar-catch"></button>

    1104.                         <button class="im-toolbar-scene"></button>

    1105.                         <button class="im-toolbar-bag"></button>

    1106.                         <button class="im-toolbar-ptt"></button>

    1107.                     </div>

    1108.  

    1109.                     <!-- 聊天发送框 -->

    1110.                     <textarea class="qq-im-chat-send"></textarea>

    1111.                 </div>

    1112.                 <div class="qq-im-btns">

    1113.                     <button class="qq-btn">聊天记录(H)</button>

    1114.                     <button class="qq-btn">消息模式(T)</button>

    1115.                     <span></span>

    1116.                     <button class="qq-btn">关闭(C)</button>

    1117.                     <div style="display: flex; gap: 2px;">

    1118.                         <button class="qq-btn" id="btn-send-msg">发送(S)</button>

    1119.                         <button class="qq-btn" style="padding: 0;">↓</button>

    1120.                     </div>

    1121.                 </div>

    1122.             </div>

    1123.             <div class="qq-im-side">

    1124.                 <div style="flex: 1">

    1125.                     <button class="qq-im-side-btn">对方形象</button>

    1126.                     <div class="qq-im-show" style="background-image: url('img/im/show1.gif')"></div>

    1127.                 </div>

    1128.                 <div class="qq-im-zone qq-single-line">

    1129.                     <button class="qq-im-side-btn">个人空间</button>

    1130.                     <div>摘要：若无法为你撑起晴空，那我便陪你共沐风雨</div>

    1131.                     <div>日记：<span>48</span>条/<span>169</span>评论</div>

    1132.                     <div>相册：<span>12</span>张/<span>23</span>评论</div>

    1133.                     <div>收藏：<span>62</span>个</div>

    1134.                 </div>

    1135.                 <div style="flex: 1">

    1136.                     <button class="qq-im-side-btn">我的形象</button>

    1137.                     <div class="qq-im-show" style="background-image: url('img/im/show3.gif')"></div>

    1138.                 </div>

    1139.             </div>

    1140.         </div>

    1141.     </div>

    1142. </div>

    1143.  

    1144. <!-- QQ 主面板 -->

    1145. <div class="qq-panel drag-parent" style="left: 70%; top: 10%;">

    1146.     <!-- 标题栏 -->

    1147.     <div class="qq-title drag-handle">

    1148.         <div class="qq-title-left"></div>

    1149.         <div class="qq-title-center"></div>

    1150.         <div class="qq-title-right"></div>

    1151.         <div class="qq-title-btns">

    1152.             <button id="qq-min" title="隐藏"></button>

    1153.             <button id="qq-color" title="颜色改变"></button>

    1154.             <button id="qq-close" title="关闭"></button>

    1155.         </div>

    1156.     </div>

    1157.     <!-- 用户信息头部 -->

    1158.     <div class="qq-head">

    1159.         <div class="qq-flex-bg">

    1160.             <div class="qq-head-left"></div>

    1161.             <div class="qq-head-center"></div>

    1162.             <div class="qq-head-right"></div>

    1163.         </div>

    1164.         <div id="qq-status-pic" title="修改个人资料"></div>

    1165.         <button id="qq-status-btn" title="更改状态"></button>

    1166.         <label id="qq-num">痴情梦丶(在线)</label>

    1167.         <div class="qq-head-btns">

    1168.             <button id="qq-mail" title="收发邮件">

    1169.                 <img src="img/MailButton.png" /><label>(0)</label>

    1170.             </button>

    1171.             <button id="qq-security" title="安全中心">

    1172.                 <img src="img/security_normal.png" />

    1173.             </button>

    1174.             <button id="qq-payment" title="我的钱包">

    1175.                 <img src="img/payment.png" />

    1176.             </button>

    1177.         </div>

    1178.     </div>

    1179.     <!--主面板区域-->

    1180.     <div class="qq-body">

    1181.         <div class="qq-flex-bg">

    1182.             <div class="qq-body-left"></div>

    1183.             <div class="qq-body-center"></div>

    1184.             <div class="qq-body-right"></div>

    1185.         </div>

    1186.         <div class="qq-panel-bar">

    1187.             <button id="qq-FriendButton" title="QQ好友面板" class="active"><img src="img/panel-bar/FriendButton.png"/></button>

    1188.             <button id="qq-SBuddyButton" title="互动空间"><img src="img/panel-bar/SBuddyButton.png"/></button>

    1189.             <button id="qq-MobileButton" title="我的无线乐园"><img src="img/panel-bar/MobileButton.png"/></button>

    1190.             <button id="qq-RtxButton" title="企业好友面板"><img src="img/panel-bar/RtxButton.png"/></button>

    1191.             <button id="qq-ContentsButton" title="网络杂志面板"><img src="img/panel-bar/ContentsButton.png"/></button>

    1192.             <button id="qq-CustomButton" title="用户自定义面板"><img src="img/panel-bar/CustomButton.png"/></button>

    1193.             <button id="qq-EaseButton" title="音乐中心"><img src="img/panel-bar/EaseButton.png"/></button>

    1194.             <button id="qq-NetDiskButton" title="网络硬盘"><img src="img/panel-bar/NetDiskButton.png"/></button>

    1195.             <button id="qq-AllButton" title="综合业务面板"><img src="img/panel-bar/IntegratePanel.png"/></button>

    1196.             <button id="qq-PanelMngButton" title="面板管理器"><img src="img/panel-bar/BlankPanel.png"/></button>

    1197.         </div>

    1198.          

    1199.         <div class="qq-friend-box">

    1200.             <button class="qq-btn">QQ好友</button>

    1201.             <div class="qq-friend-list">

    1202.                 <div class="qq-friend-group">

    1203.                     我的好友(19/26)

    1204.                 </div>

    1205.                 <div class="qq-friend-group on">

    1206.                     家人(5/13)

    1207.                 </div>

    1208.                 <div class="qq-friend-item">

    1209.                     <img class="qq-friend-avatar" src="img/avatar/16.png"/>

    1210.                     <div class="qq-friend-info">

    1211.                         <p class="qq-friend-name">阿辉</p>

    1212.                         <p class="qq-friend-motto">人生沟坎多因能力不足，门槛高低全凭实力</p>

    1213.                         <div class="qq-friend-icons"></div>

    1214.                     </div>

    1215.                 </div>

    1216.                 <div class="qq-friend-item qq-vip">

    1217.                     <img class="qq-friend-avatar" src="img/avatar/22.png"/>

    1218.                     <div class="qq-friend-info">

    1219.                         <p class="qq-friend-name">哎哟喂</p>

    1220.                         <p class="qq-friend-motto">我爱吃红烧肉</p>

    1221.                         <div class="qq-friend-icons">

    1222.                             <div class="qq-icon-music"></div>

    1223.                             <div class="qq-icon-mobile"></div>

    1224.                         </div>

    1225.                     </div>

    1226.                 </div>

    1227.                 <div class="qq-friend-item">

    1228.                     <img class="qq-friend-avatar" src="img/avatar/5.png"/>

    1229.                     <div class="qq-friend-info">

    1230.                         <p class="qq-friend-name">小王子</p>

    1231.                         <p class="qq-friend-motto">我珍忄昔、祢鳪忄董，我放掱、你却拉住我。。</p>

    1232.                         <div class="qq-friend-icons">

    1233.                             <div class="qq-icon-music"></div>

    1234.                         </div>

    1235.                     </div>

    1236.                 </div>

    1237.                 <div class="qq-friend-item">

    1238.                     <img class="qq-friend-avatar" src="img/avatar/7.png"/>

    1239.                     <div class="qq-friend-info">

    1240.                         <p class="qq-friend-name">happy</p>

    1241.                         <p class="qq-friend-motto"> </p>

    1242.                         <div class="qq-friend-icons">

    1243.                             <div class="qq-icon-mobile"></div>

    1244.                         </div>

    1245.                     </div>

    1246.                 </div>

    1247.                 <div class="qq-friend-item">

    1248.                     <img class="qq-friend-avatar" src="img/avatar/9.png"/>

    1249.                     <div class="qq-friend-info">

    1250.                         <p class="qq-friend-name">木子</p>

    1251.                         <p class="qq-friend-motto">你也在网上冲浪啊</p>

    1252.                         <div class="qq-friend-icons">

    1253.                         </div>

    1254.                     </div>

    1255.                 </div>

    1256.                 <div class="qq-friend-item">

    1257.                     <img class="qq-friend-avatar" src="img/avatar/11.png"/>

    1258.                     <div class="qq-friend-info">

    1259.                         <p class="qq-friend-name">灰</p>

    1260.                         <p class="qq-friend-motto">有事请留言</p>

    1261.                         <div class="qq-friend-icons">

    1262.                             <div class="qq-icon-music"></div>

    1263.                             <div class="qq-icon-mobile"></div>

    1264.                         </div>

    1265.                     </div>

    1266.                 </div>

    1267.                 <div class="qq-friend-item qq-offline">

    1268.                     <img class="qq-friend-avatar" src="img/avatar/18.png"/>

    1269.                     <div class="qq-friend-info">

    1270.                         <p class="qq-friend-name">爱拼才会赢</p>

    1271.                         <p class="qq-friend-motto">我还年轻，所以我可以</p>

    1272.                         <div class="qq-friend-icons">

    1273.                         </div>

    1274.                     </div>

    1275.                 </div>

    1276.                 <div class="qq-friend-item qq-offline">

    1277.                     <img class="qq-friend-avatar" src="img/avatar/100.png"/>

    1278.                     <div class="qq-friend-info">

    1279.                         <p class="qq-friend-name">最深的记忆</p>

    1280.                         <p class="qq-friend-motto">把你留在心中</p>

    1281.                         <div class="qq-friend-icons">

    1282.                             <div class="qq-icon-mobile"></div>

    1283.                         </div>

    1284.                     </div>

    1285.                 </div>

    1286.                 <div class="qq-friend-group">

    1287.                     同学(28/37)

    1288.                 </div>

    1289.                 <div class="qq-friend-group">

    1290.                     陌生人

    1291.                 </div>

    1292.                 <div class="qq-friend-group">

    1293.                     黑名单

    1294.                 </div>

    1295.             </div>

    1296.              

    1297.             <button class="qq-btn">手机好友</button>

    1298.             <button class="qq-btn">群/校友录</button>

    1299.             <button class="qq-btn">最近联系人</button>

    1300.         </div>

    1301.     </div>

    1302.      

    1303.     <!--底部工具栏区域-->

    1304.     <div class="qq-toolbar">

    1305.         <div class="qq-flex-bg">

    1306.             <div class="qq-toolbar-left"></div>

    1307.             <div class="qq-toolbar-center"></div>

    1308.             <div class="qq-toolbar-right"></div>

    1309.         </div>

    1310.         <div class="qq-toolbar-btns">

    1311.             <button id="qq-MobileMsgButton" title="发送手机消息" style="background-image: url('img/MobileMsgButton.png')"></button>

    1312.             <button id="qq-GameButton" title="QQ游戏" style="background-image: url('img/GameButton.png')"></button>

    1313.             <button id="qq-TTButton" title="腾讯TT浏览器" style="background-image: url('img/TTButton.png')"></button>

    1314.             <button id="qq-ChatRoomButton" title="进入聊天室" style="background-image: url('img/ChatRoomButton.png')"></button>

    1315.             <button id="qq-QQHome" title="QQ空间" style="background-image: url('img/QQHome.png')"></button>

    1316.             <button id="qq-QQMusicButton" title="QQ音乐" style="background-image: url('img/QQMusicButton.png')"></button>

    1317.             <button id="qq-QQTVButton" title="网络电视(QQLive)" style="background-image: url('img/QQTVButton.png')"></button>

    1318.             <button id="qq-Pet" title="QQ宠物" style="background-image: url('img/OpenPet.png')"></button>

    1319.         </div>

    1320.         <div id="qq-MenuButton"></div>

    1321.         <div class="qq-toolbar-btns qq-toolbar-2">

    1322.             <button id="qq-MsgManagerButton" title="信息管理器" style="background-image: url('img/MsgManagerButton.png');background-size: auto;width: 19px"></button>

    1323.             <button id="qq-SearchButton" title="查找用户">查找</button>

    1324.         </div>

    1325.     </div>

    1326. </div>

    1327.  

    1328. <!-- QQ 登录窗口 -->

    1329. <div class="xp_form drag-parent" style="z-index: 10; left: 10%; top: 36%;">

    1330.     <div class="header__bg"></div>

    1331.     <header class="app__header drag-handle">

    1332.         <img src="img/qq.png" alt="QQ用户登录" class="app__header__icon" draggable="false">

    1333.         <div class="app__header__title">QQ用户登录</div>

    1334.         <div class="app__header__buttons">

    1335.             <button class="header__button header__button--minimize"></button>

    1336.             <button class="header__button header__button--maximize header__button--disable"></button>

    1337.             <button class="header__button header__button--close"></button>

    1338.         </div>

    1339.     </header>

    1340.     <div class="app__content">

    1341.         <div class="qq-login">

    1342.             <div class="qq-login-banner"></div>

    1343.             <div class="qq-login-form">

    1344.                 <div class="qq-login-form-row">

    1345.                     <label for="qq-login-num">

    1346.                         QQ号码

    1347.                         <img id="qq-login-method" src="img/select.png">

    1348.                     </label>

    1349.                     <input type="text" id="qq-login-num" placeholder="<请在这儿输入QQ号码>">

    1350.                     <button class="qq-btn" id="qq-login-reg">申请号码</button>

    1351.                     <button id="qq-login-num-select"></button>

    1352.                 </div>

    1353.                 <div class="qq-login-form-row" style="align-items: flex-end">

    1354.                     <label for="qq-login-password">QQ密码</label>

    1355.                     <input type="password" id="qq-login-password" placeholder="">

    1356.                     <a href="https://accounts.qq.com/find/password" target="_blank" id="qq-login-forget">忘了密码？</a>

    1357.                 </div>

    1358.                 <div class="qq-login-form-row qq-login-check">

    1359.                     <label style="width: 55px"></label>

    1360.                     <input type="checkbox" id="qq-login-auto" checked>

    1361.                     <label for="qq-login-auto">自动登录</label>

    1362.                     <input type="checkbox" id="qq-login-hide">

    1363.                     <label for="qq-login-hide">隐身登录</label>

    1364.                 </div>

    1365.             </div>

    1366.             <div class="qq-login-buttons">

    1367.                 <button class="qq-btn" style="width: 78px">高级设置 ↓</button>

    1368.                 <span></span>

    1369.                 <button class="qq-btn" id="loginBtn">登录</button>

    1370.                 <button class="qq-btn" id="registerBtn">取消</button>

    1371.             </div>

    1372.         </div>

    1373.     </div>

    1374. </div>

    1375.  

    1376. <!-- 登录中窗口 -->

    1377. <div class="qq-logging drag-parent" style="left: 28%; top: 10%;z-index:999">

    1378.     <!-- 标题栏 -->

    1379.     <div class="qq-title drag-handle">

    1380.         <div class="qq-title-left"></div>

    1381.         <div class="qq-title-center"></div>

    1382.         <div class="qq-title-right"></div>

    1383.         <div class="qq-title-btns">

    1384.             <button id="qq-min"></button>

    1385.             <button id="qq-close"></button>

    1386.         </div>

    1387.     </div>

    1388.      

    1389.     <div class="qq-logging-body qq-flex-bg">

    1390.         <div class="qq-body-left"></div>

    1391.         <div class="qq-body-center"></div>

    1392.         <div class="qq-body-right"></div>

    1393.     </div>

    1394.     <div class="qq-logging-bottom qq-flex-bg">

    1395.         <div class="qq-bottom-left"></div>

    1396.         <div class="qq-bottom-center"></div>

    1397.         <div class="qq-bottom-right"></div>

    1398.     </div>

    1399.     <div id="qq-logging-main">

    1400.         <img src="img/logging/BITMAP1710_1.png">

    1401.         <img src="img/logging/START_GIF1704_1.gif">

    1402.         <p>正在登录</p>

    1403.         <button id="qq-logging-cancel"></button>

    1404.     </div>

    1405. </div>

    1406.  

    1407.  

    1408. <script>

    1409. const playAudio = url => new Audio(url).play().catch(e => console.error('播放失败:', e));

    1410.  

    1411. document.addEventListener('DOMContentLoaded',  () => {

    1412.  

    1413.     document.getElementById('btn-send-msg').onclick = () => {

    1414.         playAudio('sound/msg.mp3');

    1415.     };

    1416.  

    1417.     document.getElementById('qq-MsgManagerButton').onclick = () => {

    1418.         playAudio('sound/system.mp3');

    1419.     };

    1420.  

    1421.     document.getElementById('qq-im-msg').onclick = () => {

    1422.         playAudio('sound/msg.mp3');

    1423.     };

    1424.  

    1425.     document.getElementById('qq-im-video').onclick = () => {

    1426.         playAudio('sound/call.mp3');

    1427.     };

    1428.  

    1429.     document.getElementById('qq-im-audio').onclick = () => {

    1430.         playAudio('sound/call.mp3');

    1431.     };

    1432.  

    1433.     playAudio('sound/msg.mp3');

    1434.  

    1435.     /* 拖拽移动窗口 */ 

    1436.     document.querySelectorAll('.drag-parent').forEach(parent  => {

    1437.         const handle = parent.querySelector('.drag-handle'); 

    1438.         if (!handle) return;

    1439.   

    1440.         let isDragging = false;

    1441.         let startX, startY, startLeft, startTop;

    1442.   

    1443.         const getPosition = (el) => {

    1444.             const style = window.getComputedStyle(el); 

    1445.             return {

    1446.                 left: parseInt(style.left,  10) || 0,

    1447.                 top: parseInt(style.top,  10) || 0 

    1448.             };

    1449.         };

    1450.   

    1451.         handle.addEventListener('mousedown',  (e) => {

    1452.             e.preventDefault(); 

    1453.             isDragging = true;

    1454.             const pos = getPosition(parent);

    1455.             startLeft = pos.left; 

    1456.             startTop = pos.top; 

    1457.             startX = e.clientX; 

    1458.             startY = e.clientY; 

    1459.         });

    1460.   

    1461.         handle.addEventListener('touchstart',  (e) => {

    1462.             e.preventDefault(); 

    1463.             isDragging = true;

    1464.             const pos = getPosition(parent);

    1465.             startLeft = pos.left; 

    1466.             startTop = pos.top; 

    1467.             startX = e.touches[0].clientX; 

    1468.             startY = e.touches[0].clientY; 

    1469.         }, { passive: false });

    1470.   

    1471.         const moveHandler = (e) => {

    1472.             if (!isDragging) return;

    1473.             const clientX = e.clientX  ?? e.touches?.[0]?.clientX; 

    1474.             const clientY = e.clientY  ?? e.touches?.[0]?.clientY; 

    1475.              

    1476.             parent.style.left  = `${startLeft + (clientX - startX)}px`;

    1477.             parent.style.top  = `${startTop + (clientY - startY)}px`;

    1478.         };

    1479.   

    1480.         document.addEventListener('mousemove',  moveHandler);

    1481.         document.addEventListener('touchmove',  moveHandler, { passive: false });

    1482.   

    1483.         const endHandler = () => isDragging = false;

    1484.         document.addEventListener('mouseup',  endHandler);

    1485.         document.addEventListener('touchend',  endHandler);

    1486.     });

    1487. });

    1488. </script>

    1489.  

    1490. </body>

    1491. </html>
    复制代码


    QQ2006, QQ2006经典界面, QQ经典界面
    回复

    使用道具 举报

    返回列表 发布新帖

    回复
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册 微信登录

    本版积分规则

    上一主题     下一主题
    您需要 登录 后才可以回复，轻松玩转社区，没有帐号？立即注册
    快速回复
    小K网承接程序二开，各类小程序定制开发，价格优惠

    投诉/建议联系微信

    +xiaokheik

    |Archiver|手机版|小黑屋

    Copyright © 2026 小K网 版权所有 备案号： 蜀ICP备18015321号-3

    关灯 在本版发帖
    扫一扫添加微信客服
     QQ客服返回顶部
    快速回复 返回顶部 返回列表