网站 › 『编程语言区』 › 一款好看的樱花个人引导页1.1版本更新

碎念_Nian 发表于 2021-7-21 14:09

一款好看的樱花个人引导页1.1版本更新

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

------------

注意：
此源码是基于 (https://html5up.net/dimension "Dimension") 的二次修改

Demo 1：(https://nianbroken.github.io/Personal_Sakura_Guide_Page/ "https://nianbroken.github.io/Personal_Sakura_Guide_Page/")

Demo 2：(https://www.nianbroken.top/ "https://www.nianbroken.top/")

Github：(https://github.com/nianbroken/Personal_Sakura_Guide_Page/ "https://github.com/nianbroken/Personal_Sakura_Guide_Page/")

Gitee：(https://gitee.com/nianbroken/Personal_Sakura_Guide_Page/ "https://gitee.com/nianbroken/Personal_Sakura_Guide_Page/")

------------

### 更新日志：
#### 1.1 - 2021年7月21日
- 修复 **Svg 无法显示** 的问题
- 增加 **Meta Description** 优化SEO
- 增加 **图像的 Alt 属性** 优化SEO
- 增加 **Meta Language 标记** 优化SEO
- 增加 **万能收款码** （需自行修改 `\money_receiving_QR_code\index.html` 相关参数）
- 此版本可通过Bing、Google搜索引擎的质量检查

------------

### 修改内容：

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

main.css内的

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

5. 去除页面中间的黑色块块

main.css内的

```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%);
```

6. 增加显示访问者IP地址（调用 (https://pv.sohu.com/cityjson?ie=utf-8 "https://pv.sohu.com/cityjson?ie=utf-8") 接口）

------------

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

> #### Dimension
>
> [!(https://blog.nianbroken.top/usr/uploads/2021/05/2403737638.png "Dimension")](https://html5up.net/dimension "Dimension")


> #### 个人樱花引导页
>
> 静态图
> [](https://www.nianbroken.top/ "碎念个人樱花引导页静态图")

> 动态图
> [](https://www.nianbroken.top/ "碎念个人樱花引导页动态图")

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

### 下载地址：
(https://blog.nianbroken.top/usr/uploads/2021/07/3553046433.zip "Personal_Sakura_Guide_Page - 1.1.zip")

加载失败丶丶丶 发表于 2021-7-21 16:42

http://cleverteenager.top/possible/%E5%8A%A8%E6%80%81%E6%95%A3%E8%8A%B1%E8%83%8C%E6%99%AF/index.html
我当时只搞到这个背景

rattao 发表于 2021-7-21 15:58

碎念_Nian 发表于 2021-7-21 14:47
555是什么？

一个电影站，这个站的分流页面和你发布的相似度极高，我以为你是这个站的站长呢。

_蓝白小熊、 发表于 2021-7-21 14:15

挺好看~~{:1_921:}

mokson 发表于 2021-7-21 14:17

TL90 发表于 2021-7-21 14:17

颜值很高，可以可以

rattao 发表于 2021-7-21 14:20

看到这个，我只想知道你和555是什么关系。

凌羽飞 发表于 2021-7-21 14:28

颜值很高，可以可以

荒天 发表于 2021-7-21 14:43

好有诗意哦

碎念_Nian 发表于 2021-7-21 14:47

rattao 发表于 2021-7-21 14:20
看到这个，我只想知道你和555是什么关系。

555是什么？

愛屋及烏烏有屋 发表于 2021-7-21 14:51

感觉不是很有用的样子。:lol

sqzh 发表于 2021-7-21 15:03

真是好看

查看完整版本: 一款好看的樱花个人引导页1.1版本更新