一款樱花主题的静态个人主页源码

一款樱花主题的静态个人主页,纯 Html-Css-JavaScript,基于 Dimension 模板二次修改。普通虚拟主机就能搭,无需其他环境。

图片[1]-一款好看的樱花个人主页源码-本站

部署方式与源码地址

把源码上传到服务器,修改 index.html 里面的代码,访问域名就可以使用。效果预览:Demo 1 https://nianbroken.github.io/Personal_Sakura_Guide_Page/ ,Demo 2 https://www.nianbroken.top/ 。仓库在 GitHub(https://github.com/nianbroken/Personal_Sakura_Guide_Page/)和 Gitee(https://gitee.com/nianbroken/Personal_Sakura_Guide_Page/)都有。

相对原版改了哪些

页面内头像改为本地头像;原本的背景替换为动态樱花背景(参考自 fwxiaohan.github.io);去除 li 标签的锚点链接、改为文本链接,同时去除超链接下方的横线,即 main.css 里的:

border-bottom: dotted 1px rgba(255, 255, 255, 0.5);

去除页面中间的黑色块块,即删掉 main.css 里的这两行径向渐变:

background-image: -webkit-radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
background-image: radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);

另外增加了显示访问者 IP 地址的功能,调用 https://pv.sohu.com/cityjson?ie=utf-8 接口获取。

使用注意

第三方 IP 查询接口随时可能限流或下线,显示失败要做兜底;页面是纯静态的,改昵称、链接、社交入口都在 index.html,样式微调在 main.css,不需要构建工具。

© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容