欢迎来到好人卡资源网,专注网络技术资源收集,我们不仅是网络资源的搬运工,也生产原创资源。寻找资源请留言

个人樱花引导页源码第三优化版

未分类 sky995 8个月前 (02-01) 192次浏览 0个评论

个人樱花引导页源码第三优化版一款好看的个人引导页,普通虚拟主机即可搭建,无需其他环境。
把源码上传到服务器,修改index.html里面的代码,访问域名就可以使用。
纯Html-Css-JavaScript


个人樱花引导页

注意:
此源码是基于 Dimension 的二次修改

Demo 1:https://nianbroken.github.io/Personal_Sakura_Guide_Page/

Demo 2:https://www.nianbroken.top/


更新日志:

1.2 - 2022年1月30日

  • 更正错别字“途径”→“途经”(她只是途经我留下了星火 而我却任凭它焚烧了我整个荒原)
  • 修复页面中头像周围出现两个圆框
  • 新增版权信息的年份支持自动更新
  • 底部新增一条文案
  • 修复其他Bug

1.1 - 2021年7月21日

  • 修复 Svg 无法显示 的问题
  • 增加 Meta Description 优化SEO
  • 增加 图像的 Alt 属性 优化SEO
  • 增加 Meta Language 标记 优化SEO
  • 增加 万能收款码 (需自行修改 \money_receiving_QR_code\index.html 相关参数)
  • 此版本可通过Bing、Google搜索引擎的质量检查

修改内容:

  1. 将页面内头像改为本地头像
  2. 将原本的背景替换为动态樱花背景(参考自 fwxiaohan.github.io )
  3. 去除<li>标签的锚点链接,改为文本链接
  4. 去除超链接下方的横线

main.css内的

border-bottom: dotted 1px rgba(255, 255, 255, 0.5);
CSS
  1. 去除页面中间的黑色块块

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%);
CSS
  1. 增加显示访问者IP地址(调用 https://pv.sohu.com/cityjson?ie=utf-8 接口)

Dimension与个人樱花引导页的对比:

Dimension

个人樱花引导页源码第三优化版

个人樱花引导页

静态图
个人樱花引导页源码第三优化版

动态图
个人樱花引导页源码第三优化版

由于Gif较大,可能加载不出来或加载比较慢,建议直接点击图片跳转至演示站查看。

下载地址

Personal_Sakura_Guide_Page - 1.2.zip


好人卡资源网 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:个人樱花引导页源码第三优化版
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址