favinavi - 在线笔记-page6

比较简单实用的一种做法是使用certbot，签发证书、安装、配置web服务器（apache/nginx等）、自动更新一条龙。详细介绍请访问cerbot官网：https://certbot.eff.org/

这里简单介绍主要步骤：（以Ubuntu linux server为例）

先安装snapd
sudo apt install snapd

确保安装的是最新版本内核
sudo snap install core; sudo snap refresh core;

使用snapd安装certbot
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot

最后，运行cerbot并自动配置apache运行https
sudo certbot --apache

其中，certbot会要求输入域名、email等信息，基本上照做就行。

成功后cerbot会返回如下信息
Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/favinavi.com/fullchain.pem
Key is saved at: /etc/letsencrypt/live/favinavi.com/privkey.pem
This certificate expires on 2023-06-26.
These files will be updated when the certificate renews.
Certbot has set up a scheduled task to automatically renew this certificate in the background.

包含证书和密钥文件保存路径，证书过期日期等，并且告诉您可以让certbot在后台自动更新证书。

by: fanshome  visibility 366
2023-05-21 07:24 (UTC)

纯css+svg实现，鼠标移上去心脏会有节律地跳动，适合用来做点赞按钮参考，或者学习css动画技巧。

by: fanshome  visibility 371
2023-05-21 12:19 (UTC)

非常真实的抖动效果，鼠标移上去还有叮当声哦...

点“演示”按钮体验一下。

by: fanshome  visibility 529
2023-05-25 08:52 (UTC)

Loading图标，又称“加载中”图标，以往是用gif格式动图来实现。但是gif有一个比较明显的问题，不易调整大小，然后图片一般比较粗糙，颗粒感严重。

现在流行纯css的loading效果，比如不断转圈式、不断跳动式，网上有很多。这里不多做介绍，搜索一下会有很多。

给大家介绍一款动态横条式彩虹loading效果，类似谷歌风格，又超越谷歌的单一颜色Loading Bar，既充分利用了容器顶部的“无用”空间，又不失醒目，用户体验比较好，干扰的感觉最小，同时又感觉酷炫、美观。点击本页红色的“演示”按钮看看吧。

css代码参考自：https://codepen.io/lister/pen/mdrrYJQ

这不是进度条，进度条一般是逐渐填满的形式，有另外的实现方式。

by: fanshome  visibility 383
2023-05-20 08:35 (UTC)

使用css: linear-gradient来实现线性颜色渐变背景，效果见下图：
[img]

点击“演示”按钮可以查看效果。

by: fanshome  visibility 378
2023-05-20 13:50 (UTC)

在很久很久以前，没有智能手机的时代，写网站只要考虑PC显示屏幕，基本上任何页面元素都只要固定的宽度和高度，比较好处理。

为了提高页面的加载速度，讲究点的方法是：
假如某个页面有多个小图片（比如二十个小图标）需要显示，可以把这二十个小图片合并到一张大图，然后通过背景图片切片的方法（background-position:）来显示不同的小图片，从而极大地提高页面加载速度。

当今时代，适配大大小小各类屏幕成了某种必需，最好能适配超过分辨率的pc大屏幕、普通笔记本电脑、pad、手机等等。虽然网速比从前提高了很多，但是，尽量减少网页图片使用数量依然是提高网页加载速度的必要手段。

有些时候，我们需要为同一类型、同样大小的链接配上不同的图片，此时，假如能够只使用一张图片来解决问题就更好了。例如，某些场合要用户选择不同的浏览器来进行下一步，假设用到以下这一张图片中的5种浏览器：

[img]

需求是：图片能自动适配不同屏幕宽度，使用背景图片方式来分割出5个链接，缩放窗口大小时，图片自动跟着缩放，同时宽高比不变，即保持图片不变形；与此同时，对应的5个链接也要随着背景图片的缩放而同比例缩放。

那么要怎么实现呢？请看以下CSS代码，任何用到宽度、高度的地方都使用百分比，保证缩放比例不变形。

by: fanshome  visibility 418
2023-06-03 06:09 (UTC)

有时候会发现现成的图标很美观，但是和一般习惯不同（或者纯粹不符合个人喜好），比如“分享”图标，一般是一个箭头，但是箭头方向感觉和习惯的相反，这时就需要来个水平镜像。
与其化精力重新画图或寻找合适的图标都太麻烦，不如用css的transform来实现镜像。
正好favinavi的logo非常适合来说明镜像效果，请点击“演示”按钮查看效果。
favinavi.com的logo: [img]

by: fanshome  visibility 478
2023-05-25 17:06 (UTC)

记录一些经常用到的时间处理函数以备用。

by: fanshome  visibility 405
2023-06-02 14:05 (UTC)

网上搜索得到的匹配汉字的正则表达式有一部分并不全面，只匹配了Unicode字符集中\u4E00-\u9FA5范围，并不包含\uF900-\uFA2D这些后期添加的拾遗补缺的、生冷僻的中文字符。而有时候我们需要能比较全面的匹配所有中文字符，则需要在常用的正则表达式上做一些修改补充。

要注意的是，JavaScript和PHP在匹配Unicode字符时，它们的正则表达方式并不一致，不能直接复制过去使用。
php正则记得要添加“/u”修正符。

by: fanshome  visibility 402
2023-05-19 07:57 (UTC)