菜单 搜索
首页 前端知识 漂亮精美拟态UI个人主页html源码

漂亮精美拟态UI个人主页html源码

2024-06-08 22:06:13 前端知识 前端哥 617 485 我要收藏

效果图

PC端
在这里插入图片描述
移动端
在这里插入图片描述

部分代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>UI - 个人主页（开源版）</title>
    <meta name="keywords" content="很好的源码">
    <meta name="description" content="一款简约风格开源的新UI主页设计。">
    <meta name="author" content="孤客博客">
    <link rel="shortcut icon" href="https://www.520xv.com/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://cdn.staticfile.org/Swiper/8.3.0/swiper-bundle.min.css">
    <!-- <link rel="stylesheet" href="./static/swiper/swiper-bundle.min.css"> -->
    <link rel="stylesheet" href="./static/css/normalize.css">
    <!-- 点开下面两个css，都是第四行代码替换背景 -->
    <link rel="stylesheet" href="./static/css/style.pc.css" media="screen and (min-width: 992px)"> <!-- PC端 -->
    <link rel="stylesheet" href="./static/css/style.phone.css" media="screen and (max-width: 992px)"> <!-- 移动端 -->
    <!-- 本地路径（如果免费的静态托管链接打不开就开本地的吧） -->
    <!-- <script src="./static/sweetalert/docs/assets/sweetalert/sweetalert.min.js"></script> -->
    <!-- <script src="./static/js/jquery-3.5.1.min.js"></script> -->
    <!-- 静态资源托管 -->
    <script src="https://npm.elemecdn.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>

<body onmousedown="getClick(event)">
    <div class="xf_load">
        <span>页面加载中...</span>
    </div>
    <section class="big_box">
        <header class="xf_hd_box">
            <!-- 标题 -->
            <h1>Hacker LoSFeR</h1>
            <!-- 标题阴影（两个要改一样的） -->
            <h2 class="xf_glass">Hacker LoSFeR</h2>
            <div class="xf_search">
                <form action="https://www.baidu.com/baidu" target="_blank">
                    <input type="text" name="word" size="30" autocomplete="off" placeholder="百度一下">
                    <input type="submit" value=""><i class="iconfont icon-sousuo"></i>
                </form>
            </div>
        </header>
        <div class="main_content">
            <div class="xf_left_box slidebox">
                <div class="xf_leftbox_top xf_glass">
                    <div class="xf_time xf_glass">
                        <div class="clock">
                            <div class="hand hours"></div>
                            <div class="hand minutes"></div>
                            <div class="hand seconds"></div>
                            <div class="point"></div>
                            <div class="marker">
                                <span class="marker_time marker__1"></span>
                                <span class="marker_time marker__2"></span>
                                <span class="marker_time marker__3"></span>
                                <span class="marker_time marker__4"></span>
                            </div>
                        </div>
                        <div class="display_time">
                            <h3 class="xf_time_1">20:57</h3>
                            <h4 class="xf_time_2">2022年10月23日</h4>
                            <h5 class="xf_time_3">星期日</h5>
                        </div>
                    </div>
                    <div class="xf_weather xf_glass">
                        <div id="he-plugin-standard"></div>
                    </div>
                </div>
                <div class="xf_ico_banner">
                    <div class="swiper-wrapper">
                        <!-- 这是第一个轮播 -->
                        <div class="swiper-slide">
                            <ul>
                                <li class="xf_glass">
                                    <a href="JavaScript:;" target="_blank" rel="noopener noreferrer">
                                        <img src="./static/upload/qq.png">
                                    </a>
                                </li>
                                <li class="xf_glass">
                                    <a href="JavaScript:;" rel="noopener noreferrer">
                                        <!-- 这里切换微信图片 -->
                                        <img loading="lazy" id="xf_wxImg" src="./static/upload/tx.jpg" alt="扫一扫添加微信" width="300" height="200">
                                        <img src="./static/upload/wx.png">
                                    </a>
                                </li>
                                <li class="xf_glass">
                                    <a href="JavaScript:;" target="_blank" rel="noopener noreferrer">
                                        <img src="./static/upload/bilibili.png">
                                    </a>
                                </li>
                                <li class="xf_glass">
                                    <a href="JavaScript:;" target="_blank" rel="noopener noreferrer">
                                        <img src="./static/upload/mail.png">
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!-- 这是第二个轮播 -->
                        <div class="swiper-slide">
                            <ul>
                                <li class="xf_glass">
                                    <a href="JavaScript:;" target="_blank" rel="noopener noreferrer">
                                        <img src="./static/upload/qq.png">
                                    </a>
                                </li>
                                <li class="xf_glass">
                                    <a href="JavaScript:;" target="_blank" rel="noopener noreferrer">
                                        <img src="./static/upload/wx.png">
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="swiper-button-next swiper-button-next-ico"></div>
                    <div class="swiper-button-prev swiper-button-prev-ico"></div>
                </div>
            </div>
            <div class="xf_center_box slidebox">
                <div class="center_top xf_glass">
                    <div class="xf_jieshao">
                        <div class="xf_tx xf_glass"><img src="./static/upload/tx.jpg" alt="头像"></div>
                        <div class="name">
                            <small>gu ke wang</small>
                            <h3>孤客博客</h3>
                            <p>不了解痛苦的人 就不会了解真正的和平！</p>
                        </div>
                        <div class="iconfont icon-zhuanfa xf_zhuanfa"></div>
                    </div>
                    <div class="xf_but">
                        <a class="but_site" href="JavaScript:;">
                            <span>旗下站点</span>
                            <div></div>
                        </a>
                        <a class="but_fortune" href="JavaScript:;">
                            <span>今日运势</span>
                            <div></div>
                        </a>
                    </div>
                </div>
                <div class="center_bottom">
                    <div class="xf_site xf_glass">
                        <h4>
                            <font>旗下站点</font>
                        </h4>
                        <ul class="web_site">
                            <li class="xf_glass">
                                <!-- 这里替换链接 -->
                                <a href="https://616vip.cn" target="_blank" rel="noopener noreferrer">
                                    <!-- 这里替换图标 -->
                                    <img class="xf_img_light" src="https://pic.rmb.bdstatic.com/bjh/240417/de28c7642c0f00188b630295c39a5bf29218.jpeg" alt="孤客博客"><span>孤客博客</span>
                                </a>
                            </li>
                            <li class="xf_glass">
                                <a href="JavaScript:;" target="_blank" rel="noopener noreferrer">
                                    <img class="xf_img_light" src="https://pic.rmb.bdstatic.com/bjh/240417/de28c7642c0f00188b630295c39a5bf29218.jpeg" alt="音乐播放器"><span>音乐播放器</span>
                                </a>
                            </li>
                            <li class="xf_glass">
                                <a href="JavaScript:;" target="_blank" rel="noopener noreferrer">
                                    <img class="xf_img_light" src="https://pic.rmb.bdstatic.com/bjh/240417/de28c7642c0f00188b630295c39a5bf29218.jpeg" alt="拟态ui"><span>拟态ui</span>
                                </a>
                            </li>
                            <li class="xf_glass">
                                <a href="JavaScript:;" target="_blank" rel="noopener noreferrer">
                                    <img class="xf_img_light" src="https://pic.rmb.bdstatic.com/bjh/240417/de28c7642c0f00188b630295c39a5bf29218.jpeg" alt="影视"><span>影视</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="xf_fortune xf_glass" style="display: none;">
                        <h4>
                            <font>今日运势: <span>★★★★★</span></font>
                        </h4>
                        <ul class="Today_Fortune xf_glass">
                            <li><strong>运势：</strong><span><em style="width: 45%;"></em></span></li>
                            <li><strong>爱情：</strong><span><em style="width: 70%;"></em></span></li>
                            <li><strong>健康：</strong><span><em style="width: 100%;"></em></span></li>
                            <li><strong>财富：</strong><span><em style="width: 20%;"></em></span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="xf_right_box xf_glass slidebox">
                <div class="xf_music_box">
                    <i class="iconfont icon-youjiantou" id="icon-rotate"></i>
                    <div class="music_picture xf_glass">
                        <span id="music-img" class="music-img" alt="picture"></span>
                    </div>
                    <div class="Song_Title">
                        <div class="music-info"></div>
                        <div class="runningbox">
                            <div class="start">00:00</div>
                            <div class="running" onclick="changeProgress()">
                                <div class="running1"><i class="circular"></i></span></div>
                            </div>
                            <div class="end">00:00</div>
                        </div>
                        <ul class="music_but">
                            <li id="pre" class="iconfont" onclick="preMusic()"></li>
                            <li id="pause" class="iconfont" onclick="pauseMusic()"></li>
                            <li id="next" class="iconfont" onclick="nextMusic()"></li>
                        </ul>
                    </div>
                </div>
                <div class="xf_friends" style="display: none;">
                    <h4 id="xf-friend-rotate"><img src="./static/images/cooperation.png">我的好友</h4>
                    <ul class="xf_friend_YYDS">
                        <li>
                            <!-- 跳转链接 把2465829308替换你的QQ就行 -->
                            <a href="http://wpa.qq.com/msgrd?v=3&uin=2465829308&site=qq&menu=yes" target="_blank" rel="noopener noreferrer">
                                <!-- 获取你的QQ头像 -->
                                <img src="https://q2.qlogo.cn/headimg_dl?dst_uin=3768552237&amp;spec=100" alt="孤客博客">
                                <h5>孤狼博客</h5>
                                <p>不了解痛苦的人 就不会了解真正的和平！</p>
                            </a>
                        </li>
                        <li>
                            <a href="JavaScript:;" target="_blank" rel="noopener noreferrer">
                                <img src="favicon.ico" alt="孤客博客">
                                <h5>孤客博客</h5>
                                <p>精选优质好源码供应平台！</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <div id="myModal" class="modal">
        <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
        <img class="modal-content" id="img01">
        <div id="caption"></div>
    </div>
    <div class="xf-swiper-pagination"></div>
    <footer class="xf_footer xf_glass">
        <p>Copyright &copy; 2022 <a href="JavaScript:;" rel="noopener noreferrer">孤客博客 www.616vip.cn</a> 版权所有 已安全运行<span class="xf-days"></span></p>
        <!-- 如果没有备案号就把下面两个p标签注释 -->
        <p><img src="./static/images/icp.png" alt="icp备案"><a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">赣ICP备00000000号-5</a></p>
        <p><img src="./static/images/beian.png" alt="公安备案"><a href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=000000000000" target="_blank" rel="noopener noreferrer">赣公网安备00000000000000号</a></p>
    </footer>
    <script src="https://cdn.staticfile.org/Swiper/8.3.0/swiper-bundle.min.js"></script>
    <!-- <script src="./static/swiper/swiper-bundle.min.js"></script> -->
    <script src="./static/js/flexible.js"></script>
    <script src="./static/js/fireworks.js"></script>
    <script src="./static/js/index.js"></script>
    <script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script>
    <script>
        // 这里修改网站运行时间
        var xf_footer_time1=new Date('2024-04-01').getTime()
        var xf_footer_time2=new Date().getTime()
        var days=xf_footer_time2-xf_footer_time1
        var number_of_days=parseInt(days/(1000*60*60*24))
        $(".xf-days")[0].innerHTML=number_of_days+'天'
    </script>
</body>

</html>

领取源码

123云盘

  • 📢博客主页：孤客网络科技工作室官方账号
  • 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正！
  • 📢本文由孤客原创，若侵权联系作者，首发于CSDN博客
  • 📢停下休息的时候不要忘了别人还在奔跑，希望大家抓紧时间学习，全力奔赴更好的生活💻
转载请注明出处或者链接地址：https://www.qianduange.cn//article/11565.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！